I joined Varo in March of 2022 to lead the Design Systems effort, Varo Experience Language, or VXL.

Initially joining as a Principal-level IC, my role expanded to leading a small squad of 2 designers and 1 engineer, as well as project managing the development efforts with a squad of platform devs on Android, iOS and Web.

Challenge: Deliver new Brand Direction to the Product

When I joined Varo, the company was coming out of the agency stage of a full rebrand known internally as Make A Statement, or “MAS”, and was working through how to launch the new brand direction across all of Varo’s properties. Design Systems would be the way we brought the rebrand to life in the product, after an extensive period of re-tooling & upgrading VXL.

Visual overhaul to the Customer Experience

The previous brand direction, known internally as “Octavia”, which featured several heavy neumorphic style treaments, was launched in a rush and had historically under-performed from a conversion & retention standpoint. We heard from customers that the Look & Feel didn’t resonate with them and that they wouldn’t recommend it to a friend, and that it “looks like something my parents would use”.

Those same users told us that the new look & feel felt fresh, differentiated, and more motivating. They described the look and feel as a place they’d want to spend time and explore.

Though Varo technically had a design system in place before I joined, it had been rushed and was incomplete, with a different amount of componentization across platforms, and varying sources of truth, adding friction and time to system wide changes and maintenance. A different approach was needed.

VXL 3.0: A Fresh Approach

When I joined Varo, the phrase “Octavia” was being used to label both the brand direction and the Design System, and folks were starting to refer to MAS as an entirely new Design System, when in reality we were going to build on what was already in place: Varo Experience Language 2.0.

Brand Agnostic Mental Model

As part of my pitch when evangelizing the work ahead, I used the slide below to help reinforce a platform mental model for the Design System, rather than a brand-based one. Varo had already been through two brand directions before MAS, who’s to say there won’t be another one in the future? VXL, or any design system for that matter, should be able to evolve to support a new brand direction in the future.

A single source of truth

To reduce redundancies, create efficiencies and level up the quality & consistency floor, the VXL squad built a single source of token truth where each style is stored, and a platform native version is generated for each platform team. This means we can make a single change or update, publish, and all platforms get it for free. To do this we built on top of an open source tool called Style Dictionary.

Visual Foundations

Here you can see some samples from our Visual Foundations Styles. The Foundations library includes Color, Type, Spacing, Elevation, Icons, as well as Logos & Illustrations

Color Tokens

Library Structure & Mental Model

We have a core Foundations Library, and a supporting “Expressive Library” both feeding into the component library. The rationale for breaking out the Expressive Library is that those styles should be used sparingly and typically only in component construction, not deployed on a one-off basis into the experience.

System Banner

We Updated our System Banner components to be more inline with the MAS brand direction & look/feel, and deployed them across the apps.

Inline Alert

We Updated our Inline Alert components to be more inline with the MAS brand direction & look/feel, and deployed them across the apps.

Transaction List Item

Before I joined, Varo had shipped unique one-off transaction list items for each surface across the experience. When it came time to migrate to MAS, we took the opportunity to unify them into one new flexible component.

Migrating to MAS

In fall of 2022, I proposed a migration plan to leadership due to the looming launch of our new MAS Signup Application. This plan was adopted, and I led the execution of the migration, involving 20+ developers over several sprints

Business Impact

In addition to all of the efficiencies of having a more robustly crafted Design system, the impact of Migrating our look / feel to MAS in the app has resulted in excellent app store ratings and lots of positive customer feedback about our investments in the experience.

What’s next?

Right now the team is working on an update we’re calling MAS+, to breathe more brand life into the app, and give customers a richer visual experience.

Scaffolding & Outreach

Not pictured is everything done to facilitate the rollout of the new design system: slack help channels, office hours, a Confluence documentation site, our Design-run Jira project, and the roadshow decks used to get exec resourcing buy-in as well as educate the engineering org about systems. Drop me a line if you’d like to know more!