Varo design language
Design Systems, Project Management, UX/UI, Visual Design
Company: Varo Bank
Duration: 2 years (2019 – 2021)
Role: Senior product designer
Varo Bank is the first all-digital bank to receive a national bank charter from the OCC, with the goal of creating a bank for all of us. I joined Varo when they were building their bank-chartered app and entering hyper-growth, giving me the opportunity to build out and improve our design system.
Opportunity
When I first joined, the developers and designers were already working with components, using Material Design for our Android & Web apps and Human Interface Guidelines for our iOS app. However, the designers would hand off specs using the UI kit, but whether developers reused components or even used the proper components was unclear.
Without any guidance or ownership, there were divergences within specs from the foundation and component libraries, and what was being built didn't match what was being designed (and vice versa).
Taking on the design systems initiative at Varo, I focused on formalizing our design system to support our product designers and developers.
Impact
Leading Varo’s design systems initiative by formalizing our practice and culture of systems thinking has benefitted our teams in multiple ways:
Stronger foundations: introducing design tokens to Varo has significantly decreased the number of inconsistent styles used and has created a clear way to add or update to our foundations.
Extensible, robust components: informing component updates based on our product roadmap has highlighted the value of investing in flexible components, now numbering at 180 components with 23k inserts in Figma.
Increased collaboration: silos between teams have been broken down through design systems, enabling consumers to not only start dialogues on improvements but act on those in a tangible way.
Efficient, quality product deliveries: leveraging reusable foundations and components has accelerated designers’ ability to iterate and deliver designs.
Defined processes: teams have become more accustomed to leveraging the design system in their process, which has resulted in design systems representation at project kick-offs.
Building bridges
My contributions to the design system started with understanding what issues affected our teams the most, and leading focused initiatives based on that.
Pilot projects
I conducted app audits for each of the platforms so that I could partner with designers and developers to reuse design system styles and components and better align our design libraries with code repositories.
Working in this way allowed me to incrementally improve our design system by identifying component and pattern updates within product releases, which ensured that updates always led back to providing customer value.
Design libraries
I helped lead our design tooling migration from Sketch to Figma, also taking this opportunity to improve how our foundation and component design libraries were set up.
By leveraging Figma’s capabilities and reorganizing our library structure, designers and developers across were able to more easily access components. This was also all done while ensuring product timelines were unaffected by the migration.
Documentation
Another way I improved our design operations was by creating templates for our design specs. This created a consistent way for designers to set up their files, and external stakeholders could more easily find designs.
A major component of these file templates was introducing documentation contribution guidelines and templates. This provided a space to collaborate on new components and educate designers on the process for introducing new components.
Collaborative spaces
One of the most valuable initiatives was establishing a weekly design systems “brown bag” to discuss, collaborate, and gather feedback with system consumers. Designers and developers alike were encouraged and enabled to bring up issues with the design system and also contribute to improvements they wanted to see.
Design tokens: getting to “a bank for all of us”
A major test of our design systems collaboration, culture, and process was when we received a directive from leadership to redesign our apps to consume an updated brand identity. The redesign launch coincided with our bank-charted app release, meaning we had to support the redesign on top of designing the remaining bank products.
Fortunately, leading up to this redesign we had already been working on improving our foundations with design tokens. This proved to be a pivotal part of the app redesign. All the rigorous app audits, stress testing, and token structure workshops resulted in a much simpler task of mapping the updated brand style guide to our design tokens.
Once we completed mapping new values to our design tokens, all that remained was to educate the designers and developers on how this impacted our components and layouts. I addressed this by updating our documentation and templates.
Taking a leap and implementing design tokens accelerated our design updates, even providing us the opportunity to tackle design debt.
Takeaways
A design system is never ‘done’ or ‘delivered.’ Working on design systems is a constant journey to improve how teams build products and ultimately provide value to customers.
Continuously improve: the main goal for the design systems team is to support its consumers to provide customer value. Find opportunities based on customer needs, and the design system will incrementally grow.
Creating design systems is creating products: successful design systems aren’t created in isolation. The relationship between design systems and product design is symbiotic; their success is contingent on each other.
Focus on the people: There may be different business goals or product roadmaps that take the organization on different turns, but regardless a design system is all about the people and needs to be able to support its consumers.