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: 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"

Sephora locates the wish list at the top near the cart

Ulta locates the favorites on the bottom menu

Etsy locates the favorites on the bottom menu

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: 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.

Case Study: Shopbop