top of page
Frame 1261152469.png


I unified and build upon Pairplay native app design system that gives designers and developers the frameworks they need to create engaging product experiences.

My ​Role

Design System

Design Team

Ella Lee

Ashlee Woo


Jan - April 2022


Since Pairplay lacked any formalized design system, users were experiencing unclear identity on Pairplay. Also, in the process of delivering design units to the developers, it took unnecessary time for communication between designers and developers.


Ensure that once components have been built using base elements from the Design System, the Design System can still be easily understood by any designer or developer that needs to execute it.


We worked with Marketing on Brand and Voice. Therefore, we're able to understand and make some improvements to our brand style guide in the process.  


What should Pairplay feel like?

Suggest a design solution that is more casual

Provide users with an enjoyable experience

Improve user experience with a delightful design

Design Principle

Based on Pairplay's mission and understanding of users' needs, we set our design principles to build colour, typeface, icon, buttons, and components. The design system of Pairplay is based on Atomic design, which served as a guideline to build a more unified design system.


With purple as Pairplay’s primary color, we arranged the neutrals and supporting colors of the application.



We chose Poppins as the main style. The following are the font styles that compose the headlines and body texts.


We designed the icons with according to the golden ratio. Two options are provided: 16px and 18px.


For the buttons, there are two versions: Large and small. The following shows the active status and disabled status.


We arranged the designs of every possible component in the application, which helped increase productivity as I could find the designs I needed from the asset.


Clear Design Systems and handovers result in less both back and forth between designers and developers, and reduced friction.

More projects

petfam cover.png

PetFam Case Study, 2022

OPIN cover.gif

OPIN, UX Design Graduate Show, 2022

bottom of page