Case Study: Shopbop

Case Study: Shopbop

Summary

I identified a pain point in the Shopbop mobile app, specifically the location of the saved items list, and then researched, ideated and prototyped a possible solution to that problem

MY ROLE

UX Designer

SKILLS

Wireframing

TOOLS

Figma

InVision

DURATION

2 weeks

About Shopbop

An e-commerce site focused on mid to high end retail for women. Launched in 2000, it showcases new and contemporary clothing through editorial-like lookbooks, curated with lifestyles, events and seasons in mind. I personally browse through the app at least a few times a week along with others, so I have been able to compare and contrast features across the board.

Objective

Addressing the pain point of the placement of the "hearts" aka favorites list, which made retrieval of these saved items confusing and indirect.

Before: Wishlist page
Before: Wishlist page
Before: My Hearts page
Before: My Hearts page

Question

⚠️
Why are there two separate lists: a wish list and hearts?

Business Needs

  • Creating an easier pathway to favorited items would create more incentive for users to continually use the app to browse, save and eventually purchase those items from Shopbop
  • Whilst there are a few other e-commerce sites in this same market, optimizing the mobile app can ensure that users continue to return to Shopbop to purchase items that could potentially be purchased from another retailer.

Competitive Analysis

These e-commerce apps have used a heart icon to locate the "wish list" or "favorites"

image
Sephora locates the wish list at the top near the cart
image
Ulta locates the favorites on the bottom menu
image
Etsy locates the favorites on the bottom menu
image
Asos locates the favorites on the bottom menu

Approach

Problem Statement

💡
Users need a way to easily access their saved items because they have a tendency to purchase from these lists of items when the ideal sale or occasion occurs. We will know this to be true when we see that over time the items that have been saved are eventually moved to the shopping bag to be purchased, completing the circle of browse, save and purchase.
  • I wanted to adapt the two separate pages - wish list and hearts, into one page
  • The challenge was to make these changes without interrupting the entire information architecture of the app
  • It was feasible to both ease user confusion and eliminate friction by following the model of other e-commerce apps already on the market
📌
Adding a heart icon button at the top of the screen menu to the left of the shopping cart/bag
📌
Move the search icon to the left side at the top of the screen menu
📌
Combine features of the hearts and wishlist page into one page: filter/sort, add/move to bag, remove item
After: Mid-Fidelity wireframe
After: Mid-Fidelity wireframe
After: High-Fidelity wireframe
After: High-Fidelity wireframe
  • The wish list feature was in actuality a "save for later" list and moving forward these changes could be made to maintain this feature:
📌
This list could easily be placed at the bottom of the shopping bag page, below the subtotal of the basket.
📌
Placing the saved list under the shopping bag list would be optimal for quicker retrieval of items, acting as a queue or waiting area for the items until the user was ready move it to the purchase area.

Conclusion

I was able to refine my Figma skills and solve this wish list issue by considering both the business needs of the company and creating a better usability experience for users.