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

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

Timeline

Design: Jun.2024 (3weeks) Team Research: 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

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

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

Overview

Background

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

Self Challenge

During Summer

1

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

2

Build a design system based on the initial brand concept that can be applied across UI/UX and brand marketing leveraging my experience as a marketing professional.

Self Challenge

During Summer

1

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

2

Build a design system based on the initial brand concept that can be applied across UI/UX and brand marketing leveraging my experience as a marketing professional.

Self Challenge

During Summer

1

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

2

Build a design system based on the initial brand concept that can be applied across UI/UX and brand marketing leveraging my experience as a marketing professional.

Self Challenge

During Summer

1

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

2

Build a design system based on the initial brand concept that can be applied across UI/UX and brand marketing leveraging my experience as a marketing professional.

Self Challenge

During Summer

1

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

2

Build a design system based on the initial brand concept that can be applied across UI/UX and brand marketing leveraging my experience as a marketing professional.

Solution

Arch: A bridge connecting 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.

Solution

Arch: A bridge connecting 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.

Solution

Arch: A bridge connecting 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.

Solution

Arch: A bridge connecting 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.

Solution

Arch: A bridge connecting 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.

01/ Main Features
01/ Main Features
01/ Main Features
01/ Main Features
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 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 right amount for production.

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 right amount for production.

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 right amount for production.

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 right amount for production.

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 right amount for production.

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 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.

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?

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?

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?

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?

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.

03/ Research

Interviews & Painpoints

What are the real issues behind long lines?

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

Production Risk

Artists often face the risk of over-manufacturing and difficulty of estimating demand.

Queue Fatigue

Fans typically have to arrive earlier and wait in lines to buy merch before concerts.

Availability Issue

Fans also face frustratrations when unexpected soldouts occur at the concerts.

Production Risk

Artists often face the risk of over-manufacturing and difficulty of estimating demand.

Queue Fatigue

Fans typically have to arrive earlier and wait in lines to buy merch before concerts.

Availability Issue

Fans also face frustratrations when unexpected soldouts occur at the concerts.

Production Risk

Artists often face the risk of over-manufacturing and difficulty of estimating demand.

Queue Fatigue

Fans typically have to arrive earlier and wait in lines to buy merch before concerts.

Availability Issue

Fans also face frustratrations when unexpected soldouts occur at the concerts.

Production Risk

Artists often face the risk of over-manufacturing and difficulty of estimating demand.

Queue Fatigue

Fans typically have to arrive earlier and wait in lines to buy merch before concerts.

Availability Issue

Fans also face frustratrations when unexpected soldouts occur at the concerts.

Production Risk

Artists often face the risk of over-manufacturing and difficulty of estimating demand.

Queue Fatigue

Fans typically have to arrive earlier and wait in lines to buy merch before concerts.

Availability Issue

Fans also face frustratrations when unexpected soldouts occur at the concerts.

research Frameworks

RESEARCH FRAMEWORKS

Using service design methods to get the big picture

Applying diverse service design frameworks helped our team gain a "bigger picture".

04/ Key Insights

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.

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.

APP Must-haves

Reduce risks, increase simplicity

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

1

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.

1

Artists need risk management

1

Artists need risk management

1

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.

1

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.

2

Fans want to show support and artists seek support

2

Fans want to show support and artists seek support

2

Fans want to show support and artists seek support

2

Fans want to show support and artists seek support

2

Fans want to show support and artists seek support

3

Fans want a simpler way to browse and ensure availability

3

Fans want a simpler way to browse and ensure availability

3

Fans want a simpler way to browse and ensure availability

3

Fans want a simpler way to browse and ensure availability

3

Fans want a simpler way to browse and ensure availability

05/ IA & Wireframes

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.

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.

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.

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

Not making users 'think' during the pick-up process

challenge 1

Not making users 'think' during 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 user navigation

After receiving feedback, I simplified UX writing and adjusted button layouts to optimize user navigation.

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

1

User Confusion

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

1

User Confusion

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

1

User Confusion

Primary color was used excessively and caused confusion.

1

User Confusion

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

1

User Confusion

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

2

Disrupting the user flow

Buttons were placed without considering the most important user flow.

2

Disrupting the user flow

Buttons were placed without considering the most important user flow.

2

Disrupting the user flow

Buttons were placed without considering the most important user flow.

2

Disrupting the user flow

Buttons were placed without considering the most important user flow.

2

Disrupting the user flow

Buttons were placed without considering the most important user flow.

3

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

3

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

3

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

3

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

3

Scroll Fatigue

Vertical scroll area was too long to reach the buttons.

Accessibility

1

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

Accessibility

1

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

Accessibility

1

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

Accessibility

1

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

Accessibility

1

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

Usability

2

Added fixed button dock to improve usability and decision making.

Usability

2

Added fixed button dock to improve usability and decision making.

Usability

2

Added fixed button dock to improve usability and decision making.

Usability

2

Added fixed button dock to improve usability and decision making.

Usability

2

Added fixed button dock to improve usability and decision making.

Optimizing the flow

3

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

Optimizing the flow

3

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

Optimizing the flow

3

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

Optimizing the flow

3

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

Optimizing the flow

3

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

challenge 2

Rescoping UX features based on business goals

challenge 2

Rescoping UX features based on business goals

Ensuring that each feature aligns with the business purpose

In the beginning, an Instagram story-like real-time video sharing UI was implemented, but 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.

1

Lack of purpose

The video sharing feature was added without clear purpose.

1

Lack of purpose

The video sharing feature was added without clear purpose.

1

Lack of purpose

The video sharing feature was added without clear purpose.

1

Lack of purpose

The video sharing feature was added without clear purpose.

1

Lack of purpose

The video sharing feature was added without clear purpose.

2

Missing UI

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

2

Missing UI

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

2

Missing UI

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

2

Missing UI

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

2

Missing UI

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

3

Visual redundancy

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

3

Visual redundancy

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

3

Visual redundancy

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

3

Visual redundancy

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

3

Visual redundancy

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

Easier navigation

1

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

Easier navigation

1

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

Easier navigation

1

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

Easier navigation

1

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

Easier navigation

1

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

Adding UI for interaction

2

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

Adding UI for interaction

2

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

Adding UI for interaction

2

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

Adding UI for interaction

2

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

Adding UI for interaction

2

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

Clear hierarchy

3

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

Clear hierarchy

3

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

Clear hierarchy

3

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

Clear hierarchy

3

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

Clear hierarchy

3

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

challenge 3

Adding Interactivity to boost user engagement

challenge 3

Adding Interactivity to boost user engagement

💡 What if we could increase the sense of community when voting for merch?

Micro-animations and increased visibility of fan support during the voting process

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

With a product-oriented mindset, I found it useful to add interactive features to increase user engagement.

1

Lack of interactivity

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

1

Lack of interactivity

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

1

Lack of interactivity

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

1

Lack of interactivity

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

1

Lack of interactivity

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

2

UX Writing

Original copies weren't designed to encourage user participation.

2

UX Writing

Original copies weren't designed to encourage user participation.

2

UX Writing

Original copies weren't designed to encourage user participation.

2

UX Writing

Original copies weren't designed to encourage user participation.

2

UX Writing

Original copies weren't designed to encourage user participation.

Delightful & engaging

1

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

Delightful & engaging

1

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

Delightful & engaging

1

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

Delightful & engaging

1

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

Delightful & engaging

1

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

UX writing

2

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

2

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

2

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

2

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

2

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

3

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

Fostering community

3

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

Fostering community

3

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

Fostering community

3

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

Fostering community

3

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

💡 What if we could increase the sense of community when voting for merch?

07/ Branding

DESIgn principles

Simplicity

Simple and intuitive design system allows easy navigation even for first time users.

Connectedness

All elements are carefully designed to help fans find more connections with other fans and artists.

Clear Hierarchy

Creates a clean and well-organized look by maintaining consistent design system.

Simplicity

Simple and intuitive design system allows easy navigation even for first time users.

Connectedness

All elements are carefully designed to help fans find more connections with other fans and artists.

Clear Hierarchy

Creates a clean and well-organized look by maintaining consistent design system.

Simplicity

Simple and intuitive design system allows easy navigation even for first time users.

Connectedness

All elements are carefully designed to help fans find more connections with other fans and artists.

Clear Hierarchy

Creates a clean and well-organized look by maintaining consistent design system.

Simplicity

Simple and intuitive design system allows easy navigation even for first time users.

Connectedness

All elements are carefully designed to help fans find more connections with other fans and artists.

Clear Hierarchy

Creates a clean and well-organized look by maintaining consistent design system.

Simplicity

Simple and intuitive design system allows easy navigation even for first time users.

Connectedness

All elements are carefully designed to help fans find more connections with other fans and artists.

Clear Hierarchy

Creates a clean and well-organized look by maintaining consistent design system.

LOGO DESIGN
LOGO ANIMATION
style guide
Social Branding Content

08/ Takeaways

1

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.

1

Understanding the bigger picture

1

Understanding the bigger picture

1

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.

1

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.

2

Convincing clients that this would work

2

Convincing clients that this would work

2

Convincing clients that this would work

2

Convincing clients that this would work

2

Convincing clients that this would work

3

Experience of creating an entire system

3

Experience of creating an entire system

3

Experience of creating an entire system

3

Experience of creating an entire system

3

Experience of creating an entire system