*This case study focuses on design systems. To review my complete UX design process, please view the Sparkler & Facebook Tutorials case study.
LingoAce: Design System
Virtual Chinese language learning classes for ages 3-15
Responsibilities
Design System
Background
When I joined the LingoAce US team, I was the team's first in-house product designer. As the US team ramped up, we saw the need for a design system. The team consisted of the Director of Product and myself.
Online Language Learning
Earning the title of Fast Company's 5th Most Innovative Company in the Asia-Pacific region for 2023, LingoAce excels at online language learning. After much success in Singapore, a small US team was created to launch LingoAce in the North American market.
Joining a startup within a startup
Project Challenge:
Create a new design system
Identifying the need for a design system
I joined LingoAce as the US team's first in-house designer. As the US team ramped up, ownership of the LingoAce Connect mobile app was transferred to us. The LingoAce Connect app is a tool for parents to track student progress, payment and book classes.
We decided to create a design system to make future design work faster, to ensure consistency and so it's easier for engineers to implement.
Auditing the existing product
To begin, I audited the existing app paying special attention to the existing booking flow. I uncovered some areas of concern that I wanted to tackle and test with users.
Evaluating competitive product
Next, I reviewed competitive products to discover how other companies approach the same or similar problems.
Designing feature screens
After a couple rounds of usability testing, and collaboration with the team, we settled on the final design.
*This case study focuses on design systems. To see my complete design process, please view the Sparkler & Facebook Tutorials case study.
Base elements & components
Brand decisions across the ecosystem
One complexity of the project was the concurrent development of the marketing website. This project was being designed by an outsource design agency and had a more professional style than our existing products. One of the decisions we made to better align the two was to adjust our base element button style from a pill to a rounded corner.
Building components
Each of these components have been diligently designed and constructed. The base elements and components can be copy and pasted into design files and configured directly within the files.
Choosing base element styles
Buttons are base elements that can be directly added to screens or integrated into components. In the demonstration here, I am changing the button styles on the confirmation screen by adjusting the variable values.
Defining component variables
The calendar component is the most complex component in the design. It features 8 base date states that can be independently changed per component per screen that uses the calendar.
Prototyping with components
Components can have prototype behaviors too. Connecting the component as a prototype in the design system saved an extra 3 screens in my final design file. Additionally, this functionality will automatically apply for any future screens that use this component.
Design system styles
Design system tokens
Tokens enable designers to pinpoint exactly which element's style should change. For example, a slider switch might normally be purple but needs to change. Instead of having to change all purple elements, just that token needs to change.
Spacing
The spacing and layout system is standard. The component spacing system uses a 4px scale and layout is 8px. Mobile layout is 4 columns.
Color styles
Intended primarily for kids, LingoAce already has strong brand color styles. The colors were integrated into the new design system.
Typography & Iconography
Besides the marketing pages, LingoAce uses a single rounded font. I have selected appropriate sizes and weights depending on the intented use.
For icon's we used material.
