Kiosk on Tour

Role UX Design, UX Research,
Visual Design

Tool Figma, Inkscape

Timeline September - December 2024

In the recent years, concerts have become very popular and people are attending multiple events a year. Many people wish to buy merchandise as a souvenir for a concert.

From personal experience and observations, lines for merchandise are extremely long and have become stressful to obtain. Fans can only purchase merchandise in a small window of time, creating long lines at venues due to limited staff or lack of space.

This project aims to create a physical interactive kiosks to combat the current limitations and frustrations customers encounter so we wanted to make a concert kiosk to address this problem.

Online Research and Fieldwork

The current process for buying concert merchandise

To get a sense of the current experience in buying concert merchandise, we explored 10 different articles and reddit posts and found 4 common problems fans face.

Arrival Time

Online users expressed concern about how early they need to arrive at the venue if they want to buy merch.

Holding onto merch

Not all concerts give out bags for merch and it’s a hassle to hold it if they purchase before the concert.

Lack of merch tents

Online users were frustrated with the lack of merchandise tents which caused the line to be exceptionally long and some fans were unable to purchase merch. The lack of merch tents could be due to available staff, space, or time.

Sizing

Some online users were not sure about which sizes to get, while others were given the wrong size at the merchandise booths, leading to people asking online for possible trades in shirt designs and sizes.

Competitive analysis

We looked into existing interactive kiosks to understand how they addressed the product vending experience.

Uniqlo Vending Machine

Limited selection of item (best-selling items only)
Displays products in a compact box
Offers steps to selecting an item (color and size) before adding it to cart

Popmart Vending Machine

Provides in depth information on each product
Displays selected figurines for people to see
Does not allow the user to pick a specific unit, unlike in store. This is important since each box has a different figure inside.

Benefit Vending Machine

Includes list of all products with rating
Detailed product description
Can’t tell if product is out of stock from the homepage

Field Observations

For our fieldwork, we observed 1 concert merchandise line (Sabrina Carpenter's Short n’ Sweet Concert @ Chase Center San Francisco), and 3 interactive kiosks (Popmart & Benefit Vending Machine and Uniqlo self-checkout). Observing the concert merch line was helpful to understand the built enviroment and the target audience for our kiosk. While observing kiosks gave us a better sense of how people interacted with product-dispensing kiosks.

Concert line	Kiosks
Average transaction time: 5-8 minutes. Longer transactions were often due to uncertainty of size selection Some people wanted to try on the items before purchasing	Average transaction time: 3 minutes People broswering were typically in groups of 2 to 5 (Popmart)
2 hours before the concert, the line was roughly 45min-1hr	Having multiple kiosks helped long lines move quickly (Uniqlo)
Decided on what item to purchase quickly since the products were displayed	People were able to quickly view whether a product was in stock (PopMart & Benefit)

Visualizing the situation through personas and storyboards

Based off of our online research and fieldwork, we created our two personas: Pamela and Jasmine.

❮ ❯

Using these personas, we created storyboards to conceptualize actual usage scenarios and brainstorm how we could utilize a kiosk to address the pain points our personas face

❮ ❯

Storyboard interviews

We interviewed 5 concert-goers to understand their experience with purchasing concert merch and to test the concept of a merch kiosk though getting their opinions on our storyboards.

Interview insight summary:

Users want kiosks to mimic in-person interactions from feeling the clothing to seeing different sizes
Users are worried kiosks won’t give them the flexibility to express their concerns when purchasing merchandise, such as returning or exchanging items.
Users are generally dissuaded from buying merchandise when there are long lines.

View interview document

Mission Statement

We aim to design merchandise kiosks that streamlines the concert merch purchasing process and provides customers a self-service purchase option located in various areas at concert venues, allowing more access points for fans to buy merch.

We hope that the kiosks will address customers’ needs, such as shortening merchandise checkout lines, extending previously limited operating hours, and providing information to help customers decide their best option.

Ideation

Screen designs

To begin, we sketched a paper prototype to the show digital interaction elements of our kiosk. Hover to play video.

Paper prototype

Creating our paper prototype gave us a better sense of the user flow and how we wanted our design to look like. Then we created a lo-fi prototype for our primary screens.

Lo-fi prototype

Physical kiosk design

Next we began to sketch detailed ideas for our physical kiosks along with how users can interact with the kiosk. From the insights from our storyboard interviews and online research, we made sure to incorporate physical features users valued such as product testers.

Physical kiosk sketches

Physical environment

We plan for the kiosks to be next to the people-run merchandiase boot to allow for users to pick between which interaction they want. Additionally, this will allow workers to easily be informed of any problems that arise.

Physical kiosk environment

Branding

We first create a list of adjectives that captures the essence of the emotional experience we want to create with our merchandise kiosk ideas and with that we then we made a moodboard.

Moodboard

Next we made a style guide consisting of our logo, color pallet, typography, and common UI elements.

Style Guide

Digital prototype

For our hi-fi prototype, we created important components such as product item, size options, and button states.

After creating our product component, we decided to create each tab on the homepage as a component for easy organization and to have a concise screens in our prototype. Additionally, we did the same for the item page for different products to allow users to explore the prototype without creating excess screens.

Hi-fi component sheet

Key user interactions

During our testing, we discovered users expressed concerns about sizing, so our digital program includes a size chart and size recommendation.

User flow

Physical prototype

Physical features on our kiosk

Our testing revealed users like to examine and touch the merchandise to see the fit and feel of the clothing. Our kiosk provides sample clothing for users to touch and hold up to themselves.
Users also expressed concerns about holding merchandise, so our kiosk will provide users with bags to hold their purchases.

Physical setup

Our kiosk will have clear signage as well as product testers, display case, and bags for users to take.

Physical kiosk set up

Kiosk construction blueprint

On Inkscape we designed our physical kiosk and will construct it with plywood at a makerspace. Along with our kiosk stand, we will be printing bags, t-shirts, and cds to represent products displayed in the kiosk. This process included a lot of learning through trial and error as we needed work around limiation of wood board size and miscalculations in measurements.

Physical kiosk set up

Usability testing

We tested our final prototype with 3 users that were frequent concert goers to discuss the user flow and how it compares to purchasing concert merch normally.

Overall, users found the general flow to be straightforward and a quick process. However, here's what we need to improve:

Users found it hard to navigate to popular items. Since popular items are usually the ones people wish to buy, there should be an option for users to quickly navigate to them.
Difficult to navigate back to the homepage after viewing an item. Although there was a button to go back to the homepage, it was not obvious to find.
Users had issues with our miniature cart display at the bottom. The cart was blocking the view of the products on the page, making it difficult to complete the tasks. We discovered that our scrolling was bugged.

Iterations

To improve user's browsing experience, we decided to add a sort feature feature to allow users to take recommendations and find products quickly.

Sort feature

To make navigation clearer we added a back arrow on the top left of every page so users can easily navigate back to the previous page.

Back navigation

To improve visability of our product page, we fixed our bug and made it scrollable. Now users are able to easily view all the products and categories while having something in their cart.

Scroll function

Final Product

Hover to play video!

Final digital prototype

View final prototype

Kiosk demo

Project Reflection

Potential limiations

Inventory: Due to the size of vending machines, inventory will be significantly smaller than that of a merch booth causing products to be sold out faster. A solution could be alerts for restocks to venue staff when a vending machine is out of stock.
Cost: Allowing more access points through self-service vending machines will require venues to spend money to build these machines that will not be used daily.

Takeaways

This project was the first time I designed a prototype that extended beyond a screen and I was able to learn a lot about creating a cohesive user expereince.

Conducting storyboard interviews is a great of way to see how a product fits into a situation and whether it is genuinely useful.
Creating a paper prototype is a good, low-stakes starting point in design a user flow.
Turning ideas into a physical product gave me a sense of how design choices, materials, and tools can work together in the real world.

Speeding up the purchasing process for concert merchandise through self-service kiosks