SideQuest Master Mobile App

Design A Skill-sharing App from Scratch

SideQuest Master is a mobile app startup designed to enhance real-life experiences through skill-sharing and mutual help. I joined this project during my time at Hawaii Pacific University as part of a research initiative exploring how design contributes to new product development.
‍
As the product designer, I led efforts across product definition, branding, and high-fidelity prototyping to support the minimum viable product (MVP) design, and a customized design system to accelerate the product development.

Background

Real-life SideQuests

Inspired by the concept of SideQuests in video games, SideQuest Master aims to bring that sense of meaningful contribution into the real world by promoting mutual help and sharing.

In April 2024, a six-member team came together to develop a minimum viable product (MVP) to realize this concept.

Challenges

Design from Scratch

The team started with only a rough concept and a low-fidelity home page prototype.

The product was poorly defined in the beginning, and a significant amount of time was spent on communication and alignment.

Objectives

Accelerating product development through design

Given the early-stage nature of the project, I collaborated with the product owner to define a development roadmap consisting of three phases: ‍

Functionality

Usability

User Experience

At the current MVP phase, our primary goal was to support and accelerate development by focusing on core functionality.

Solutions

Design Thinking Workshops, Design Visualization, and a Scalable Design System

1. Minimal Viable Product Workshop

I initiated several product workshops to help define our audience and roadmap. Using tools like personas, user journeys, and the 5 Whys method, we refined our MVP concept into a flow with four primary pages and an ideal user journey for posting and accepting SideQuests.

2. Design Infrastructure (Design System)

To streamline development, we adopted preset components and built a customized design system—based on the Nucleus UI.I worked closely with the front-end developer to ensure agility and consistency. We customized components such as Stack (inspired by Ant Design) to enable component swapping for rapid iteration and integrated keyboard placeholders to prevent layout shifts.

3. Home Page Design Optimization

As the primary entry point of the app, the home page underwent several iterations. We aimed to meet the needs of both task posters and takers, improving information accessibility and SideQuest filtering efficiency.

Outcome

30+ MVP Screens

Delivered over 30 product screens covering core features such as posting a SideQuest, accepting a SideQuest, viewing SideQuest history, chat, and token transactions.

Interactive MVP Prototype

By May 2025, an interactive MVP prototype was developed.

Custom SQM Design System

Developed a custom SQM design system grounded in the Nucleus UI and branded with our visual identity. Ensured WCAG AA-level accessibility across color schemes. To ease the engineering workload, many components were designed for reuse.

Home Page Iteration

Implemented a high information density design containing essential SideQuest information while maintaining a compact size. Minimal color usage decreased cognitive burden and reinforced the brand theme.

High Information Density

This design contains the essential SideQuest information while keeping a compacted size

Minimalism

Minimal color usage decreases cognition burden and enforce the brand theme

Fluent Visual Flow

With the appropriate matching of text, icon and tag, user can easily locate and read the information with nature visual flow

SideQuest Master is an ongoing project. As the product continues to evolve, additional features, design iterations, and user feedback will be integrated into future updates.