UX Design and Children's Book Illustrator, Suzanne Carlson
Design a concert merchandise app for your favorite band - Desktop
Project overview
The product:
We created a Web site to help people navigate through the ordering process for concert merchandise of their favorite band. The Web site makes it possible for users to complete the ordering process as quickly and efficiently as possible. Target users are working adults who want to go through the ordering process as quickly and efficiently as possible.
Project duration:
October 14, 2022 to March 7, 2023
The problem:
We want to determine if users have difficulty navigating product information, such as reviews, zoom-in capability of product photos, ordering and payment process, and how to address those issues.
The goal:
Determine if users are able to go from point A to point B, in a timely manner, when going through the ordering process. If users have difficulty in the process of browsing concert merchandise and ordering, I will adjust the design accordingly.
My role:
My role for this project was lead UX designer and UX researcher.
Responsibilities:
My responsibilities throughout the project included, planning and conducting user research, competitor analysis, creating user stories, personas, storyboards, information architecture, sitemaps, wireframing, prototyping, and conducting usability testing.
Understanding the user
User research: summary
I conducted interviews and created empathy maps to understand the users I designed for and their needs. A primary user group I was able to identify through research, was working adults who want the ability to go through the ordering process as quickly and efficiently as possible. This user group confirmed initial assumptions about ABC customers, but research also revealed that going through the ordering process as quickly and efficiently as possible, was not the only factor limiting users from making a purchase. Other user problems included, access to accurate reviews, and the ability to zoom-in on a product to see the quality of the product.
User research: pain points
Accurate Reviews
This pain point will guide designs moving forward by, providing users with the ability to confirm they’re reading verified reviews.
Zoom-in capability
This pain point will guide designs moving forward by, providing users with a way to zoom-in and see the quality and details of a product.
Enter discount/coupon
This pain point will guide. designs moving forward by, providing users with a clear indication on where to enter discount/coupon codes, saving them money.
Quick checkout process
This pain point will guide designs moving forward by, providing users with the ability to go through the ordering process as quickly and efficiently as possible.
Persona: Walter
Problem statement:
Walter is a single, working father who writes in his spare time who needs a way to read detailed information about a product he’s interested in because the quality of a product is an important factor before making a purchase
User journey map
My goal is to make it where users go through the ordering process as quickly and efficiently as possible. I also want to provide users a simple way of navigating back to previous pages, where needed.
Starting the design
Sitemap
My goal was to make it where users could search for the merchandise they were interested in, easily add or remove items from their shopping cart, and then proceed through the ordering process.
Paper wireframes
Next, I sketched out paper wireframes for different versions of how I might want the homepage to look. I then combined what I liked best, into a refined paper wireframe. My goal was to not have have things look too busy, optimizing the browsing experience for users.
Paper wireframe
Screen size variation(s) Since ABC’s customers access the Web site on a variety of different sized devices, I had worked on additional screens sizes, making sure the Web site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes, made it easy to understand how the redesign could help address user pain points and improve the user experience. I knew I needed to address the need for users to have a way to zoom-in to see product detail. It was also important for users to be able to read product reviews from actual customers who purchased the item(s).
Digital wireframe screen size variation(s)
When working on the different size screens, I moved the secondary images down on the mobile version to make the design look more organized.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow to go through the ordering process as quickly and efficiently as possible. I received feedback on my designs, such as adjusting the search feature to make it less distracting, provide users with larger font size for the main navigation buttons, and clearly showcasing the discount the customer is receiving. I made adjustments to address these user pain points.
These were the main findings uncovered by the usability study:
Search: Once on the search page, users were unsure of which search feature to use to find merchandise.
Homepage: Users had some difficulty noticing the main navigation buttons, along the top and bottom navigation bar of the Web site.
Review Order: During the checkout process, users didn’t initially zoom-in on the discount a customer was receiving.
Refining the design
Mockups
I knew I needed to address the need users had of not being distracted, when searching for merchandise on the Web site. Besides changing the Search Page to an overlay, I also applied the Background Blur feature. This made it where users could focus on the task at hand, rather than being distracted by background words and imagery.
Before usability Study: ___________________After usability study:
____
I knew I needed to address the need users had of not being distracted, when searching for merchandise on the Web site. I not only made the font size larger and bolder but also their added corresponding icons. This made it where users could more easily find a way to search for merchandise and proceed through the ordering process.
Before usability Study: ___________________After usability study:
____
Mockups: Original screen size
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Since users shop from a variety of devices, I felt it was important to optimize the browsing experience for other device sizes, such as mobile so that users have the smoothest experience possible.
High-fidelity prototype
My high-fidelity prototype followed the same user flow as the low-fidelity prototype, and included the design changes made after the usability study.
I adjusted the search feature to make it less distracting by changing it from a page to an overlay. I also made the font size larger for the main navigation buttons, and clearly showcased the discount the customer is receiving.
I turned the search page into an overlay with a background blur. By doing so, I was able to distract from the background, achieving visual focus.
I made the main navigation buttons larger along the top and bottom navigation bar of the Web site, along with corresponding icons. By doing so, I was able to achieve visual hierarchy.
I adjusted the checkout process, by changing the “discount” font thickness and color to red. By doing so, I was able to achieve visual clarity.
Going forward
Takeaways
Impact: Our target users shared that the design was easy to navigate once further changes were made, These changes created visual focus, hierarchy, and clarity.
What I learned: I learned that whether a design change is large or small, it can have a huge impact on the user and how they interact with the design. I dug deep and put myself in the position of using something for the first time, which opened my eyes to challenges users could face.
Next steps
I plan to conduct further usability testing of the new Web site, to see how users interact with the new changes.
After further usability testing of the new Web site, I plan to iterate on new design features that coincide with user feedback that I received.
Let’s connect!
Thank you for your time reviewing my work on the ABC concert merchandise app! If you’d like to see more or get in touch, my contact information is provided below.
