Solo Design Project

Mobile App

Design System

Brand Identity

The ultimate solution that connects small artists and fans through merch

Arch is an app to enhance the merch shopping experience for small artists and their fans, while fostering a sense of community.

The ultimate solution that connects small artists and fans

Arch is an app to enhance the merch shopping experience for artists and their fans, while fostering a sense of community.

The ultimate solution that connects small artists and fans through merch

Arch is an app to enhance the merch shopping experience for small artists and their fans, while fostering a sense of community.

The ultimate solution that connects small artists and fans

Arch is an app to enhance the merch shopping experience for artists and their fans, while fostering a sense of community.

Timeline

Personal: Jun.2024 (3weeks) Original: Feb-Apr. 2024 (6weeks)

My Role

1-As a sole designer, managed the entire design process 2-Led user interviews and synthesized all research findings 3-Created a brand identity, design system, wireframes, and prototypes

team

Design: Solo Research: Sy Suo, Amanda Qian (1 PM, 1 researcher)

Project Type

Originally Academic Project Service Design Class

Tools

Figma Lottie AfterEffects User Research

Timeline

Personal: Jun.2024 (3weeks) Original: Feb-Apr. 2024 (6weeks)

My Role

1-As a sole designer, managed the entire design process 2-Led user interviews and synthesized all research findings 3-Created a brand identity, design system, wireframes, and prototypes

team

Design: Solo Research: Sy Suo, Amanda Qian (1 PM, 1 researcher)

Project Type

Originally Academic Project Service Design Class

Tools

Figma Lottie AfterEffects User Research

Timeline

Personal: Jun.2024 (3weeks) Original: Feb-Apr. 2024 (6weeks)

My Role

1-Managed the entire design process 2-Led user interviews and synthesized all research findings 3-Created a brand identity, design system, wireframes, and prototypes

Project Type

Originally Academic Project Service Design Class

Tools

Figma Lottie AfterEffects User Research

Overview

Background

Originally, this was the final project for a Service Design class. However, I took it further and turned this project into a 3 week zero-to-one solo app design challenge.

Background

Originally, this was the final project for a Service Design class. However, I took it further and turned this project into a 3 week zero-to-one solo app design challenge.

Background

Merch is fans' love language. Through online voting, fans can support their favorite artists by helping them choose final designs and accurately estimate the demand.

Self Challenge

Develop a viable mobile app prototype from zero-to-one

Build a consistent and appealing UI/UX and brand design system

Self Challenge

Develop a viable mobile app prototype from zero-to-one

Build a consistent and appealing UI/UX and brand design system

Solution

Arch: Let's connect artists, merch, and fans!

As the name suggests, Arch bridges the gap between local artists and their fans. Arch app offers emerging artists a platform to create and sell merchandise with increased visibility. By leveraging fan engagement through online voting, Arch aims to boost artists' revenue while fostering a stronger sense of community among fans.

Link to Figma

Solution

Arch: Let's connect artists, merch, and fans!

Link to Figma

Solution

Arch: Let's connect artists, merch, and fans!

As the name suggests, Arch bridges the gap between local artists and their fans.

01/ Main Features

FEATURE 1-Home & Artist Feed

Don't miss a single merch

The homepage keeps users updated on new merch and live events while allowing them to connect directly with their favorite artists.

FEATURE 1-Home & Artist Feed

Don't miss a single merch

The homepage keeps users updated on new merch and live events while allowing them to connect directly with their favorite artists.

FEATURE 1-HOME & ARTIST FEED

Don't miss a single merch

The homepage keeps users updated on new merch and live events while allowing them to connect directly with their favorite artists.

FEATURE 2-VOTE

Cast a vote to show your support!

Merch is fans' love language. Through online voting, fans can support their favorite artists by helping them choose final designs and accurately estimate the demand.

FEATURE 2-VOTE

Cast a vote to show your support!

Merch is fans' love language. Through online voting, fans can support their favorite artists by helping them choose final designs and accurately estimate the demand.

FEATURE 2-VOTE

Cast a vote to show your support!

Merch is fans' love language. Through online voting, fans can support their favorite artists by helping them choose final designs and accurately estimate the demand.

FEATURE 3-PICK-UP

Skip the rush, plan ahead

Users can conveniently schedule self-pickups and track their orders.

FEATURE 3-PICK-UP

Skip the rush, plan ahead

Users can conveniently schedule self-pickups and track their orders.

FEATURE 3-PICK-UP

Skip the rush, plan ahead

Users can conveniently schedule self-pickups and track their orders.

FEATURE 4- EASY QR TAP

No more lines. Just a tap

With a single tap, users can activate a scannable QR code to quickly check and collect their orders at concerts, without long lines.

FEATURE 4- EASY QR TAP

No more lines. Just a tap

With a single tap, users can activate a scannable QR code to quickly check and collect their orders at concerts, without long lines.

FEATURE 4- EASY QR TAP

No more lines. Just a tap

With a single tap, users can activate a scannable QR code to quickly check and collect their orders at concerts, without long lines.

02/ Problem Space

Question

Why do fans have to stand in line for merch?

Arch started with a simple question: why should fans wait in line for merch, even at smaller concerts? This idea evolved into a platform that strengthens the connection between small, local artists and their fans by delivering a hassle-free concert merchandise shopping experience.

Question

Why do fans have to stand in line for merch?

Question

Why do fans have to stand in line for merch?

03/ Research

Interviews & Painpoints

What are the real issues behind long lines?

Over 4 weeks, I interviewed 3 fans and 1 artist, including a Pittsburgh-based rapper, Fungiflows. Through this, we could identify key problem areas.

Interviews & Painpoints

What are the real issues behind long lines?

Over 4 weeks, I interviewed 3 fans and 1 artist, including a Pittsburgh-based rapper, Fungiflows. Through this, we could identify key problem areas.

Production Risk

Artists face the risk of over-manufacturing

Queue Fatigue

Fans typically have to arrive earlier and wait in lines

Availability

Fans face frustrations from unexpected sold-out

Production Risk

Artists face the risk of over-manufacturing

Queue Fatigue

Fans typically have to arrive earlier and wait in lines

Availability

Fans face frustrations from unexpected sold-out

Production Risk

Artists face the risk of over-manufacturing

Queue Fatigue

Fans typically have to arrive earlier and wait in lines

Availability

Fans face frustrations from unexpected sold-out

research Frameworks

Design frameworks to get the big picture

Applying diverse service design frameworks gain a broader perspective.

research Frameworks

Design frameworks to get the big picture

Applying diverse service design frameworks gain a broader perspective.

04/ Key Insights

APP Must-haves

Reduce risks, increase simplicity

We synthesized research findings into 3 key areas on which our app must focus.

APP Must-haves

Reduce risks, increase simplicity

We synthesized research findings into 3 key areas on which our app must focus.

App Must Haves

Reduce risks, increase simplicity

By synthesizing findings, we identified three areas where our app features must focus on.

App Must Haves

Reduce risks, increase simplicity

By synthesizing findings, we identified three areas where our app features must focus on.

Artists need risk management

Small artists often struggle to determine the right amount of merchandise to produce. For example, Fungiflows, a Pittsburgh-based rapper we interviewed, wanted to create a specific item but couldn’t, due to high production costs and uncertainty about demand.

Artists need risk management

Fans want to show support and artists seek support

Fans want a simpler way to browse and ensure availability

05/ IA & Wireframes

Information Architecture

Prioritization based on user insights

I created an IA to visualize the structure of the app and define priorities.

Information Architecture

Prioritization based on user insights

I created an IA to visualize the structure of the app and define priorities.

Information Architecture

Prioritization based on user insights

I created a basic sitemap to visualize the structure of the app and define priorities.

Information Architecture

Prioritization based on user insights

I created a basic sitemap to visualize the structure of the app and define priorities.

Wireframes

Lofi to MidFi

Focusing on the main user flows, I developed wireframes with slightly higher fidelity, exploring different layouts for information and interactions.

Wireframes

Lofi to MidFi

Focusing on the main user flows, I developed wireframes with slightly higher fidelity, exploring different layouts for information and interactions.

Wireframes

Lofi to MidFi

Focusing on the main user flows, I developed wireframes with slightly higher fidelity, exploring different layouts for information and interactions.

Wireframes

Lofi to MidFi

Focusing on the main user flows, I developed wireframes with slightly higher fidelity, exploring different layouts for information and interactions.

06/ Design Iterations

challenge 1

Streamlining the pick-up process

challenge 1

Streamlining the pick-up process

CHALLENGE 1

Streamlining the pick-up process

Adjusted UI structure and UX writing to enhance navigation

Adjusted UI structure and UX writing to enhance navigation.

After receiving feedback, I simplified UX writing and adjusted button layouts.

I also repositioned buttons by using a button dock, reordering them based on priority.

User Confusion

Primary colors were used without clear prioritization, and unlabeled buttons caused user confusion.

User Confusion

Primary colors were used without clear prioritization, and unlabeled buttons caused user confusion.

User Confusion

Primary colors were used without clear prioritization, and unlabeled buttons caused user confusion.

Disrupting the user flow

Buttons were placed without considering the most important user flow.

Disrupting the user flow

Buttons were placed without considering the most important user flow.

Disrupting the user flow

Buttons were placed without considering the most important user flow.

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

Accessibility

Unified QR button and CTA copies to reduce confusion and enhance accessibility.

Accessibility

Unified QR button and CTA copies to reduce confusion and enhance accessibility.

Accessibility

Unified QR button and CTA copies to reduce confusion and enhance accessibility.

Usability

Added fixed button dock to improve usability and decision making.

Usability

Added fixed button dock to improve usability and decision making.

Usability

Added fixed button dock to improve usability and decision making.

Optimizing the flow

Given its highest priority, the pick-up CTA is placed consistently at the bottom to enhance the seamless pick-up experience.

Optimizing the flow

Given its highest priority, the pick-up CTA is placed consistently at the bottom to enhance the seamless pick-up experience.

Optimizing the flow

Given its highest priority, the pick-up CTA is placed consistently at the bottom to enhance the seamless pick-up experience.

challenge 2

Rescoping UX features based on business goals

challenge 2

Rescoping UX features based on business goals

CHALLENGE 2

Rescoping UX features based on business goals

Ensuring alignment
with business purposes

Ensuring alignment with business purposes.

In the beginning, there was no UI for fans to react or respond to the artist's messages.

Based on user testing, I decided to remove the video sharing feature and focus on a feed-like feature to increase user engagement.

Lack of purpose

The video sharing feature was added without clear purpose.

Lack of purpose

The video sharing feature was added without clear purpose.

Lack of purpose

The video sharing feature was added without clear purpose.

Missing UI

There was no feedback UI for fans to interact with the Artist's Feed content.

Missing UI

There was no feedback UI for fans to interact with the Artist's Feed content.

Missing UI

There was no feedback UI for fans to interact with the Artist's Feed content.

Visual redundancy

Too many visual elements and redundant information on the Artist page.

Visual redundancy

Too many visual elements and redundant information on the Artist page.

Visual redundancy

Too many visual elements and redundant information on the Artist page.

Easier navigation

The video sharing feature was removed, and a chip UI was introduced to enable users to filter content more easily.

Easier navigation

The video sharing feature was removed, and a chip UI was introduced to enable users to filter content more easily.

Easier navigation

The video sharing feature was removed, and a chip UI was introduced to enable users to filter content more easily.

Adding UI for interaction

Added the feedback UI to facilitate interaction between fans and artists.

Adding UI for interaction

Added the feedback UI to facilitate interaction between fans and artists.

Adding UI for interaction

Added the feedback UI to facilitate interaction between fans and artists.

Clear hierarchy

Reduced the excessive use of visuals and re-arranged the layout based on content hierarchy.

Clear hierarchy

Reduced the excessive use of visuals and re-arranged the layout based on content hierarchy.

Clear hierarchy

Reduced the excessive use of visuals and re-arranged the layout based on content hierarchy.

challenge 3

Adding Interactivity to boost user engagement

challenge 3

Adding Interactivity to boost user engagement

CHALLENGE 3

Adding Interactivity to boost user engagement

Micro-animations and increased visibility of fan support during the vote

Micro-animations and increased visibility of fan support during the vote.

Based on user research, supporting artists was one of the main goals of the fans.

With a product thinking, I added interactive features to increase user engagement.

Lack of interactivity

The original design had a flat, text-based UI with little consideration for user engagement.

Lack of interactivity

The original design had a flat, text-based UI with little consideration for user engagement.

Lack of interactivity

The original design had a flat, text-based UI with little consideration for user engagement.

UX Writing

Original copies weren't designed to encourage user participation.

UX Writing

Original copies weren't designed to encourage user participation.

UX Writing

Original copies weren't designed to encourage user participation.

Delightful & engaging

Micro-animations were added to enhance user engagement and create a more delightful experience.

Delightful & engaging

Micro-animations were added to enhance user engagement and create a more delightful experience.

Delightful & engaging

Micro-animations were added to enhance user engagement and create a more delightful experience.

UX writing

Added friendly UX writing to promote user engagement and strengthen the sense of community and support, which was the primary goal of the merch vote.

UX writing

Added friendly UX writing to promote user engagement and strengthen the sense of community and support, which was the primary goal of the merch vote.

UX writing

Added friendly UX writing to promote user engagement and strengthen the sense of community and support, which was the primary goal of the merch vote.

Fostering community

Displaying the number of fans helps users feel connected to a larger community.

Fostering community

Displaying the number of fans helps users feel connected to a larger community.

Fostering community

Displaying the number of fans helps users feel connected to a larger community.

07/ Branding

DESIgn principles

DESIGN PRINCIPLES

Simplicity

Simple and intuitive design system to allows an easier navigation.

Connectedness

Enhance connections between fans and fan and their favorite artists.

Clear Hierarchy

Clean and organized look with a consistent design system.

Simplicity

Simple and intuitive design system to allows an easier navigation.

Connectedness

Enhance connections between fans and fan and their favorite artists.

Clear Hierarchy

Clean and organized look with a consistent design system.

Simplicity

Simple and intuitive design system to allows an easier navigation.

Connectedness

Enhance connections between fans and fan and their favorite artists.

Clear Hierarchy

Clean and organized look with a consistent design system.

LOGO DESIGN

LOGO ANIMATION

style guide

STYLE GUIDE

Social Branding Content

SOCIAL MEDIA CONTENT

08/ Takeaways

Understanding the bigger picture

I applied diverse service design frameworks in this project, emphasizing the importance of considering all stakeholders and business impacts. While I primarily focused on features for fans, I learned how to design a product with all potential users in mind.