Overview

Solution

Problem

Wireframes

Iterations

Reflections

Go to top

Client

Mobile app

Design System

Brand Identity

A mobile app 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.

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.

Timeline

3 weeks (2024)

team

1 Researcher 1 Designer

Tools

Figma AfterEffects Lottie

Client

Mobile app

Design System

Brand Identity

A mobile app 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.

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.

Timeline

3 weeks (2024)

team

1 Researcher 1 Designer

Tools

Figma AfterEffects Lottie

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.

Task details

Goals

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.

Link to Figma

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 2-VOTE

Cast a vote to show your love!

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 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 this innovative mobile app, Arch.

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.

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

Our UX research used 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.

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

Small artists' fans buy merch to show their support to artists. Some fans are particularly conscious of how their purchases directly benefit the artists.

Fans want to show support and artists seek support

Fans want a simpler way to browse and ensure availability

Right now, they have to navigate multiple websites and social media platforms to stay updated on concert merch, which is inconvenient. At concerts, they face long waits and the frustration of unexpected sell-outs.

Fans want a simpler way to browse and ensure availability

05/ IA & Wireframes

Information Architecture

What are the most important features?

I prioritized features based on user needs gathered from the research.

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

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

LOGO DESIGN

LOGO ANIMATION

style guide

STYLE GUIDE

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.

Understanding the bigger picture

Convincing clients that this would work

Our team received high praise and appreciation from live concert industry professionals after our presentations. We developed a prototype that functioned as an MVP, effectively conveying our concept. This experience reinforced the importance of storytelling, logical thinking, and visualization.

Convincing clients that this would work

Experience of creating an entire system

I learned a lot by creating a brand design system on my own. Although I encountered errors and mistakes along the way, the experience was invaluable, significantly deepening my understanding of UI/UX patterns.

Experience of creating an entire system