Katy Perry launched her own shoe collection in spring 2017. The target audiences are female between age 18-46. Her products are colorful and bold, as we can see the style reflects on her website. The purpose of the project is to
address issues that violate the design and user experience principles. The redesign is going to improve the experience by using good UX practices. In this case study, I mainly focused on the product listing pages and product detail pages.
Step 1 — Unpack the problem
The three concepts that I chose to focus are affordance principle, icon, and gulf of execution. Not using the
best UX practice could increase the user bounce rate, dropout rate after they land on the page and can’t find what they are looking for quickly or they find the site is hard to navigate.
Step 2 — Define Primary Audiences Segmentation
Step 3 — Contextual Inquiry
5 target users were joined to participate in this session. Participants were considered themselves tech savvy and frequent online shopper.
They were asked to perform following tasks on the existing site.
Find the high heels named “sassy” and complete the add to cart experience.
Browse the site and add any product that you are interested in to the wishlist.
Use filters to find the black high heels named “sassy”
Step 4 — Define the Problem
After organizing my notes from observation and user feedbacks. There were 3 main pain point patterns.
Pain point #1: Hidden/false affordances
Participant: "The design of the sale price tag is exactly like a button but it doesn’t function like a button which is not clickable."
Pain point #2: Inefficient filter, product display page
Participant: “ I had to click on each filter drop down to see what’s in there”
Participant: “ I was not able to view more product images in a preview display unless I click on the image.
Pain point #3: Arbitrary Icons
Participant: "This site uses a lot of uncommon icons to represent something does not fit our mental model. What does that smily face icon represent?"
Step 5 — Addressing Pain Points
Pain points 1: Arbitrary Icons & CTA Buttons.
I added more self-explainatory icons that being commonly used by other sites which fit more into user’s mental models.
The original site was missing CTA buttons which increased user’s cognitive load when they first land the page due to no indication whether or not this image is clickable.
Pain points 2: Poor Visibility on Product Details Page
Made the size, quantity options visible to users and hide the least important ones.