Xapo Bank Design System

Restructuring of a design system while supporting UI and tech migration

Role

Design System Owner

Deliverables

Design system + Documentation

Design Ops: Ways of working

Technologies

Android

iOS

Showcase of design system component modules

Problem statement

The succession of several rebrands and UI iterations in a short period of time left the company with a chaotic UI kit and paused on dev’s implementation of the components library. When taking ownership of the project the idea was to turn the design library into a real Design System, adapting it to a the new brand guidelines at the same time as the tech team was starting to build the components library while migrating to a new technology. I had to help reshape and restructure the entire System and organize ways of working between design and dev to start building a successful product.

Design ops: Set up of meetings, agreements systems, design assessments and ways of working across SATs.

Documentation: Figma as a source of truth with links to jira tasks. All new documentation to learn how to read and use the DS.

Components + tokens: Audit of components and token system. Migration of UI to the new brand. Alignment and feasibility assessments with development team.

Branding: General uplift of the brand. Iteration to be digitally native and help comply with product needs.

Knowledge base: Enrich design system to facilitate async learning and onboarding.

Still the Design System is a living organism within the Company structure that is always in constant evolution.

phone mockups

Execution

Design ops:

When designing Xapo Bank design system, defining ceremonies and ways of working was crucial to align expectations across de company and planning work accordingly. Things were rapidly changing and a lot of agreements were done, so we needed a way to track those and document accordingly.

I wrote a readme to help new users land the design system with a proper overview that covered the basics (patterns, standards, how to’s…). I modified our confluence pages to properly track the agreements made on the design-dev alignment meetings.

Alongside the team we set up assessments to review before, during and after coding.

I defined the ways of working between SAT’s/squads and DS team, including the documentation of how to request new components and communicate SAT’s needs. To facilitate onboarding for new designers and to promote continuous learning about the DS in an asynchronous way, I enabled a new set of video tutorials nested in the design system.

Schema of ways of working with the Design System

The System of the Design System:

In the beginning, the system was a mismatch of a lot of different components with duplicated functionality, complex builds. Components were not reviewed by devs and did not comply with standards. I had to review the entire system and tokens to try and simplify.

The challenge was understanding the cost of migrating technologies and design at the same time the components library was being developed on tech-side.

Working under the dogma of keeping it simple I did an exercise to reduce everything to its basics and start building from there. I cleaned the entire system by removing duplications and focusing the effort solely on what was needed and so reducing tech debt. Alongside devs we changed the architecture and naming of components to align design and development.

I reshaped the entire Xapo Bank Design System formally and visually and added all new documentation pages for both design and dev.

Showcase of design system documentation modules

Designers work mechanically and generally in a hurry. This often causes distance errors between the elements that make up the design. That is why I ideated and developed a system to avoid common errors that occur during the process. This system allows the designer the flexibility to compose freely while automatically respecting vertical and horizontal distances.

The designer only has to center the components on the screens and stack them with each other. The components are all configured to respect distances between them and ensure a consistent hierarchy and speed up the process for the design system users.

Gif of building with slots

Navigation:

We had no navigation patterns defined so I sat down with developers to structure and define the entire navigation of the app to assure consistent patterns that also applied to both Android and iOS.

App navigation analysis

Typography:

After doing some crash tests and assuring the font worked well on digital, I introduced the new font chosen by the brand team, that aligned better with our value propositions. Metric 2 became our main font to be used on the product and Inter to be used on collaterals when the primary font is not available.

Font example

Color & tokens:

In an exercise to comply with brand and introduce back color into the UI, I conducted a thorough user testing with more than 100 users to validate assumptions and test accessibility. This was crucial to the current look and feel of Xapo Bank design system.

Main UI colors
Gray scale
secondary UI colors

I reviewed the entire token library which was at an early stage. We had 21 of the 22 components at the time tokenized. The number of tokens was 249.

I did a big exercise on both modifying the naming system and developing a new system to help simplify and improve efficiency when scaling the Design System.

Our library now has 37 usable components. The token library was reduced from 249 to 70 tokens. That is a simplification of 71,89% even with the increase in components.

Token system example

Icons and illustrations:

At Xapo Bank we use a set of custom icons and illustrations that we build on according to our needs. We are a fast-paced industry with a very specific focus where changes happen constantly and we need to have the capacity to adapt quickly.

icons showcase

End result

Establish powerful brand:

Brand and product speak the same language being digitally native.

 

Error proved System:

Introduction of elements that simplifies the building process on design side to avoid distance errors.

Adition of tutorials repo to support written documentation as a way to ensure better learning on the DS usage and overall design tricks.

 

Benefits for the business:

Crucial to remaining nimble when conducting rebrands, and it sets the basics for consistent patterns across the UI. Participation in meetings and ceremonies to help shape a brand to fit both marketing and product teams.

Speeding up design and development work.

Assure consistency across products.

Showcase of design system component modules

This project inspired some articles you can find below:

Error handling
Prototyping with Design Systems