top of page
*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
Design System
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.

Screen Shot 2023-11-01 at 1.50.35 PM.png
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.

Frame 13.png
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.
Frame 617.png
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.

Frame 2142.png
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.

Screen Shot 2023-11-01 at 2.59.16 PM.png
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.

Screen Shot 2023-10-31 at 12.20.26 PM.png
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.

Screen Shot 2023-10-31 at 12.30.28 PM.png
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.


The spacing and layout system is standard. The component spacing system uses a 4px scale and layout is 8px. Mobile layout is 4 columns.

Frame 2135.png
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.

Communication 1.png
bottom of page