SideQuest Master: Design A Skill-sharing Application Design
Mobile App / Product Design /Design System
SideQuest Master is a mobile app startup project that aims to enhance people’s real-life experiences through skill-sharing and mutual helping. The platform abandons a monetary transaction by adopting a token system to encourage mutual help.
Timeline:
2024.05-2025.04
Team:
2 backend developers, 1 frontend developers, 2 data engineers and 1 designer
Role:
Product Designer
Responsibilities:
Product Define, User Flow, Design System, Interface Design, User Experience Design, Prototyping
Design Outcomes
1. MVP User Flow
2. SQM Design System
3. 62 Pages Hi-fi Interface Design
Accepting a real-life side quest
Observations from games
SideQuest originates from gaming terminology, which is task not deciding the main storyline but upon completion it will benefit the character. Inspired by players accepting sidequest in the video games. SideQuest Master wants to mitigate this behavior in real life to enhance people’s life experiences .
Objectives:
The project was initiated in March 2024 and our goal is to develop an MVP prototype by the end of 2025.
From 0 to 1: Design from scratch
Design Challenge 1 : Product Definition
Design solutions are largely affected by product's goals and objectives. Before stepping into actually product design, I worked with product owner to further define the product from a user perspective.
Design Challenge 2: Design Infrastructure
A cohesive and versatile design system is needed to accelerate front-end development and product design. We customized the SQM Design System based on the Nucleus UI.
Define from a user perspective
Helping and sharing
Through a series of research, we found many studies suggested people’s willingness of sharing and helping. This provides the base theory framework of the product.
Starting from the university & college community
University and college communities have consistent needs for sharing-based tasks. Moreover, the relatively close-knit relationships within these communities help foster trust and boost engagement.
User Flow & Product Feature
Based on the persona and their needs, we sketched the idea journey of sharing their skills on defined the essential features of the product.
Select a versetile design system
Needs of a new design system
We used the Material Design System at the beginning. However, as the project continued, we found more problems and a versatile design system was needed.
Problem 1:
Flat Color Theme
Putting accessibility ahead, the color theme generated by its algorithm is flat and boring. As a 2C product, we perceive a strong branding interface and a game-experienced vibe.
Problem 2:
Complicated Design Token
The Material Design Kit incorporates several modes for diverse usage, however, resulting in a complicated token system with a huge file size
Problem 3:
Low Information Density
Due to its minimalism philosophy, Material Design features ample padding, resulting in low information density.
Problem 4:
Limited Component Preset
Only basic styles and preset components are included in the Material Design Kit. Since we developed it from scratch, we would love to have more mobile-based components preset so we don't have to reinvent the wheel.
Design System Research
As we use React Native as the front-end framework, we tried Tamagui for one sprint but later abandoned it due to incompatibility. Finally, Nucleus UI was selected as the basis of the SQM Design System.
SQM Theme Customization
Inspired by video and board games, SQM selected bronze as the brand accent.
Since the bronze color looks similar to the original warning color theme, we shifted the warning and error colors counterclockwise to distinguish them from the brand theme
Migration
With the new design system implementation, we can highly customize the theme and color through styles and tokens, making the adjustment process easier. Adding those token into the CSS config file, developer could easily find the target color and styles which enhanced the communication
Thank you!