Designing an app for concert merch

Completed as part of the
Google UX Design Program

Overview

As a music-lover who enjoys live concerts, I often use those times as opportunities to get my hands on some exclusive merch. However, the process of purchasing merchandise at concerts is often inefficient, unorganized, and time-consuming. I knew that there was an easier way to organize the entire process: through the creation of a concert merch app.

I decided to investigate what problems users were experiencing through user interviews. These interviews informed the creation of empathy maps, personas, user journey maps, and user stories. After examining the needs, wants, and motivations of users, I conducted a competitive audit to better understand what market niche I could fill with my app. To start designing the app itself, I outlined a user flow, created a storyboard and wireframe, and finally produced a low-fidelity prototype with Figma.

User Interviews

The first step in designing my app was crucial; I had to understand my users' needs, wants, and motivations before any design decisions were made. To do this, I conducted user interviews.

One user, given the pseudonym Iris, indicated that concerts were a social event for her, and that her priority was to spend quality time with her friends. However, buying merch often interfered with this process — Iris and her friends didn't want to miss out on the music, so they often designated one person to wait in line and purchase everyone's merch. This not only resulted in that person missing out on the concert, but also led to issues when certain items turned out to be out of stock.

Another user, given the pseudonym Charlie, said that he only went to concerts for musicians he really loved. Charlie highly values both his time and money, and therefore doesn't want to waste either on waiting in line for merch unless he is sure he'll love it. Unfortunately, at most venues the crowds are so large that it's difficult to get a good view of the merch table until you're near the front of the (usually long) line. Things like the prices, sizes, and styles of various items aren't accessible to customers until they're already at the table.

Note: These interview transcripts were made accessible with the full consent of interviewees.

Iris Interview

Charlie Interview

Empathizing with the User

Based on these interviews, I created some empathy maps. These empathy maps helped to clarify the perspectives of the users and expand upon their interviews.

Next, I created user personas based on the needs identified in my interviews. These personas also help to succinctly and clearly summarize the main findings of my user interviews.

My next step was to create user journey maps. These maps provide a clear, step-by-step description of what these personas currently experience while trying to buy merch, identifying user pain points along the way.

To refine the main goals of our users, I created user stories.

Competitive Audit

In order to understand what products and services may already be available in this area, I conducted a competitive audit. This allowed me to determine what needs were unmet by other apps or websites, so that I could try to incorporate those functions in our app.

I then summarized the key findings of the audit in a report.

Designing the App

Now that I'd conducted user interviews, empathized with the user, and evaluated the strengths and weaknesses of our competitors, it was time to start designing the app.

I started out with a list of the steps a user might take to successfully navigate through the app.

Then, I used these steps as the framework for a user flow diagram. The diagram illustrates the path that a user could take through the app, from browsing merch to checkout.

Now that I understood the complete path a user could take through the app, I could create some storyboards. The first is a big picture storyboard, meant to illustrate the context in which someone might use the app. The second storyboard provides a close-up view of a user navigating through the app.

Finally, I used the wireframes as the foundation for a low-fidelity prototype of the app, created in Figma. Click here to interact with the prototype and see how the app came to life!

With the user flow in mind, I created some digital wireframes of the various pages on the app.

For more information, contact me at sarah@bobbitt.ca