Client
MyID
Role
UX Designer
TImeline
8 weeks
tools
Figma
Summary
When I started this project, I had just joined Myanmar’s biggest telecom operator to work with the team responsible for the country’s most popular mobile self-care superapp. Prior to this project, the team lacked a pratical design system in their Figma library.
This was contributing to UI inconsistencies across the product ecosystem, slow product cycles, and miscommunication during the handover stage between design and development teams. As the team’s first official UX designer, I took this opportunity to create a unified design language that would set my team up for success.
Throughout this project, I carried out in-depth interviews with stakeholders to understand the team’s unique needs and existing workflows. I also conducted extensive research into the design system methodologies and took inspiration from other established organizations.
After rounds of testing and iterating, I onboarded my team onto the new Figma design system. The new design system expedited the prototyping stage and improved the efficiency of the handover process, ultimately leading to faster product cycles.
Design System Figma Walkthrough
Opportunity
Upon joining the team, I learned that one of the biggest obstacles affecting productivity was slow product cycles. I got to witness firsthand the persistent challenges the team was facing during design and handover stages due to the lack of an adequate design system.
As the team's first UX Designer, I took this opportunity on as my first main tasks. I hypothesized that if the team utilized Figma libraries to employ a design system, this is improve the pace of product cycles.
GOALs
Improve productivity
Accelerate product cycles
Actions
Meet the users
To get an idea of the state of the existing situation, I interviewed the product owners, software development team, and the previous designer who will continue to provide UI design support when necessary.
I asked these to share any prior experience they had with design systems, who all would be using the new system, and how each person would be using the new system.
Users' roles in a typical project
Users' duties during a typical project
current system
I learned that since the launch of the product five years ago, the team had been using a PDF document as their design system. The document contained simple guides for typography and color styles.
Previous design system (blurred)
From speaking with the team and trying to use this system myself, I learned that the main pain points of this system were:
No central location to house this document
Inconsistencies in the UI design
Long prototype stages
Inefficiencies during handover
Miscommunication between design and development teams
Inspiration & strategy
Next, I studied design systems from Google, Apple, IBM, and Atlassian to learn how the world’s top corporations organized their systems. However, even I, who was supposed to have the most UX expertise in my team, was overwhelmed by the extensiveness of these vast systems. Based on my research and interviews, I decided our team would benefit most from:
A lean design system containing the essential building blocks of the app that the team could expand gradually.
The system would have to accommodate even those with limited Figma library experience, so that current and future team members can easily pick up.
Reverse atomic design
Brad Frost describes design Atomic Design, design elements are broken down into five hierarchical levels where the components in each level are the building blocks of the next level.
To create a design system using this framework, one starts with the smallest elements and building the larger parts using the smaller elements until the complete output is achieved.
This project was unique in that I had the complete pages, but was missing the building blocks that made up the app. My strategy was to reverse engineer the design system starting with screenshots of the pages and any existing Figma files.
Reverse engineering Atomic Design methodology to Home page
After employing the reverse engineering process for all pages of both iOS and Android versions the app, I organized the components in separate pages and reusable libraries in Figma.
Styles page
In the styles page, I defined guides for typography, color styles, elevations, and spacing and layout grids.
Styles page
pages page
Next, I created replicas and templates of primary and secondary pages.
Pages page
templates page
Then, I created components for all the sections, modules, modals, menus, pop ups, etc.
Templates page
Assets page
Then, I built the component libraries for icons and buttons.
Assets page
Final Iteration
After testing the initial iterations with stakeholders, I learned that my team would benefit a reference guide for navigating the Figma file as well as utilizing the libraries in their workflow. In the final iteration, I added a user guide page as well for easy onboarding and quick reference.
User Guide Page
The final result is a design system that facilitated rapid prototyping and efficient handovers that seamlessly integrated with the team's existing workflow.
Impacts
The design team has been able to cut the time it takes to prototype by half.
There has also been a reduction in communication gaps between design and development teams during handover, resulting in accurate implementation of designs.
The new design system has also helped ensure the consistency of our digital products significantly improved.
As a result, our team has experienced improved productivity and faster product development cycles.
