

{"id":15767,"date":"2024-06-27T11:54:16","date_gmt":"2024-06-27T11:54:16","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=15767"},"modified":"2026-01-14T12:36:01","modified_gmt":"2026-01-14T12:36:01","slug":"case-study-web-design-advocacy-guide","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/","title":{"rendered":"Case Study: Advocacy Through Walls. Website Creation for Advocacy Guide"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Some projects start with a client brief. Others start with a brick wall. This one started with both.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When <a href=\"https:\/\/zealo.us\">Zealous<\/a> came to us with a vision for an advocacy resource\u2014something practical, ethical, and deeply human\u2014they handed us a guide. Twenty-eight pages long. Dense, important, and written for people doing urgent, emotional work: public defenders, organizers, formerly incarcerated advocates. What they needed was a tool. A companion that listens, just as much as it informs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is how we built <a href=\"https:\/\/advocacythroughwalls.com\">Advocacy Through Walls<\/a>\u2014an interactive digital guide that later earned a Webby Winner title in the Law category and a Webby Honoree mention for Diversity, Equity &amp; Inclusion. Not because it tried to impress, but because it stayed focused on usefulness.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here&#8217;s the story.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Advocacy Through Walls: Tubik &amp; Zealous Webby Winner 2024\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/TCxdbFsHxIo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2><span style=\"font-weight: 400;\">The Brief: How Do You Design for Seriousness Without Turning Somber?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Truth is, transforming a long, text-heavy advocacy guide into a user-friendly, beautifully crafted digital product is no small task. Especially when that guide includes complex topics like trauma-informed care, compensation ethics, consent, and power dynamics.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So we asked ourselves:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How do we honor the gravity of the subject without overwhelming the user?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How do we make a website <\/span><i><span style=\"font-weight: 400;\">feel<\/span><\/i><span style=\"font-weight: 400;\"> intentional\u2014without resorting to the sterile minimalism of law firm templates?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How do we create something that looks like it belongs in 2020s, not 2000s?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We knew we needed something more than just clean UI and pretty colors.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We needed to design <\/span><i><span style=\"font-weight: 400;\">with<\/span><\/i><span style=\"font-weight: 400;\"> emotion, <\/span><i><span style=\"font-weight: 400;\">through<\/span><\/i><span style=\"font-weight: 400;\"> structure.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15774\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg\" alt=\"case study advocacy through walls website tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">Editorial Meets Interactive: The Structure<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We approached the information architecture like we would a chapter book\u2014because that\u2019s what it was. But instead of turning it into a static PDF-on-a-screen situation (you know the kind), we leaned into editorial storytelling techniques.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead of one monolithic scroll, we added a series of visual anchor points. These \u201crest stops\u201d help users retain focus and orient themselves in the text\u2014especially in a space where attention might be strained by the emotional nature of the subject matter.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Think <\/span><i><span style=\"font-weight: 400;\">scrollable<\/span><\/i><span style=\"font-weight: 400;\">, <\/span><i><span style=\"font-weight: 400;\">skim-friendly<\/span><\/i><span style=\"font-weight: 400;\">, and <\/span><i><span style=\"font-weight: 400;\">sectioned<\/span><\/i><span style=\"font-weight: 400;\">\u2014but still deeply immersive.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Chapter-based navigation<\/b><span style=\"font-weight: 400;\">: Each section got its own &#8220;cover,&#8221; a visual anchor that gave it presence.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Intuitive UI flow<\/b><span style=\"font-weight: 400;\">: From Zoomed-out trauma reactions to nuanced notes on consent, users can jump between sections or scroll through at their own pace.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Digestible sections<\/b><span style=\"font-weight: 400;\">: No massive text dumps. We used hierarchy, chunking, and motion to pace the read like a thoughtful conversation.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">All of it designed to feel calm, not clinical. Uncluttered, but not blank.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"advocacy through walls home page tubik\" src=\"https:\/\/player.vimeo.com\/video\/899830652?h=824859c079&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<h2><span style=\"font-weight: 400;\">The Aesthetic: Kind, Clever, Confident<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s talk color. And type. And that gritty, grainy, handmade energy. We weren\u2019t interested in polished sterility. We wanted texture. Humanity. So we built a color palette that holds tension quietly:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Charcoal &amp; Seashell<\/b><span style=\"font-weight: 400;\"> as the structural backbone\u2014modern, serious, accessible.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pops of <\/span><b>orange (#F39454, #F06423)<\/b><span style=\"font-weight: 400;\"> and <\/span><b>green (#C3D4AD, #5CD33A)<\/b><span style=\"font-weight: 400;\"> to mark interaction and warmth.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Unexpected purples, muted yellows, and soft blues to inject tone and rhythm across chapters.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Typography followed suit. Two typefaces\u2014both contemporary, both legible, but chosen for contrast in tone:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polly Sans<\/b><span style=\"font-weight: 400;\"> (used for headings and navigation): wide, modern, and quietly assertive.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tiempos Text<\/b><span style=\"font-weight: 400;\"> (used for body and pull quotes): warm, bookish, with a rhythm that suits reading at length.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The result was a system that could hold nuance\u2014visually, semantically, and structurally.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15771\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/Advocacy-Through-Walls-web-page-design-tubik.jpg\" alt=\"Advocacy Through Walls web page design tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/Advocacy-Through-Walls-web-page-design-tubik.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/Advocacy-Through-Walls-web-page-design-tubik-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/Advocacy-Through-Walls-web-page-design-tubik-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/Advocacy-Through-Walls-web-page-design-tubik-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/Advocacy-Through-Walls-web-page-design-tubik-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15772\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-pages-tubik-design.jpg\" alt=\"advocacy through walls web pages tubik design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-pages-tubik-design.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-pages-tubik-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-pages-tubik-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-pages-tubik-design-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-pages-tubik-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15769\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-tubik-design-website.jpg\" alt=\"advocacy through walls tubik design website\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-tubik-design-website.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-tubik-design-website-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-tubik-design-website-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-tubik-design-website-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-tubik-design-website-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">Custom Graphics: Because Clip Art Wasn\u2019t Going to Cut It<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We knew this project would live or die by its visuals\u2014no one wants to read walls of advocacy text on a screen unless the experience respects their time <\/span><i><span style=\"font-weight: 400;\">and<\/span><\/i><span style=\"font-weight: 400;\"> their eyes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So we went all in.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Custom illustrations for each chapter<\/b><span style=\"font-weight: 400;\">, combining flat fills, grainy textures, and organic lines. Some represent actions (listening, sharing resources), others embody abstract concepts (power dynamics, trauma).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Smooth micro-animations<\/b><span style=\"font-weight: 400;\"> to add breath between scrolls.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visual motifs<\/b><span style=\"font-weight: 400;\"> like bricks, waves, and information bubbles that tie chapters together without forcing a theme.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We didn\u2019t want to over-explain with graphics. We wanted to <\/span><i><span style=\"font-weight: 400;\">feel<\/span><\/i><span style=\"font-weight: 400;\"> our way through them.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15773\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-website-tubik-design.jpg\" alt=\"advocacy through walls website tubik design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-website-tubik-design.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-website-tubik-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-website-tubik-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-website-tubik-design-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-website-tubik-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15770\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-design-tubik.jpg\" alt=\"advocacy through walls web design tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-design-tubik.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-design-tubik-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-design-tubik-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-design-tubik-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-web-design-tubik-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15768\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-mobile-website-tubik.jpg\" alt=\"advocacy through walls mobile website tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-mobile-website-tubik.jpg 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-mobile-website-tubik-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-mobile-website-tubik-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-mobile-website-tubik-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/advocacy-through-walls-mobile-website-tubik-150x113.jpg 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><iframe loading=\"lazy\" title=\"advocacy through wall home page tubik\" src=\"https:\/\/player.vimeo.com\/video\/899829026?h=f37b9ca95b&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<h2><span style=\"font-weight: 400;\">UX Challenges We Had to Unravel<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s not pretend everything was easy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s what we wrestled with:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Too much content, too little context. <\/b><span style=\"font-weight: 400;\">We had the raw text, but not always the hierarchy. We had to reverse-engineer structure, intention, and emotion from the writing itself.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Balancing emotion and function. <\/b><span style=\"font-weight: 400;\">Advocacy work is emotionally intense. The design had to support\u2014not flatten\u2014that intensity. Every element had to serve a purpose <\/span><i><span style=\"font-weight: 400;\">and<\/span><\/i><span style=\"font-weight: 400;\"> a feeling.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accessibility without compromise. <\/b><span style=\"font-weight: 400;\">With so much visual storytelling, we had to be extra intentional with contrast ratios, text size, and navigation logic.<\/span><\/li>\n<\/ol>\n<p>All the efforts resulted in a bright, informative, and attractive website, leading Zealous and Tubik teams to one more Webby!<\/p>\n<p><iframe loading=\"lazy\" title=\"advocacy through walls web interactions tubik design\" src=\"https:\/\/player.vimeo.com\/video\/967601316?h=23cfaeea2e&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Credits Where They&#8217;re Due<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The Tubik team that brought it to life:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u0410nastasiia Zhyltsova<\/b><span style=\"font-weight: 400;\"> \u2013 UX\/UI Design<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vlad Taran<\/b><span style=\"font-weight: 400;\"> \u2013 Art Direction<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maryna Solomennykova<\/b><span style=\"font-weight: 400;\"> \u2013 Graphic Design<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Anastasiia Ostapenko<\/b><span style=\"font-weight: 400;\"> \u2013 Project Management<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">And of course, the Zealous team for dreaming up the thing in the first place.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Want More Like This?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We don\u2019t only do advocacy. We do identity. We do product. We do weird.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">But we always start with people, purpose, and pixels that mean something.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Check out more of our design case studies:<\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-identity-product-design-financial-app\/\">Serra. Identity and Product Design for Financial App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ecommerce-website-design-for-brewery\/\">MOVA Brewery. Ecommerce Website Design for Beer Producer<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-website-design-3d-animation-for-prostheses-producer\/\">HP23. Website and 3D Animation for Prostheses Producer<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-web-design-healthtech-product\/\">FluxWear. Web Design and Development for Health Tech Product<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ui-design-process-video\/\">UI Design Process for Web and Mobile: 3 Detailed Video Cases<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-design-educational-platform\/\">Magma Math. Web Design for Educational Platform<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-web-design-synthetic-data-platform\/\">Synthesized 2.0. Web Design for High-Quality Synthetic Data Platform<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/brand-identity-hotel-offers-service\/\">HotelCard. Brand Identity for Hotel Offers Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/identity-ux-design-healthcare-service\/\">Nibble Health. Identity and UX Design for Healthcare Fintech Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/physica-magazine-web-design-scientific-blog\/\">Physica Magazine. Web Design and Graphics for Scientific Blog<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/identity-website-design-golf-management-service\/\">ProAgenda. Identity and Website Design for Golf Management Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/identity-product-design-food-marketplace\/\">Kaiten. Identity and Product Design for Food Marketplace<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/website-design-electrical-engineering-service\/\">THT. Website Design for Electrical Engineering Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/website-design-for-podcast\/\">Nonconventional Show. Website Design for Podcast<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/brand-identity-ux-design-fintech\/\">Crezco. Brand Identity and UI\/UX Design for Fintech Service<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we helped Zealous transform a dense 28-page advocacy guide into an award-winning, emotionally intelligent digital experience\u2014thoughtfully structured, visually anchored, and built for real-world use.<\/p>\n","protected":false},"author":10003,"featured_media":15774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,9],"tags":[440,534,447,548,457,552,16,468,569,57,479,100,482,138,485,147,487,170,489,179,491,212,502,248,504,256,515,263,529,336,532,434,533],"coauthors":[634],"class_list":["post-15767","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-ui_ux","tag-tubik","tag-web-design-article","tag-tubik-studio","tag-website-design","tag-ui","tag-website-usability","tag-animation","tag-ui-design-process","tag-2d-illustration","tag-case-study","tag-usability","tag-design","tag-user-experience","tag-design-process","tag-user-experience-design","tag-design-studio","tag-user-experience-design-process","tag-digital-illustration","tag-user-experience-examples","tag-educational-website","tag-user-interface","tag-graphic-design","tag-ux","tag-illustration","tag-ux-design-article","tag-interaction-design","tag-uxui","tag-interface-illustration","tag-visual-storytelling","tag-motion-design","tag-web-animation","tag-theme-illustration","tag-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Advocacy Through Walls<\/title>\n<meta name=\"description\" content=\"An interactive case study on how Tubik turned a dense 28-page legal advocacy guide into a Webby-winning, user-centered digital tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Advocacy Through Walls\" \/>\n<meta property=\"og:description\" content=\"An interactive case study on how Tubik turned a dense 28-page legal advocacy guide into a Webby-winning, user-centered digital tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-27T11:54:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T12:36:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Anastasiia Lutsenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anastasiia Lutsenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/\",\"name\":\"Case Study: Advocacy Through Walls\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg\",\"datePublished\":\"2024-06-27T11:54:16+00:00\",\"dateModified\":\"2026-01-14T12:36:01+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\"},\"description\":\"An interactive case study on how Tubik turned a dense 28-page legal advocacy guide into a Webby-winning, user-centered digital tool.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg\",\"width\":1600,\"height\":1200,\"caption\":\"case study advocacy through walls website tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Advocacy Through Walls. Website Creation for Advocacy Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\",\"name\":\"Anastasiia Lutsenko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"caption\":\"Anastasiia Lutsenko\"},\"description\":\"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.\",\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Advocacy Through Walls","description":"An interactive case study on how Tubik turned a dense 28-page legal advocacy guide into a Webby-winning, user-centered digital tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Advocacy Through Walls","og_description":"An interactive case study on how Tubik turned a dense 28-page legal advocacy guide into a Webby-winning, user-centered digital tool.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2024-06-27T11:54:16+00:00","article_modified_time":"2026-01-14T12:36:01+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg","type":"image\/jpeg"}],"author":"Anastasiia Lutsenko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anastasiia Lutsenko","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/","name":"Case Study: Advocacy Through Walls","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg","datePublished":"2024-06-27T11:54:16+00:00","dateModified":"2026-01-14T12:36:01+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1"},"description":"An interactive case study on how Tubik turned a dense 28-page legal advocacy guide into a Webby-winning, user-centered digital tool.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2024\/06\/case-study-advocacy-through-walls-website-tubik.jpg","width":1600,"height":1200,"caption":"case study advocacy through walls website tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-web-design-advocacy-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Advocacy Through Walls. Website Creation for Advocacy Guide"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1","name":"Anastasiia Lutsenko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25","url":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","caption":"Anastasiia Lutsenko"},"description":"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.","url":"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/15767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/10003"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=15767"}],"version-history":[{"count":14,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/15767\/revisions"}],"predecessor-version":[{"id":16865,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/15767\/revisions\/16865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/15774"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=15767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=15767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=15767"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}