Customized merchandise enables fans to feel more connected to their favorite artist, and for the artist to increase their sales. However, the checkout process for customized merchandise can be confusing and off-putting for customers, leading to abandoned carts, and lost sales.
The Problem
Create a customized merchandise flow for the fans of Marina that is easy, fun, and makes them feel more connected to her.
The Goal
Client
“Marina de la Mer” an independent music artist
(Google UX Design Certification Project)
Project Duration
January 2023
My Role
UX designer leading the Marina de la Mer website design
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design
User Research: Summary
In my research, I discovered that many target users purchase their favorite artist’s merchandise in order to invest in the artist, show their love for the artist and to feel even closer to them.
However, many users feel that the process for purchasing merchandise on artists’ websites doesn’t make them feel like they are part of something special. In addition, they find the checkout process overwhelming and confusing to navigate.
Based on my research, I created the Persona of Lee, a busy medical worker and Marina de la Mer fan.
I created a User Journey Map of Lee’s experience using the site to help identify possible pain points and improvement opportunities.
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Wireframes
Paper Wireframes
Next, I sketched out paper wireframes for the desktop website, keeping the user pain points in mind. I starred the aspects that would optimize the experience for users.
Paper Wireframes screen size variations
Because Marina’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Lo-fi 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.
Prioritizing visual element placement on the home page above the fold was a key part of my strategy.
Low-fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from users. I made sure to listen to their feedback, and I implemented suggestions in places that addressed user pain points.
Refining the Design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. This included turning the customization box into two more specific boxes.
before usability study
after usability study
To make the checkout flow even easier for users, I also improved the layout so that the entire checkout process and all buttons took place above the fold.
Mockups: Original Screen Size
Mockups: Screen Size Variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
View the Marina de la Mer high-fidelity prototype.
TAKEAWAYS
Sometimes, when it comes to choice for the user, less is more
The needs of the user should always come first, and sometimes even a small design change can have a huge impact on usability
Our target users found the design intuitive to navigate through. The custom merch made them felt more connected to their favorite artist, and they enjoyed the simplified checkout process.
It’s crucial to include accessibility considerations in every step of the design process. For this project, they included: using contrast checker to ensure all color combinations passed Web Content Accessibility Guidelines (WCAG) standards, using headings with different sized text for clear visual hierarchy, and using landmarks to help users navigate the site, including users who rely on assistive technologies