Overview
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
Date
Jan - April 2022
Problem
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.
Challenge
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.
Exploration
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.
Colours
With purple as Pairplay’s primary color, we arranged the neutrals and supporting colors of the application.
Typeface
We chose Poppins as the main style. The following are the font styles that compose the headlines and body texts.
Icons
We designed the icons with according to the golden ratio. Two options are provided: 16px and 18px.
Buttons
For the buttons, there are two versions: Large and small. The following shows the active status and disabled status.
Components
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.
Results
Clear Design Systems and handovers result in less both back and forth between designers and developers, and reduced friction.
More projects
PetFam Case Study, 2022
OPIN, UX Design Graduate Show, 2022