Virta Health, an award-winning health care start-up based in San Francisco, approached me for an update to their Webflow website. The existing site had served them well for several years, but with a brand update on the horizon, they sought a refreshed online presence.

The primary objectives were to modernize the site, building on a newer Webflow framework that takes advantage of newer Webflow features, & to apply the new design language across the site. Initially this was to be a phased approach, launching with 10-15 new pages and updating the rest of the 70+ unique pages & templates post-launch. But maintaining two design systems in the same build or tying two builds together with a reverse proxy each presented unique challenges. In the end we decided the best approach would be to launch with a full site rebuild.

The problem was that this was in January & the branding wouldn't be finalized until early April, pushing key page redesigns back to early May. And the site needed to launch the first week of June. Clearly this would require some creative project planning.

To hit the site deadline, we decided to do the project in reverse, starting 4 months early. This meant rebuilding all of the pages in Knockout, beginning with the tertiary pages, & iteratively applying new aspects of the brand language as decisions were finalized, tackling the redesigned primary pages last. This was a somewhat risky plan that relied on a lot of things to go right in the final sprint, but it proved to be right approach & the new site launched on time & without a hitch.

Having laid the foundation with the new framework & design system, the final phase was simply applying facelifts to key pages. And since QA was done at various project intervals, the client ended up with the final week before launch to finalize content.

The benefit of this unorthodox approach was that as new branding decisions were made, the internal design team could witness the basic brand elements applied in real-time across the full range of page layouts. First was type styles & colors, then button styles & image treatments, & so on. A Figma file of screenshots documenting the in-progress pages allowed stakeholders to provide asynchronous feedback during the iteration process & ultimately the internal design team never had to touch the vast majority of pages.

‍

Applying the Current

One major component of the new brand language was a wave shape called the Current, which would be used as a divider & image mask throughout the new site. So a big part of the project was figuring out a novel way to implement this motif modularly.

The solution here was to decouple the styling from the shape. So a series of shapes were created as embedded SVGs, along with a suite of classes that determined background & foreground color & transform properties like rotation & flipping, allowing the shapes to adapt any need. By default, the shape is centered between each content section in a 1px tall div so as not to disrupt the spacing of content. But modifying classes can also align the shape to the top or bottom of a section as needed. Ultimately, this provided a seamless, reusable, responsive, drop-in solution that didn't interfere with or require any modifications to the content around it.

‍

Preserving years of integrations & optimizations

To maintain third-party services and accessibility optimizations, meticulous copying, pasting, & restyling of each section from the old project to the new one was undertaken, ensuring a smooth transition with minimal disruption to existing campaigns & analytics. In addition to capturing existing accessibility optimizations, more were made including the adoption of an accessibility-optimized version of Slick Slider. After launch we went back & did a second pass at accessibility, rebuilding components like modals to optimize for keyboard focus.

Organization

The rebuild offered a perfect opportunity to apply a structured organizational approach to a project that had--as sites tend to do over time--grown somewhat unwieldy. This meant creating workspace-level folders to organize archived & testing projects away from the live builds, as well as a series of emojis added to project & page names to indicate production & test projects, global & page-specific components, live, in-development, & deprecated pages, & data & template collections. This was also an opportunity to deprecate pages & projects that were no longer in use. And ultimately this led to a far more navigable build for team members.

‍

Animation

As a part of the re-design, the site required a number of interactive components & animations. It was important that these be intentional, prompting the user to engage with the content, rather than distracting them from it. So three categories of animation were implemented: interactive components that make navigation more intuitive, animated numbers that emphasize data, & animated illustrations that convey broad themes about the service, like the medicine bottle animation below.

The end result is a site that's delightful, but not distracting. One of my favorite animated features is the nav underline (designed by the internal design team) that follows the user's clicks.

At the beginning of the project, it seemed like a herculean lift. But the launch went off on time without a hitch, with less than a minute of down time & no hit to SEO rankings.