GCash Design System
Overview
Scaling up a style library into a full-fledged modular design system to keep up with the increasing number of app features.
My Contribution
Product Research UX/UI Design
The Team
1 x Product Manager 5 x UX Designers 2 x Software Engineers 1 x Tester
The Company
GCash
Process
Scaling up the design style guide
GCash has been the leading the charge when it comes to financial technology and making it more easily available to the public. Yet back in 2018, its interface was not yet at the level we needed. There were more features being planned, and the UX team needed to evolve the style guide into a standardized, modular design system in order to support the growing number of new products and features. It also needed to communicate that GCash was an accessible and easy-to-use financial service, open to everyone.
I was one of the key designers who developed the modular design system, and created the usage guidelines for both designers and developers.
What I did
- Research best practices
- Prototyping
- Visual development
- Interaction design
- Documentation of specifications
- Creation of guidelines
Our Design Process
Step 1: Identify the goals
First, we had to agree on the overall goal of the design system revamp. What did we want to achieve with the revamp? What stage of maturity was our current system and what stage did we need it to be?
In our case, we needed to:
- Standardize common elements. There were some inconsistencies with design elements because each designer would use colors and elements differently.
- Have a common point of reference with the designers and developers. We wanted to make sure that when one designer talks talks about a "success page", everyone knows which page they're referring to.
- Create a toolbox of reusable components to speed up the workflow.
Step 2: Do a design audit
First, my team identified what we had to work with. My team did an extensive audit of all existing components that were being used.
Buttons, form fields, icons, fonts, colors, states – we took inventory of all these and how they were used. Inconsistencies in implementation were noted and documented.
Step 3: Design the foundations
My team conducted design workshops with the branding team to create the visual design language that would be the foundation of the design system. We followed the atomic design methodology.
Color
The branding team created an extensive color palette and style guide for the rebrand. However, our team tested them on actual UI elements and tweaked the colors to improve readability and contrast.
Typography
GCash uses two main fonts: Poppins and Karla. Though the branding style guide uses Karla as the secondary font, we found that Karla was more readable at smaller sizes. Hence, most text in the GCash app uses Karla as the main font, with Poppins reserved for large headers.
Even when there is a style guide provided, usability and readability should not be sacrificed.
Iconography
Icons represented many features and actions in the app. So we created a hierarchy for icon complexity. Small micro-actions had simpler designs, while app features and use cases had more complex design elements.
I helped create guidelines for the icons and illustrations.
Step 4: Build the components library
Once we had the foundations in place, we created components, which combine different elements together.
Over the course of several months, every form, button, and popup went through countless iterations and debates. We put in many hours of research on best practices. We also designed the components keeping in mind how they would look in different states – default, active, error, disabled, etc.
Step 5: Document the guidelines
Creating guidelines on how to use the components is an important step to ensure consistency. Without that, each UX designer might use a component differently. It's what separates a UI library from a design system.
I led the team in writing and editing the guidelines and specifications with the help of our tech team. We share it with the tech team and use it as a common point of reference when discussing features.
Results
The design system quickly became a core part of the workflow. UX designers use it every day to create interaction flows, while developers reference it during development.
The design system also created a shared language between designer and developer. When I talk about a Primary Button with a background color of B400, the developer knows exactly what component and shade of blue I am referring to.