UX / Responsive Website
Brockhampton
As part of my study to earn my Google UX Design Certificate, I was tasked to design 3 projects— the 2nd of which was to build a responsive website.
Embedded Files
The Prompt:
Create a user flow for ordering albums from a trendy musician.
Date
April 2023 - May 2023
Role
UX Designer / Researcher
Notes:
I spend a hell of a lot of time digging for new music and fanboying over the artists I love. So when I got the prompt to develop a responsive website for a musician, of course I had to shoehorn BROCKHAMPTON into it hahaha.
The Challenge:
Many artist websites, although artfully made, often have cluttered designs and have inefficient systems for browsing.
The Goal
Design BROCKHAMPTON’s website to offer easy navigation and exploration of music, which leads to hassle-free purchases of
albums online.
Meet Inah
Inah is a young working professional who spends much of her free time listening to music and keeping up with the latest news on her favorite artists. She follows them on social media and expresses her fandom online. Whenever she can, she likes to buy physical albums and merchandise as they drop as she feels it's the best way she can support them.
Goals
Wants to order physical albums and merchandise from her favorite artists, as conveniently as possible.
Frustrations
Shops on artist's website often have confusing UX.
Artists don't usually keep past merchandise/collections on their shop, hence Inah resorts to third party shops where they are more expensive.
Test Findings
Study Type: Moderated Usability Study
Participants:5
Length: 20-30 Minutes
Location: Philippines
Add-to-Cart Confusion
Users were given a choice to either add the CD or Vinyl copy of the album to their cart. Whichever they went with, the website would take them into an inner page featuring the item they chose.
There would also be a pop-up indicating that it was added to their cart, but users were confused as why there was still an “Add to Cart” button. This confused users as they had to double check if the item was indeed added to their cart.
UI Too Small
Users also commented that some elements were too small to read, especially in the mobile wireframes.
Inconsistent CTA Placement
When users proceeded to checkout, the CTA button would change positions from step 1 to 3. While a minor inconvenience, it did contribute to navigational friction.
Mockups with Revised Designs
Impact
Users shared that the design was very intuitive to navigate through, very engaging with images, and demonstrated a clear visual hierarchy. One user pointed out how excited they would be if their favorite artist’s website were designed similarly.
Learnings
Sometimes it's the minor details that make or break a user experience. When testing and revising designs, you've got to put a lot of love into it until all everything is smoothed out.
Thank you :]
Page updated
Google Sites
Report abuse