Katy Perry Collection

UX Research + Development

Goal of the Project

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

persona1
Persona 1 - Fashionable Diva

persona1
Persona 2 - Power Shopper
4 Types of Users

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.

Pain points 3: Poor Visibility & Hidden/False Affordances

  • Made the filter options visible to users.
  • Added quick shop, color options to improve browsing experience. Users will be able to preview more product images without going through product detail page.
  • Removed button like sale price tag to prevent confusions.
  • Added wishlist icons on each product image.

Step 6 — Test the Solutions