Lúmen Design System
Evolution of Neon's UI Style guide to their first Design System.
Company
Neon Pagamentos
Year
2019
Role
Product Designer
Context
Neon Pagamentos, a leading Brazilian fintech, operates as a digital bank aiming to serve Brazil's unbanked population. Established in 2016, they provide diverse financial services, including digital checking accounts, credit cards, loans, and investments.
While their mission was robust, internally, the design team struggled with inconsistent UI libraries in two different tools, Sketch and Adobe XD. Solving this issue became a side job for me as a Product Designer, given my previous experience at Banco Pan. It also led me to become the Design Lead responsible for the Design System team.
OBJECTIVES & GOALS
Specify the best design tool for our context and plan the migration of the entire team.
Provide clear and concise guidelines for the engineering team on component development.
Reconcile disparate UI libraries to ensure a scalable design system for all the company's brands.
The process
The journey began with a meticulous component inventory.
We evaluated the 53 components in our UI Kit to eliminate inconsistencies between our libraries. This activity also helped to define the classification between global and local components.
To ensure all voices were heard, I organized an in-depth interview to understand their preferences about the Design Tool and a card-sorting session involving designers and engineers, measuring their clustering methods for components.
Finally, The research culminated with benchmarking, collecting insights from industry best practices.
MAIN CHALLENGES
Ensuring the design system is adaptable and scalable for all company brands.
Getting a consensus to choose a unified design tool, preventing future discrepancies.
Lack of a structured guideline left the engineering team directionless in component development.
Two different UI libraries and design tools are used simultaneously, creating confusion and inconsistency.
The team delivery
Inspired by Brian Frost's atomic design principle, we revamped our foundations, incorporating design tokens and themes. This approach brought cohesiveness and paved the way for the design system's applicability across our different brands. The new hierarchy embraced global Tokens, Base components, and Contextual Libraries.
We decided to simplify our design process using a single tool instead of multiple ones. After conducting a competitive analysis, we opted for Figma and planned the migration in several phases. To assist the designers, we created guidelines and conducted training sessions. This decision has helped to eliminate any confusion caused by using multiple tools in the past.
IMPACT & RESULTS
Increase in the perception of the usability of the Design System
We updated the library and improved documentation to make component usage easier for designers and engineers. Our CES score showed an increase in designer's perception of personalization and accessibility.