Merch
UX Case study
Conceptual Project
Coursera + Google UX Design Specialization
2 month time period
Product Design
User Research
User Experience
User Interface
Merch is a solution to digitalizing the purchasing of merchandise at an Indie Rock Band show to create a hands free experience for users to fully enjoy the performance.
I was the sole Product Designer in this project. Using the concept of "design thinking" I had gone through the flow of Empathize, Define, Ideate, Prototype, and Test.
Challenge
Going to a gig or concert is fun, especially when your favorite Indie Rock Band is playing. The crowded venue with the low lit atmosphere, people gathered with drinks in their hands. Some say making your way to the overcrowded merchandising table or booth is part of the experience, but what if there was an easier way to get the merchandise you wanted with none of the hassle?
Overview
I had been taught to use Design Thinking to tackle the prompt that was created on Sharpen, a prompt generator. The solution was Merch, an application that allowed users the options to either reserve an order for collection after the show, or to purchase it on the spot for immediate pick up, and even shipping to a home address.
Research
Empathizing with users was the first step in my design journey. In order to do this I came up with a few key questions I had in mind. The questions below were some examples of the first few stepping stones for my research, in order to help me define my project's scope.
A combination of interviews and surveys were done to understand what thought process people had when attending performances or events; While wanting to purchase merchandise from the band or artist. Secondary research from the internet also aided in answering the questions above and gaining deeper insights.
Experience Map
Following the user research that was done, an experience map was constructed in order to give me a better direction of potential problems to solve. This would help guide this projects direction and figure out features or services Merch could offer. Instead of personas, I created an experience map as the users experience with the final product was more important.
Synthesis
The data gathered had given me insights to what I thought were problems that we should solve.
Most users would like to purchase their items without the hassle of queues or worrying about items and their remaining stock by the time they reach the front.
Users needed a way to purchase merch without having the inconvenience of holding onto them physically, in order to fully enjoy the show.
These insights gave way to the idea of including a feature that allows users to purchase or reserve their order, essentially solving two problems with a simple solution.
User Journey
Following the initial research, a user flow was made in order to decide what pages needed to be designed for the lo-fi wireframes. The first user flow had some issues regarding options and the same end point. This wasn't ideal as each option had different details that needed to be shown. A bit of user testing was done which helped formed a much clearer and refined flow, allowing separate screens be designed more appropriately with their relevant information.
Fixing the user flow not only allowed potential users a smooth experience, but helped lessen the work and screens that had to be designed.
Design Concept
Understanding what a commerce application needed in terms of pages was something to consider before any designing could be done. A small competitor (non-direct) audit was done, looking at various other commerce applications in the market. Lo-fidelity wireframes were then sketched, building on these main 6 pages.
I decided on having a clean and spaced out design as it allowed the use of empty space to help users focus on the products. The selected frames above were to be mocked up in Figma.
At this point I had not considered any design elements to separate the different user flows of 'purchase' and reserve', this would be an important step further down the design process.
Lo-Fi Prototype
The first prototype was made after transiting to digital wireframes.
User Testing
I had done a small bit of user testing using the lo-fi prototype. Going into the usability study there were a few things to find out.
Answering these would help us form a more refined structure to the overall product flow and give us a better understanding of what changes we needed to make to the prototype. The series of guided and unguided tests had helped me gather valuable information for improving the flow.
Synthesis
The first round of usability testing and observations resulted in these few insights.
Having a login or signup options was redundant as users would only use this product at events. The onboarding requirement at the initial launch of the app would only be a pain point.
There should be a timer on the detail page for reservation orders.
The choice to make a reservation should be earlier as that was one of the main features of Merch. Having separate user flows would cause less confusion for users and decrease drop-off rates.
Users may want to change their collection options at different points of their journey.
After these fixes and alignments to the prototypes and relevant screens were made, it was time to move on to the high-fidelity prototype and final product.
Branding
Brand exploration was done for the logo design of Merch, ultimately ending up with the logomark that represents merchandise and handles of paper bags that the items are packed in. The visual direction of a trendy & hip fashion brand was used as it tied in with the essence of what the brand wants to be.
A few minor design decisions were made in order to keep things consistent throughout the application. A design pattern was used in order to keep buttons and graphics the same throughout, also allowing an ease of change if needed.
The visual elements of the borders and shadows helped pinpoint users to what was important. Call to action buttons had shadows or added color to prompt users as well depending on which option the user had gone into.
Final Product
Before the final product was finished, iterations were made with the help of more user testing. Ironing out the few design details and hierarchy of elements was important as each aspect contributes to the overall user experience.
Users are given two initial options, both have the chance to be changed to the other through their journey.
The code reveals when the show ends, this places the user on a 15 minute timer to proceed to the booth and make payment.
Each screen has its own color to differentiate the states.
Prototype
Do feel free to try out the live prototype below!
Use this link if embed doesn't work or you're on mobile
Conclusion & Reflection
- The solution of giving users the choice to either reserve or collect their orders enables them to spend less time worrying about being able to buy merch while enjoying the performance.
- Research and user testing helped ensure our decisions were orientated around what users would want or prefer. The valuable insights show how important it is in a product cycle.
- To see if changes and the proposed solution was suitable for this product, validation could have been done through more user testing and using key performance indicators.
The design process and observations from the constant reiteration due to user research and testing showed me a big part of the UX/UI process.
Despite having to work on this project alone, not having the input of a team is definitely a downside. Valuable insights or observations from other sources and research methods would be beneficial to the overall product and design decisions.
