MERCHTABLE

A new way to buy merch at events.

ROLE

ROLE

UX/UI Designer

UX/UI Designer

TIMELINE

TIMELINE

2 months

2 months

TEAM

TEAM

Design Mentor, Design Crit

Design Mentor, Design Crit

TOOLS

TOOLS

Figma, Maze,

Figjam

Figma, Maze,

Figjam

Context

No one likes having to wait in lines, especially at concerts and sporting events, because it seems like all you do is just stand around and wait! Wait in line to enter the venue, wait in line to buy food & drinks, wait in line to use the bathroom, etc. The last thing anyone wants to do is wait in yet another line - and that’s where MerchTable comes in. MerchTable seeks to revolutionize the merch buying experience - making buying merch intuitive and fun, increasing revenue for the bands/venue and increasing ease of use and fun for consumers.

Overview

Preview and pre-purchase merch online.

This case study focuses on the main product value of previewing and pre-purchasing merch online, prior to arriving at the venue of the users’ pre-determined event, and encompasses 2 phases.


Phase 1: user research and defining the problem.

Phase 2: Generating a user-focused solution.

Phase 1: User Research and Defining the Problem

Attendees of sporting events, concerts, etc., are tired of waiting around in endless lines.

Building on the preliminary research that I conducted which provided sound direction toward the experiences of attending sporting events and concerts (additionally based on my own first-hand experience), I created an interview guide and began recruiting participants. I interviewed 5 participants, and then created my Affinity Map. After I synthesized my research, I found that:

100% of interviewees said that merch lines were too long

All interviewees said that they though not only merch lines, but lines in general at events are too long and time consuming.

80% of interviewees had concerns about merch

All interviewees said that they had concerns about item quality, sizing, brand of merch, limited selection, etc.

20% of interviewees said babysitting merch is troublesome

2 of the interviewees said that it was annoying to have to hold on to your merch all night.

This led to the formation of User Personas, and a crucial set of questions:


  1. How might we reduce time spent waiting in lines to increase revenue and increase customer satisfaction?

  2. How might we allow people to better understand the items they want to purchase, and to make more informed decisions?

  3. How might we help merch sellers keep better track of inventory, and to easily unload underperforming merchandise?

Problem Statement

Long lines for the bathroom, bar, concessions and merch table leave concert-goers feeling underwhelmed, impatient, and less likely to spend their money. Additionally, many concert-goers have various concerns about merch, such as sizing, material, and designs. Often, these issues can not be easily assessed in order to make informed decisions about the items they are purchasing.

Hypothesis

Enabling users to be able to easily preview merch and see important information (brand of the garments, size guide, material, etc.) and pre-purchase (skipping the lines), will empower users to make informed decisions about their purchases and stimulate excitement and spending.

Design Ideation and Iterations

Make purchasing as easy as possible.

When I started this project, I asked myself, “How can I make purchasing merch as easy as possible?” I wanted to make the merch buying experience streamlined, intuitive, and exciting. I started with a site map, and then ideating basic screens with various design solutions.

Fig. A:

For the first home screen idea, I knew the users’ upcoming shows had to be the main focus of the app - the show they wanted to buy merch for. In this iteration, the user would have had to click on the ticket to be taken to the merch. Additionally, underneath the “Your Shows” tab, there was recommended shows, as well as other typical things such as “Trending Shows”, etc. The issue with this design was that the shows, not the merch, was at the forefront of the design. Ultimately I decided that the focus was wrong.

Fig. B:

For the second iteration, I tried to see what it might look like with a switcher, with the default set to merch (and of course the users’ upcoming shows at the forefront of either switch). I added hero images for upcoming shows to create excitement, and designed the lower portion of the screen similarly to something like AfterPay or Klarna. I thought giving the user the ability to toggle searches for merch and shows would be beneficial, but realized I was still not addressing the core issue, buying merch for the users’ most upcoming shows.

Fig. B:

For the second iteration, I tried to see what it might look like with a switcher, with the default set to merch (and of course the users’ upcoming shows at the forefront of either switch). I added hero images for upcoming shows to create excitement, and designed the lower portion of the screen similarly to something like AfterPay or Klarna. I thought giving the user the ability to toggle searches for merch and shows would be beneficial, but realized I was still not addressing the core issue, buying merch for the users’ most upcoming shows.

Fig. B:

For the second iteration, I tried to see what it might look like with a switcher, with the default set to merch (and of course the users’ upcoming shows at the forefront of either switch). I added hero images for upcoming shows to create excitement, and designed the lower portion of the screen similarly to something like AfterPay or Klarna. I thought giving the user the ability to toggle searches for merch and shows would be beneficial, but realized I was still not addressing the core issue, buying merch for the users’ most upcoming shows.

Fig. C & D:

Narrowing focus - app is for purchasing merch, not tickets. Tickets for upcoming shows (which are synched to users’ ticketing apps, and in order of soonest to latest) appear, showing merch that can be most soon purchased. Alerts (banners) appear letting the user know when preorder opens (Fig. C) and when preorder ends (Fig. D).


Users can still use the app to search for upcoming shows to buy tickets for, but they are redirected to a ticketing platform.

Lo-Fi Usability Testing

“I love this idea! Great project!”

I conducted an unmoderated usability test via Maze, with 9 participants. There was a 100% completion rate, with lots of praise for the idea, and great feedback/some good suggestions for minor tweaks to further improve upon what I had built.

Key take-aways:

  1. Cards not clear enough

  2. Merch page needs more clarity

  3. CTA buttons too small

“I found it quite straight forward and easy to navigate.”

“I like how straightforward and uncluttered the UX is.”

“This was really easy to do and worked as I expected. I didn’t have any issues at all :) Great job!”

Phase 2: Solution

Creating the ultimate merch buying app!

After synthesizing the Lo-Fi prototype test results, I created my Hi-Fi screens and made the necessary adjustments based upon the given feedback. Again, I conducted another round of unmoderated testing via Maze. There were 8 participants and an 88% completion rate (one tester dropped out). Of the finishing participants, all had positive feedback.

Key take-aways:

  1. Still remaining confusion/design questions about cards

Iterate!

Showing the “Purchased Tickets” system in action.

Card progression:

The Cure

2 TICKETS

Sunday, 6:30PM

@the Armory

PREORDER MERCH

Very first card design. I knew what the important details were, but didn’t have direction in the app yet, hence the “Preorder merch” CTA button.

The Cure

2 TICKETS

Saturday, 6:30PM

@the Armory

This is the card I used in my Hi-Fi testing. I still didn’t really have a vision for how it should look.

The Cure

2 TICKETS

Saturday, 6:30PM

@the Armory

This was my “final” design. I thought it looked cool, kind of “punk”esque - gave zine vibes. Thanks to my mentor’s advice, I ended up scrapping it, as it came off as too graphical and lacked scalability.

The final design

Fig. 1: Searching for a specific band yields most relevant upcoming show, as well as purchasable merch. CTA to buy ticket at external site.

Fig. 1: Searching for a specific band yields most relevant upcoming show, as well as purchasable merch. CTA to buy ticket at external site.

Fig. 1: Searching for a specific band yields most relevant upcoming show, as well as purchasable merch. CTA to buy ticket at external site.

Fig. 2: Merch is locked. Again, CTA to buy tickets - synching ticketing apps unlocks merch.

Fig. 2: Merch is locked. Again, CTA to buy tickets - synching ticketing apps unlocks merch.

Fig. 2: Merch is locked. Again, CTA to buy tickets - synching ticketing apps unlocks merch.

Preview!

See information

Skip the line!

Learnings and Next Steps

Final DesignLab capstone

After starting DesignLab a little over a year ago, I was finally able to put everything I’ve learned to use and make my best project to date. Although not perfect (is anything?), I will continue to brainstorm and iterate as ideas come to mind. Originally, I wanted to try and see how the seller side would look, e.g., a dashboard where the band’s merch manager can easily cut prices, do fire sales, run promos, etc. I also wanted to see how an inventory system would look, as well as a place to store receipts from each purchase and funds/petty cash (possibly even mailing list function?). In the very near future I would like to further explore these ideas and create key Lo-Fi frames, as well as a couple Hi-Fi screens as well.

Never stop learning!

I always get joy out of learning new things, whether it be guitar/bass, Japanese, or UX/UI design. I have a continual growth mindset, and I know I will continue to learn and expand my UX/UI toolset and get better with everything I do. My next steps are to continue learning tricks of the trade, and networking with other UX/UI professionals in order to become the best designer I can become.