Site logo

Sam Cook

← Back to Work

Design Systems · Varo Bank · 2021 – 2022

Varo Experience Language

I joined Varo in March of 2022 to lead the Design Systems effort, Varo Experience Language, or VXL. Initially serving as a Principal-level individual contributor, the role expanded to managing a small squad comprising 2 designers and 1 engineer, plus overseeing platform development efforts across Android, iOS, and Web.

The Challenge: Deliver a 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.”

Make A Statement brand direction, Q1 2022 “Make a Statement” brand direction, Q1 2022

The previous “Octavia” brand direction featured neumorphic styling and underperformed in conversion and retention metrics. Customer feedback indicated the design felt outdated, with one noting it “looks like something my parents would use.”

The Octavia customer experience The “Octavia” Customer Experience

Conversely, users found the new direction fresh, differentiated, and motivating—describing it as a space inviting exploration.

The MAS or Make A Statement customer experience The MAS or “Make A Statement” Customer Experience

The System Challenge

Despite having a design system, it lacked complete componentization, featured inconsistent platform approaches, and had multiple competing sources of truth.

Platforms diagram

The VXL 3.0 Approach

Brand Agnostic Mental Model — Rather than anchoring the system to specific brand iterations, the framework prioritizes platform-native thinking, enabling future brand evolution.

Brand agnostic model

Single Source of Truth — 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. The implementation utilized Style Dictionary, an open-source tool enabling centralized updates distributed automatically across platforms.

Token delivery pipeline diagram Token Delivery Pipeline diagram

Visual Foundations — The library encompasses Color, Type, Spacing, Elevation, Icons, Logos, and Illustrations, structured into Core Foundations and an Expressive Library reserved for component construction rather than ad-hoc application.

Color tokens

Type ramp

Library structure

Component Examples

System Banner — Updated components aligned with MAS aesthetics and deployed across applications.

System Banner components

System Banner in-product

Inline Alert — Refreshed components reflecting the MAS direction across mobile and web platforms.

Inline Alert components

Inline Alert in-product, mobile

Inline Alert in-product, web

Transaction List Item — Unified a previously fragmented collection of platform-specific designs into a single, flexible component addressing inconsistencies across user-facing surfaces.

Transaction List Item components Unified component replacing previous iterations

Unified Transaction List Item Old experience inconsistencies across surfaces

Migration Initiative

In autumn 2022, leadership adopted a comprehensive migration strategy necessitating coordination across 20+ developers spanning multiple development cycles.

MAS Migration plan Migration from Octavia to MAS, late 2022

Business Results

The redesign generated strong app store reviews and substantive positive customer commentary regarding experience improvements.

Migration impact

Future Direction

The team is developing “MAS+,” an enhancement phase designed to deepen brand integration and enrich visual presentation, scheduled for early Q3 2023 release.

MAS+ look and feel improvements Visual improvements scheduled for Q3 2023

Supporting the rollout involved creating Slack support channels, scheduling office hours, establishing Confluence documentation, managing Jira workflows, and conducting educational presentations to secure executive resources and engineering participation.