top of page
Header.jpg

Escape

UX Design Project

@ SCADpro Future Proof - Design Challenge

tab.png
03 - THE PROCESS

I was actively involved in all stages of the UX design process:

process breif.png
THE PROCESS
tab.png
04 - USER RESEARCH

First, we were curious to understand concert-goers and find out what they think is missing in the online concert experience compared to an on-site one.

After analyzing SCADpro's user survey findings, and conducting 7 semi-structured interviews, we gained better understandings of our target user - concert goers and depicted a typical persona about:

  • Concert goers' motivation and expectations.

  • The differences and similarities between onsite and online concerts.

  • Concert goers' frustrations on online concert experience.

RESEARCH
tab.png
05 - MEET OUR USER

Gaining an in-depth understanding of concert-goers through research, we depicted a typical target user in the following persona.

User Persona.png
tab.png
06 - COMPARE USER JOURNEY

After understanding the flow of both onsite and online concerts, we drew a mixed journey map to show the comparison and users' pain points of the online experience.

Compared to the on-site version, the online concert is completely missing the pre-concert and post-concert activities. Also, during the concert, monotonic interaction leads to low immersion & low participation.

journey map .png

Click to enlarge image👆

tab.png
07 - USER INSIGHTS

Being at the concert is only a part of the experience, the entire concert experience is a whole journey of building anticipation, immersive experience among the concert, and transferring the energy from the concert into life.

Anticipation

Pre-concert activities create a roller-coaster-like climbing experience for users. Building up their excitement and expectation increases enjoyment and sense of ritual before and during the concert.
 

Participation

Let audiences' participation have an impact on the progress of the concert can improve audiences' sense of control and participation, which is a source of immersion.

Synthesizing quantitative and qualitative data through affinity mapping, we uncovered some key insights about online concert experience to fuel design.

 

Resonance

The concert is a collective experience where audiences share similar emotions and behaviors to singers, music, or whatever is happening during the concert. It makes audiences relax, enjoy and immerse themselves in the concert.

Memory

A real concert experience is a unique memory for each individual. Recalling the exciting memory through photos and videos can fill people with energy.

tab.png
08 - DESIGN GOALS

Based on the research insights, we further specified 4 design goals as our solution's guideline.

Build anticipation & sense of ritual

Build up users' excitement, expectation, and sense of ritual in pre-concert activities.

Increase audience participation

Allow audience interaction and participation changes the course of the concert to some extent.

Create resonance

Create an environment where the audience can feel each other's actions and thoughts.

Collect special memories

Record highlight moments of the concert, make it become a customized souvenir that users can freely recall and share at any time.

DESIGN GOALS
tab.png
08 - DESIGN GOALS

Based on the research insights, we further specified 4 design goals as our solution's guideline.

Build anticipation & sense of ritual

Build up users' excitement, expectation, and sense of ritual in pre-concert activities.

Create resonance

Create an environment where the audience can feel each other's actions and thoughts.

tab.png
09 - DESIGN IDEATION

We brainstormed ideas and prioritized those most relevant to the design goals.

ideation.png
IDEATION
tab.png
10 - STORYBOARD & LOW-FI SKETCH

Combining these prioritized ideas, we create the solution concept and visualize it in user scenarios.

Click to enlarge image👆

storyboard.png
tab.png
11 - INFORMATION ARCHITECTURE

To visualize the interaction flow and key features, we broke down the features into 4 top categories and made a sitemap.

IA.png

Click to enlarge image👆

DESIGN
tab.png
12 - WIREFRAMES

Next, we draw wireframes of the main interfaces and made a mid-fi prototype according to the sitemap.

wireframe1_edited.png

swipe to look through image👆

tab.png
13 - TEST WITH MID-FI PROTOTYPE

We organized user flows into 5 tasks for early user testing and refine our solutions in hi-fi design.

Usertesting1.png

swipe to look through image👆

ITERATION
tab.png
14 - DESIGN SYSTEM

To ensure consistency, we created a moodboard and a UI style guide for the high-fidelity design.

  • The visual style of Escape is young, energetic, and in line with the colors of the concert.

  • Considering the overall darkness of the concert environment and eye protection, we used a dark theme.

moodboard.png
Style guide.png
tab.png
15 - LEARNING & REFLECTION

Use research findings to support every design decision, and consider users at every step.

Through Escape, I experienced all the steps of UX design and gained a deeper understanding of how to use a systematic process to synthesize data from users and use visualized design to solve the problems. 

 

Plus, this project was very collaborative in all stages within our team of 3 students. I enjoyed learning from my teammates who came from different backgrounds and was excited about sharing my knowledge about UX design and my collaborative methods and tools.

For the future steps, I hope me and my teammate could meet in person and conduct in-depth usability testing together using the Wizard of OZ method to collect more feedback for further iteration.

affinity mapping.png

We synthesized users' quotes into insights through affinity mapping.

hi-fi designs.png

We made hi-fi designs together in Figma.

REFLECTION
bottom of page