UX CASE STUDY: ALBUM CHECKOUT FLOW
Merging ease of use, with an artist’s creative vision.
THE CHALLENGE
Design an easy to use website for checking out a music album, whose visual identity is consistent with the artist’s brand’s identity.
-
Product research, user research, insight generation, concept building, visual design, prototyping, user testing.
-
5 Weeks
-
Design an easy to use album checkout flow.
Design a website whose visual design is cohesive with the artist’s brand identity.
Design with a focus on accessibility considerations.
-
Adobe XD, Stark (XD Plugin), FigJam, Adobe Color
RESEARCH INSIGHTS
As this project was a redesign, the first step was an interface evaluation.
3 immediate opportunities that were recognized were:
Current contrast ratio was compliant but could be improved for text readability.
The large image with text, without any alt text made most of the screen inaccessible to screen readers.
The SHOP user flow was password protected and led users to a dead end (despite the artist having active albums, tickets and merch being sold).
Further, a user survey and competitor analysis was conducted to understand how users interact with a musician’s website and the checkout flow. 2 user personas were created based on these findings. Some of the highlights from the research phase are shared below:
Typically two major types of users were identified: fans and friends/family of fans.
The top user pain points were identified as-
Niche product descriptions confuse users about what is being purchased.
Artistic expression takes precedence over ease of use of website.
Websites are not accessible.
DESIGN PROCESS
After identifying my main user flow i.e the album checkout flow, I created a quick sitemap to identify the website hierarchy.
ideation
MOckups and high fidelity prototype
The artist’s visual language played a central role in defining the visual design of the website. An vision board was developed to help define the visual aesthetic and elements of the website. Accessibility was ensured through contrast and color blindness tests, guaranteeing a seamless user experience for all.
The mocks were developed. Then they were converted to high-fidelity prototypes and it was time to test the design through a usability study.
Usability study insights
-
Clear product descriptions and instructions.
Intuitive navigation.
-
Add a way to communicate successful checkout to the user.
Fewer but more directed items in the carousel.
“Our users were fantastic had a lot to say, so we listened!”
To ideate potential designs, I used the Crazy 8’s exercise. For the home page, I prioritized an attractive and clear way to access the store to help engage and prompt users into taking next steps. The asterisk shows parts of the wireframe that made it to the digital wireframes. I used the home page as a starting point and crafted wireframes and a low fidelity prototype.
Finished user flow
“I really liked the cohesive nature of the website. The flow was also intuitive and made the process fun and easy.”
You can watch the interaction here.
IMPACT
Designed an easy to use album checkout web flow with a clear artistic vision that supports accessibility standards.
The success metric I would use to identify the impact would be the conversion rate of the number of users who used the website to actual album purchases.
Future PRACTICE
Something that stood out to me as I worked through my design process was how accessibility standards were met at a very preliminary level. After the project ended, I spent a lot more time learning about how I can adopt an accessibility first approach to my design practice. I realized that it is important to involve the community at the grassroot level so designers can design for real people and have diverse feedback to help make their work, the most inclusive it can be. Moving forward, I am excited to work with a more diverse group of users as well as add a mix of accessibility features to truly design while keeping everyone in mind.