SideQuest Master
SideQuest Master
Develope A Skill-sharing Application from Scratch
Develope A Skill-sharing Application from Scratch
Develope A Skill-sharing Application from Scratch
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.
Category
Product Design
Design System
UI & UX Design
Tools
Figma
React Native
Tailwind CSS
Team
2 backend developers
1 frontend developer
2 data engineers
1 designer
Date
March 2024 -PRESENT
Accepting a real-life side quest
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 .
Accepting a real-life side quest
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 .
Accepting a real-life side quest
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.
Objectives
The project was initiated in March 2024 and our goal is to develop an MVP prototype by the end of 2025.
Objectives
The project was initiated in March 2024 and our goal is to develop an MVP prototype by the end of 2025.
MVP Prototype (March 2025)
Define from a user perspective
PRODUCT DEFINE
When I joined the team, the team only had a rough idea with a lo-fi home page prototype. The challenges that design faced varies from product definition to design system construction
Define from a user perspective
When I joined the team, the team only had a rough idea with a lo-fi home page prototype. The challenges that design faced varies from product definition to design system construction
Define from a user perspective
PRODUCT DEFINE
When I joined the team, the team only had a rough idea with a lo-fi home page prototype. The challenges that design faced varies from product definition to design system construction
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.
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.
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.
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.
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.
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.
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
DESIGN INFRASTRUCTURE
When I joined the team, the team only had a rough idea with a lo-fi home page prototype. The challenges that design faced varies from product definition to design system construction
Select a versetile design system
When I joined the team, the team only had a rough idea with a lo-fi home page prototype. The challenges that design faced varies from product definition to design system construction
Select a versetile design system
DESIGN INFRASTRUCTURE
When I joined the team, the team only had a rough idea with a lo-fi home page prototype. The challenges that design faced varies from product definition to design system construction
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.
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.
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
Problem 1: Flat Color Theme
Problem 1: Flat Color Theme
Problem 2:Complicated Design Token
Problem 2:Complicated Design Token
Problem 2:Complicated Design Token
Problem 3:Low Information Density
Problem 3:Low Information Density
Problem 3:Low Information Density
Problem 4:Limited Component Preset
Problem 4:Limited Component Preset
Problem 4:Limited Component Preset
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.
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.
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
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
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
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
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
