Virta Health is an award-winning, San Francisco-based health care company that offers an alternative treatment for type 2 diabetes. They'd been living with a Webflow website for several years & contacted me when they were about to go through a brand refresh that required a website overhaul. Not only were they updating fonts, colors, & the brand mark, they were adding new visual elements to the brand, namely the "current" wave & a new illustration style.

The initial pitch was to launch with 10-15 redesigned pages, updating what remained of the 70+ unique pages & templates across multiple phases. But managing two different design systems within the same Webflow build or using a reverse proxy to tie together two different projects both presented unique practical challenges. We ultimately decided that a full site rebuild would be the best approach, updating the site to a modern Webflow framework & incorporating Webflow features released since the site originally launched, & presenting the new design system across all pages. This was January, & the problem was that the new branding wouldn't be finalized until early April, key page designs wouldn't be finished until early May, & the site needed to launch the first week of June.

Eventually we decided that the best strategy was to begin the build 4 months early & to do the entire project in reverse. This meant starting out rebuilding all of the pages in the default Knockout styles, beginning with the tertiary pages, iteratively applying the new aspects of the brand as decisions were finalized, & then finally applying layout & content updates to key pages in the final weeks before launch. This was a somewhat risky plan that relied on a lot of things to go right in the final sprint, but the new site ended up launching on time without a hitch.

While there was some duplicated effort in the iterative approach, it was more than made up for in how much work was able to be accomplished in the final weeks. It also meant a lot of QA could be done at key intervals, so the client had a week before launch to finalize content.

Structuring the build in this way allowed the internal design team to see the basic brand elements applied in real-time across the full range of page layouts, & a Figma artboard with work-in-progress screenshots from the Webflow build helped to inform the final decisions on brand application & key page re-designs. For the vast majority of pages, Virta's internal team never touched the designs. Design styles were simply inherited from the primary pages, & feedback provided asynchronously from stakeholders was incorporated iteratively.
‍

Preserving 3 years of integrations & optimizations

Since launching the original site, Virta had implemented a number of third party services & accessibility optimizations. This meant that a requirement of the rebuild was the preservation of these features. This was accomplished by copying & pasting each section from the old project to the new one, then removing all styling & replacing them with classes from our framework. This meant more up front work, but preserving the IDs on sections & CTAs & the structure of certain interactive elements freed us from having to do this during the final sprint, when this would typically be done. Additionally, special attention was paid to focus states across the site to improve accessibility.
‍

Implementing the Current

Part of the brand refresh included a signature wave called the Current, used as a section divider. We needed a modular solution for implementing it without throwing off padding consistency between sections. This meant creating a number of reusable Webflow components for variations of the wave, embedding SVG code & replacing the wave's foreground color with currentColor so that it would inherit the text color of its parent div. We could then apply a number of utility classes to the parent div--text color, background color, & various transform classes to flip or rotate the wave--to achieve all of the desired implementations. This was then placed that in a wrapper that was 1 pixel tall, which centered the wave vertically between various sections without noticeably offsetting the spacing between sections. Subclasses could then be used to align the wave to the top or bottom of a given section, with standard padding classes being used to offset the wave if it needed to appear behind a section's content. The Section element was then z-indexed to guarantee that all content would display on top of the wave. In the end, we had a very flexible system that could be dropped in between sections & customized with a few classes to fit any need of the design system.

‍

‍

‍

‍

‍

‍

The framework

Virta's internal design team is very active in their Webflow workspace. Not only are they updating & adding pages to the main site, they're also creating standalone projects for events like their Beyond Telemedicine & Moonshots For Health conferences. This meant that the website redesign had to function not only as a self-contained marketing site, but also as a design system that can be duplicated, tailored to these conferences' respective brands, & then built upon. The Knockout framework provided the perfect base for this type of extendability, as the utility class approach allows the custom components to work seamlessly across different builds & the styleguide allows for quick tailoring of a new project's fonts, colors, & styles without losing the broader look & feel of the parent brand.

The framework also allowed for quick & easy iteration on things like fonts, colors, & button styles, which were constantly evolving in the early months of the project.

‍

Modular components

[waves]

‍

SEO stuff

‍

‍

‍

[timeline chart]

The key to making this project work was flexibility on the part of everyone involved. The plan was to essentially build the site in reverse order, starting with utility pages like the Privacy Policy & Terms of Service. We began by copying the Version 1 (live) pages into the Version 2 build & rebuilding them on the Knockout framework. Then, as decisions were made for the new brand, styles like colors, type, & buttons could be applied at the framework level & would cascade automatically to all the pages built. Separating the page construction & the style application into two parallel streams allowed us to not only move ahead very quickly, but also to get a real-time understanding of which styles worked & which didn't across a variety of pages. By the time the brand language was finalized & Virta's internal design team began formally re-designing the site's main pages, more than 50 secondary & tertiary pages had been built & styled in the new language.

[screenshot of process pages]

It was important that content be copied & pasted directly in from the Version 1 build so as not to lose things like IDs on buttons that were critical to analytics or section IDs that provided accessibility functions. So while each page was completely rebuilt in the new style, no existing functionality was lost. But the goal was just to keep these features but to improve upon them where we could. So this meant things like considering the appearance of target styles as a part of the page build process.

[accessibility image]

Additionally, we took the opportunity to refine the site wherever we could. This meant things like separating Press Releases & Customer Testimonials out of the blog & into their own collections for SEO purposes, adding in breadcrumbs to the blog pages, & equipping font features like tabular numbers to optimize data display across the site.

[final design image]

The final phase of the project looked more like a traditional workflow: the internal design team would deliver new comps, I'd build the pages & also apply any design updates to shared components across secondary & tertiary pages. This meant a number of features had to be built out, including an expanded dropdown nav & modular support for their Current system of wave graphics used across the site.

[nav shot]

[[[[[[[[[Paragraph about the nav]]]]]]]]]

[comp w/ currents]

By importing the SVG code directly into Embed elements within Webflow, we were able to create a system of reusable components that could be colorized & rotated to fit different uses & also optimized to display properly across different browsers. (Safari is notorious for SVG display.) This meant that every use of the current across the site could be addressed with one of six reusable components.

[current tech image]

For use as a section divider, the colors are defined with background & text color classes. They don't actually take up in space, by default they extend 50% above the dividing line & 50% below. And the z-index of the Section of those respective makes sure the content always displays on top of the Current. But modifier classes will pin the current 100% above or below the divider line, & padding can be added to additionally offset it. The result is a system that's highly functional & tough to misuse.

[[[[[[[closing]]]]]]]