santiagomoreno

Zumo

Milestones

Reimagining our Design System

Our design system at Lulo was starting to quickly become more relevant for teams across the organization, which demanded better workflows for the way we were making sure designs were consistent between design and development. Inspired by recent research and deep diving into how design system teams worked in different companies throughout the world I wanted to elevate the systems craft to make it as world-class as possible. For this, I advocated for having dedicated resources to maintain and grow the design system effort in Lulo, successfully gathering a team of developers, product management and myself as a dedicated designer who focused on improving the user experience for designers and developers with the Design System while also improving the usability quality of our products.

I wrote down documentation to get leadership buy-in to invest in dedicated resources so our Design System could both elevate its quality and the performance of the product.
I wrote down documentation to get leadership buy-in to invest in dedicated resources so our Design System could both elevate its quality and the performance of the product.

Meet Zumo

I ran a couple of workshops with design and leadership teams to collectively think about a name for our design system. Zumo stuck. I then went on and quickly designed an identity to replicate in all of the upcoming initiatives related to our Design System at Lulo.

Each quarter I collaborately built the team's OKRs, aiming to connect them directly to the company overall strategy and product teams' objectives to ensure we were actually contributing to reach the orgnization goals.
Each quarter I collaborately built the team's OKRs, aiming to connect them directly to the company overall strategy and product teams' objectives to ensure we were actually contributing to reach the orgnization goals.
Part of the new Design System strategy involved restructuring the way our information was shared across teams.
Part of the new Design System strategy involved restructuring the way our information was shared across teams.

Improving usage and contribution

Through documentation and hands-on walkthroughs and guidelines I encouraged designers and developers in different teams to contribute to the design system with different approaches such as component documentation, bug reporting and fixing component creation and icon design.

Introducing our Component Playground file improved the contribution rate within the design team, from 1 to an average of 5 contributions per designer each quarter.
Introducing our Component Playground file improved the contribution rate within the design team, from 1 to an average of 5 contributions per designer each quarter.
Our iconography guidelines allowed designers to create their own icons without requiring system's team capacity while contributing directly to the library.
Our iconography guidelines allowed designers to create their own icons without requiring system's team capacity while contributing directly to the library.

To enable easier library management for designers across diferent products, the main library file was divided into modular pieces that could be added independently based on whatever project and platform the designer was working on. We now had differnet libraries for Foundations, Core Components, Mobile Components, Internal Utilities, planning to add other specific libraries such as Web Components, ATM Components and additional color themes.

Foundations file allowed to append core elements independently from components to different kind of projects
Foundations file allowed to append core elements independently from components to different kind of projects
I built an onboarding file for all new designers joining the team to quickly grasp how the Design System worked at Lulo.
I built an onboarding file for all new designers joining the team to quickly grasp how the Design System worked at Lulo.

Zumo Advocates

We also launched Zumo Advocates, which awarded contributors a set of points and awards depending on the task they completed. This encouraged people across teams to continously contribute in both design and development teams.

Introducing Design Tokens

One of our biggest milestones was successfully implementing Design Tokens across design and development teams. The greatest challenge was to get this to work on native apps as resources and documentation about that specific use case. With lots of trial and error we managed to happily translate our JSON tokens into their corresponding Swift, Compose, UIKit and XML counterparts.

Documented how our design tokens structure worked, naming conventions and token generation workflow.
Documented how our design tokens structure worked, naming conventions and token generation workflow.
We successfully drove tokens defined in Figma to our native iOS and Android apps.
We successfully drove tokens defined in Figma to our native iOS and Android apps.
Component tokens were used to ensure fast and seamless updates to components without requiring dev capacity.
Component tokens were used to ensure fast and seamless updates to components without requiring dev capacity.

Use Tokens

As tokens started to get implemented and used by designers across different teams, documentation was crucial to ensure correct token usage on the developer side. To make it faster and easier for designers to apply this tokens to their current designs I built Use Tokens. Until now, I've been distributing it through a private beta.

Use tokens reads the design and identifies which tokens match the applied properties so they can be assigned to the layout or component.
Use tokens reads the design and identifies which tokens match the applied properties so they can be assigned to the layout or component.
Whenever a component or layout has tokens applied, Use Tokens allows designers to generate documented specs for developers to read and implement.
Whenever a component or layout has tokens applied, Use Tokens allows designers to generate documented specs for developers to read and implement.

The new docs

Early in the process of elevating the design system quality I quickly developed a docusaurus site to publish component documentation for designers and developers. This tool, although useful, quickly became very limited and uncompatible with our goals. For this reason I spent a couple of months building our own custom documentation site from scratch, ensuring it had all the features we dreamed about.

Since our capacity was limited I built to site parallel to my assigned tasks following our roadmap.
Since our capacity was limited I built to site parallel to my assigned tasks following our roadmap.
The new Zumo site highlighted the new branding and follow the best documentation sites in the systems industry.
The new Zumo site highlighted the new branding and follow the best documentation sites in the systems industry.
Component documentation example
Component documentation example
Added a search module that indexed the site to quickly search for components, patterns or tokens.
Added a search module that indexed the site to quickly search for components, patterns or tokens.
I wanted this to be the go-to place for all people working with Zumo to find what they needed to get up and running.
I wanted this to be the go-to place for all people working with Zumo to find what they needed to get up and running.
Design Token documentation was a must to include in the site. I made sure they were also easily filtered and show the corresponding token name for each platform.
Design Token documentation was a must to include in the site. I made sure they were also easily filtered and show the corresponding token name for each platform.
Specs for components included the corresponding tokens for their property values
Specs for components included the corresponding tokens for their property values
It wouldn't be a real docs site without dark mode.
It wouldn't be a real docs site without dark mode.

The future of Zumo

Before I left Lulo Bank, Zumo was heading to a very good place. Our next goal was to turn all of our design tokens data into a global API callable from anywhere in our product so updates were injected immediatly without the need of users updating their apps to see the most recent changes.