

{"id":9952,"date":"2020-07-17T13:47:32","date_gmt":"2020-07-17T13:47:32","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=9952"},"modified":"2026-05-13T17:27:53","modified_gmt":"2026-05-13T17:27:53","slug":"credentially-webdesign-webflow-development","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/","title":{"rendered":"Credentially Case Study: Building a Website That Works as Hard as the Product"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">There is a particular kind of design project that asks more from a team than just good taste.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When the product itself is still being shaped, when the brand is freshly minted, and when the client&#8217;s Sales team is already waiting at the door, every creative decision carries operational weight. That was the situation with Credentially, a SaaS platform built to automate the notoriously paperwork-heavy process of hiring, onboarding, and compliance tracking for healthcare professionals.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Tubik team had already been working on Credentially&#8217;s brand identity and product redesign when the assignment arrived to build a website\u2014one that would do real work in the world: educate visitors, generate qualified leads, and present a young company as a credible player in healthcare HR.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What followed was a full web design and Webflow development cycle, from wireframe review to live publishing. Here is how it actually happened.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10015\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/credentially-design-website-case-study-tubik.png\" alt=\"credentially design website case study tubik\" width=\"1920\" height=\"1441\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/credentially-design-website-case-study-tubik.png 1920w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/credentially-design-website-case-study-tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/credentially-design-website-case-study-tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/credentially-design-website-case-study-tubik-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/credentially-design-website-case-study-tubik-150x113.png 150w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<h2><strong>The Client Arrived Prepared\u2014And It Changed Everything<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The Credentially team came to the table having already mapped out the basic site architecture and written the content. They had UX wireframes. They had thought through user flows. This is rarer than you might expect, and it meaningfully shifted the design process from discovery into refinement. The Tubik team reviewed the proposed structure, suggested usability improvements where the flows felt slightly off, and moved quickly into visual development.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The final website structure comprised six core pages\u2014Home, About, Clients, Features, Insights, and Security\u2014plus supporting pages for Careers, Terms &amp; Policies, and a company blog. Six pages sounds modest. In practice, each one carried its own interaction design challenges, content hierarchy problems, and visual storytelling requirements. The homepage alone went through more iteration cycles than most full projects.<\/span><\/p>\n<h2><\/h2>\n<p><iframe loading=\"lazy\" title=\"Tubik Credentially website scroll animation\" src=\"https:\/\/player.vimeo.com\/video\/495403436?h=39fda55ee0&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><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9999\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/UX-credentially-website-design.png\" alt=\"UX credentially website design\" width=\"1440\" height=\"900\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/UX-credentially-website-design.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/UX-credentially-website-design-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/UX-credentially-website-design-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/UX-credentially-website-design-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/UX-credentially-website-design-150x94.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<h2><strong>A Brand Language That Travels from Product to Website<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">One of the more elegant aspects of this project was that the visual grammar already existed. During the branding phase, Tubik had developed a system of &#8220;folders&#8221;\u2014container elements that appear inside the Credentially product as homes for user documents. The logo itself carries a conceptual statement: a blue tab breaking free from orange borders, visualizing the platform&#8217;s promise of working without limitations. Both of these ideas carried forward into the website, giving it a visual continuity with the product that stock illustrations or generic UI patterns could never achieve.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Custom illustration was chosen over stock photography deliberately. Two styles were proposed: one with stylized, non-standard character proportions and artistic textures, the other more universal and detailed. The client chose the latter. Every illustration was sketched, reviewed, and approved before being developed into a full color digital version\u2014a process that takes longer but eliminates the expensive problem of late-stage visual pivots.<\/span><\/p>\n<h2><strong>The Homepage: Where Most of the Thinking Happened<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/blog.tubikstudio.com\/hero-images-in-web-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Hero sections<\/a> carry disproportionate responsibility in conversion rate optimization. The Credentially hero had an additional layer: the brand slogan exists in multiple variations, and the team wanted all of them present without cluttering the layout. The solution was a typewriter effect using the open-source Typed.js script, letting the tagline retype itself through each variation. Clean, functional, and distinctly more alive than a static headline.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The hero section was also designed to feature an animated product video\u2014but the video did not exist yet at the time of development. Rather than leaving a placeholder, the team built a section using product mockup screens with simplified UI, detailed enough to communicate the product clearly. This static version went live and stayed live until the video was ready. Interestingly, the client grew fond of it and briefly considered keeping it permanently. After testing several hybrid approaches, the creative team made the case for using a preview clip that plays automatically for a few seconds, inviting the viewer to click through to the full video. The goal was immediate engagement, not decoration.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Further down the homepage, a section listing platform benefits went through a significant post-launch revision. Initial user testing and an SEO audit revealed that visitors were getting stuck at that section\u2014a friction pattern that directly affected scroll depth and conversion metrics. The fix was architectural: the section was shortened, with secondary information moved into tabs. The redesign took a few hours. The behavioral data improved. This is the kind of iteration cycle that separates a living website from a launched-and-forgotten one.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9977\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/branding-elements-credentially-website-design.png\" alt=\"branding elements credentially website design\" width=\"1440\" height=\"900\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/branding-elements-credentially-website-design.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/branding-elements-credentially-website-design-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/branding-elements-credentially-website-design-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/branding-elements-credentially-website-design-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/branding-elements-credentially-website-design-150x94.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9989\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/invision-credentially-website-design.png\" alt=\"invision credentially website design\" width=\"1440\" height=\"900\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/invision-credentially-website-design.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/invision-credentially-website-design-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/invision-credentially-website-design-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/invision-credentially-website-design-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/invision-credentially-website-design-150x94.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<h2><strong>Features Page: Visual Metaphors That Actually Work<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The Features page contains one of the more conceptually satisfying design decisions in the project. Full-width &#8220;breaking lines&#8221; run across the page, each one labeled with a pain point in healthcare hiring: Manual, Time-intensive, Chaotic. As the user scrolls and each line reaches the center of the viewport, it breaks\u2014a visual metaphor for the platform&#8217;s core promise of removing those barriers. It is the kind of interaction design that works precisely because it earns its complexity; the motion serves meaning rather than existing for spectacle.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A second noteworthy element on this page was the toggle interface for showcasing 18 platform benefits split across two categories: &#8220;Stay Staffed&#8221; and &#8220;Stay Compliant.&#8221; The challenge with that volume of information is familiar to anyone who has worked on SaaS feature pages\u2014too much at once overwhelms, too little undersells. The team iterated through multiple layout options before landing on a switchable tab structure with both toggles active by default, reinforcing the message that clients get both categories simultaneously rather than choosing between them.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9983\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/hero-final-credentially-website-design.png\" alt=\"hero final credentially website design\" width=\"1440\" height=\"831\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/hero-final-credentially-website-design.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/hero-final-credentially-website-design-300x173.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/hero-final-credentially-website-design-768x443.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/hero-final-credentially-website-design-1024x591.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/hero-final-credentially-website-design-150x87.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><iframe loading=\"lazy\" title=\"credentially webdesign tubik\" src=\"https:\/\/player.vimeo.com\/video\/705397273?h=9a205a4bcd&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><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9980\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/features-block-v1-credentially-website-design.png\" alt=\"features block v1 credentially website design\" width=\"1440\" height=\"900\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/features-block-v1-credentially-website-design.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/features-block-v1-credentially-website-design-300x188.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/features-block-v1-credentially-website-design-768x480.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/features-block-v1-credentially-website-design-1024x640.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/features-block-v1-credentially-website-design-150x94.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9988\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustrations-together-credentially-website-design.png\" alt=\"illustrations together credentially website design\" width=\"1440\" height=\"527\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustrations-together-credentially-website-design.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustrations-together-credentially-website-design-300x110.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustrations-together-credentially-website-design-768x281.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustrations-together-credentially-website-design-1024x375.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustrations-together-credentially-website-design-150x55.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9994\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/sketchcolor-v1-credentially-website-design.png\" alt=\"sketch+color (v1) credentially website design\" width=\"1440\" height=\"690\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/sketchcolor-v1-credentially-website-design.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/sketchcolor-v1-credentially-website-design-300x144.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/sketchcolor-v1-credentially-website-design-768x368.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/sketchcolor-v1-credentially-website-design-1024x491.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/sketchcolor-v1-credentially-website-design-150x72.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<h2><strong>Webflow as the Development Environment<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The entire website was built in <a href=\"https:\/\/blog.tubikstudio.com\/webflow-design-for-business?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Webflow<\/a>. This is worth addressing directly, because the platform still prompts skepticism in some corners of the development world. In practice, for a project of this scope and timeline, Webflow offered something that traditional front-end development cycles rarely provide: the ability to publish changes in seconds, manage animation triggers without writing bespoke JavaScript for every interaction, and hand over content management to non-technical editors without building a custom CMS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The project began in the Tubik studio account while the client arranged their own paid plan, then transferred over\u2014a process that takes a couple of clicks between paid profiles. The homepage was developed and launched independently before the remaining pages were complete, allowing the sales team to direct traffic to a live URL almost immediately. Navigation links in the header and footer were temporarily routed to anchor sections on the homepage until the full site was ready.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/blog.tubikstudio.com\/creative-motion-12-concepts-of-interface-animation?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Animation<\/a> on the Credentially website made use of Webflow&#8217;s native interaction system across most use cases: page load animations, scroll-triggered reveals, hover and click states, tab transitions, and time-based sequences. Where the native toolset hit its limits, custom code filled the gap. On the homepage, this meant integrating Typed.js for the tagline animation, scripting automatic video playback after the preview clip, and animating a statistics countdown that triggers when users reach that section. The About page used an open-source script to generate animated connection lines between a network of partner logos. The Features page required custom code for the auto-advancing hero slider and for the toggle functionality in the benefits section.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Repeating elements\u2014the navigation header, footer, pop-up windows\u2014were built as Symbols. Change a Symbol once and the update propagates across every page automatically. For a site with this many shared components, that structure alone saves hours of QA work on every revision cycle.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Credentially website design tubik\" src=\"https:\/\/player.vimeo.com\/video\/495404264?h=70cfb72ddb&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><strong>Integrations, Permissions, and the Infrastructure Behind the Interface<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Third-party integrations were handled through Zapier, connecting Webflow form submissions to HubSpot and Mailchimp. When a visitor books a demo or subscribes to the newsletter, the data routes automatically to the appropriate service and triggers a Slack notification for the team. Form data is also stored directly in the Webflow account as a backup\u2014a detail that matters more than it sounds when a sales team is working leads in real time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Access permissions were configured so that blog editors and writers could manage content without touching the structural website. They can add and remove articles, create categories, and upload downloadable files\u2014all without the ability to accidentally break a layout. This kind of role-based access is straightforward in Webflow but requires deliberate setup, and getting it right at the beginning saves significant administrative friction later.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The blog, called Insights in the site architecture, required several non-trivial solutions. Post previews needed different-colored photo overlays depending on category\u2014achieved through CSS mix-blend-mode properties injected via custom code, with jQuery handling color assignment per post. Internal search was configured to index only blog content, excluding static pages and CMS templates from results. And downloadable file attachments were implemented using conditional visibility logic: a download block appears only when a file is attached to a post, and disappears otherwise. Small detail, clean execution.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9960\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/editor-mode-credentially-case-study.png\" alt=\"editor mode credentially case study\" width=\"1242\" height=\"760\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/editor-mode-credentially-case-study.png 1242w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/editor-mode-credentially-case-study-300x184.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/editor-mode-credentially-case-study-768x470.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/editor-mode-credentially-case-study-1024x627.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/editor-mode-credentially-case-study-150x92.png 150w\" sizes=\"auto, (max-width: 1242px) 100vw, 1242px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9967\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/made-with-custom-code-6-credentially-case-study.png\" alt=\"made with custom code 6 credentially case study\" width=\"1440\" height=\"875\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/made-with-custom-code-6-credentially-case-study.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/made-with-custom-code-6-credentially-case-study-300x182.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/made-with-custom-code-6-credentially-case-study-768x467.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/made-with-custom-code-6-credentially-case-study-1024x622.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/made-with-custom-code-6-credentially-case-study-150x91.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<h2><strong>What This Project Demonstrates About Modern Web Design Process<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The Credentially website is a case study in several things simultaneously: the value of entering a project with clear content and structure already in place, the creative leverage that comes from having brand and product work precede web design, and the operational advantages of building in Webflow when iteration speed and content management matter. It also illustrates something about the design process that tends to get edited out of polished case studies\u2014the homepage you see today is not the homepage that launched. It was improved based on real behavioral data, adjusted after real users got stuck, and refined through real disagreements between the creative team and the client that were resolved by testing rather than opinion.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That is how good websites actually get made.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9987\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustration-2-credentially-website-design.png\" alt=\"illustration 2 credentially website design\" width=\"610\" height=\"330\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustration-2-credentially-website-design.png 610w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustration-2-credentially-website-design-300x162.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/illustration-2-credentially-website-design-150x81.png 150w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/p>\n<h2><strong>Recommended Reading<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Good design has layers. So does our blog. Dig into more case studies and process breakdowns below:<\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-educational-interactive-website?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Illuminating Radioactivity. Interactive Web Design for Education<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-lumen-museum-website?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Lumen. Website for Museum of Mountain Photography<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-gno-ecommerce-branding-webdesign?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">GNO Blankets. Branding and Web Design for Ecommerce<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-dashboard-ai-fashion-service?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Designer AI. Dashboard and Graphics for Fashion Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-ux-design-finance-service?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">CashMetrics. UX Design for Finance Management Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-inspora-brand-ui-design-virtual-stylist?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Inspora. Brand and UI Design for Virtual Stylist<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-slumber-mobile-ui-design-for-healthy-sleeping?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=credentially_case_study&amp;source=blog\">Slumber. Mobile UI Design for Healthy Sleeping<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A freshly minted brand, a sales team already waiting, and a product still taking shape. Here&#8217;s how we designed and built the Credentially website from wireframes to live Webflow in one full cycle.<\/p>\n","protected":false},"author":10003,"featured_media":17588,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,7,9],"tags":[533,536,47,545,100,548,108,550,123,552,127,585,138,152,166,212,256,482,487,492,511],"coauthors":[634],"class_list":["post-9952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-processes_and_tools","category-ui_ux","tag-web-design","tag-web-design-case-study","tag-branding","tag-web-user-interface","tag-design","tag-website-design","tag-design-case-study","tag-website-development","tag-design-for-business","tag-website-usability","tag-design-for-marketing","tag-webflow","tag-design-process","tag-design-tools","tag-development-tools","tag-graphic-design","tag-interaction-design","tag-user-experience","tag-user-experience-design-process","tag-user-interface-design","tag-ux-design-tools"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Credentially: Web Design &amp; Webflow Development Case Study<\/title>\n<meta name=\"description\" content=\"How Tubik designed and built the Credentially SaaS website in Webflow\u2014from brand continuity and custom illustration to post-launch iteration.\" \/>\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\/credentially-webdesign-webflow-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Credentially: Web Design &amp; Webflow Development Case Study\" \/>\n<meta property=\"og:description\" content=\"How Tubik designed and built the Credentially SaaS website in Webflow\u2014from brand continuity and custom illustration to post-launch iteration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-17T13:47:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T17:27:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/\",\"name\":\"Credentially: Web Design & Webflow Development Case Study\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png\",\"datePublished\":\"2020-07-17T13:47:32+00:00\",\"dateModified\":\"2026-05-13T17:27:53+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\"},\"description\":\"How Tubik designed and built the Credentially SaaS website in Webflow\u2014from brand continuity and custom illustration to post-launch iteration.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Credentially Case Study: Building a Website That Works as Hard as the Product\"}]},{\"@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":"Credentially: Web Design & Webflow Development Case Study","description":"How Tubik designed and built the Credentially SaaS website in Webflow\u2014from brand continuity and custom illustration to post-launch iteration.","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\/credentially-webdesign-webflow-development\/","og_locale":"en_US","og_type":"article","og_title":"Credentially: Web Design & Webflow Development Case Study","og_description":"How Tubik designed and built the Credentially SaaS website in Webflow\u2014from brand continuity and custom illustration to post-launch iteration.","og_url":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2020-07-17T13:47:32+00:00","article_modified_time":"2026-05-13T17:27:53+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png","type":"image\/png"}],"author":"Anastasiia Lutsenko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anastasiia Lutsenko","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/","url":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/","name":"Credentially: Web Design & Webflow Development Case Study","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png","datePublished":"2020-07-17T13:47:32+00:00","dateModified":"2026-05-13T17:27:53+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1"},"description":"How Tubik designed and built the Credentially SaaS website in Webflow\u2014from brand continuity and custom illustration to post-launch iteration.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/07\/Credentially-1.png","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/credentially-webdesign-webflow-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Credentially Case Study: Building a Website That Works as Hard as the Product"}]},{"@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\/9952","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=9952"}],"version-history":[{"count":15,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/9952\/revisions"}],"predecessor-version":[{"id":17591,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/9952\/revisions\/17591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/17588"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=9952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=9952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=9952"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=9952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}