Setlist

UI/UX | Application Design - 2022

Reimagining and improving the experience of buying merchandise for fans attending concerts and events so that they can spend more time enjoying the experience and less time waiting in lines.

Project Details

My Role
UI/UX Designer

Timeline
‍September - November 2022 (8 weeks)

Tools
Figma, Adobe Illustrator, Adobe Photoshop

Overview

What is Setlist?
‍
Setlist is a smartphone application that is designed to streamline the process of buying concert and event merch for attendees. The goal is to create a more seamless experience for attendees that want to purchase merch at shows without the hassle of waiting in long queue lines, missing a portion of the show, or having merch sell out before they can reach the queue!

UX Research Plan

In order to better understand the goals of the project, I laid out a thorough research plan that included a competitive audit, user interviews, and usability testing.
The main research goals were to understand the merch ordering process and identify the different types of users that would benefit from the use of the app and to determing the user's pain points, goals and needs.

Competitive Audit

When I conducted the competitive audit to analyze the existing options available on the market that tackled similar problems that I aimed to solve, I found that there wasn't much competition at the time for venue merch apps. Instead, I took a deeper dive into adjacent companies that offered on-demand merch printing and fulfillment solutions for musicians to see how I could incorporate those features into my app planning.

Empathy Mapping

In order to define potential user problems ahead of time, I developed personas each with their own individual challenges, goals, wants, and needs. This helped me to visualize the journey of other users so that I could think outside of what I would personally go through as a user.

Storyboarding

Once the personas were developed, I sketched out a storyboard to help visualize the challenges a user would face and how they would use the application in a real world scenario.

In the storyboard below, I illustrate the of interactions within the external environment and how a user might utilize the app during a real world situation.

Top Solutions

Storyboarding revealed the key pain points that a user would experience duriung the traditional merch purchasing method. I used this information to delve into the top solutions that would help remedy these issues and streamline the merch buying process.

Viewable selection of merch

Giving users the ability to view available merch at the live concert venue the day of the event allows them to pre-plan what items they want ahead of time, which cuts down on pressure to make a quick decision and relieves congested lines at the booth.

Purchase in app for pickup

Users will have the option to make purchases through the app that they can pick up at a more convenient time during the event. They will be assigned a unique QR code for their orders that they can scan at the booth's pick up area. Less time spent in long queues means more time enjoying the event!

Real-time updates

Users will have the ability to check real time updates so that they know when their order has been fulfilled and is ready for pick up at the venue.

Account Creation

The app will have an account creation for users so that they can pre-fill information such as payment and mailing addresses in order to simplify the checkout process.

Conceptualization

Once solutions were defined, I set off to sketch out mutiple lo-fidelity wireframe concepts on paper to come up with as many unique ideas as possible and explore creative solutions.

Lo-Fi Wireframes

Once I sketched out several iterations of each page of the main user flow, I selected the versions I wanted to build off of and began designing the first draft of the main user flow within Figma.

User Testing

After developing the first draft of the low-fi wireframes, it was time to set off and conduct some user testing before delving into hi-fi mockup creation.

I created a lo-fi prototype with the created wireframes and conducted an unmoderated usability study with 5 participants within my target demographic. I used an online platform that guided the participant through tasks and tracked the clicks and route users took to reach their end goal. I also had users complete a system usability survey and provide additional feedback at the end of the test. This helped me understand which improvements I needed to make in order to make the app more user-friendly.

The following is direct quotes collected from the participants of the survey that offered potential improvements.
"The only thing id suggest is, there's no indicator that merch is being sold at first look. To me it makes me think its just tickets. Perhaps something that also says merch is being sold on front page. Other than that, was very easy to navigate!"
"It would be nice is there were a way to edit the cart items quantity within the cart like other store checkouts have."
"Maybe allow an option for continue shopping instead of defaulting to the cart when an item is added. But everything was intuitive and easy to navigate!"

UX Improvments

Using the feedback gathered from the survey, I got to work on improving the lo-fidelity wireframes based on the suggestions and other areas I noticed could be more fluid based off of the participant's actions.
- Users expressed confusion over the main function of the app which they expressed would likely be solved if actual images of products were present.

- Users expressed and/or showed that they wanted to be able to continue browsing before being prompted directly through the checkout process after an item to their cart.
‍
- Users needed a way to navigate back through pages once clicking on an item.

UI Improvements

Now that I've made improvements to the wireframes and my user flow is mostly nailed down, it's time to develop a design system that will be used to design the hi-fidelity prototype.

Final Designs

Using the design system, I built off of the edited lo-fi wireframes to create the following screens from the main user flow of the app.

Want to work with me?

If you'd like to book me for your next project or just have a few questions, fill out the form
on the contact page or send an email directly to
caseymimsgd@gmail.com
Contact Me!
Stay Wild jackalope graphic created by Casey Mims
THANKS FOR STOPPING BY!
LinkedInBehancedribbble
Developed and Designed by Casey Mims © 2024