Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now


The New Shop Experience


Lead Designer

Project Description

This project encompasses lots of different features I worked on at Blue Bottle Coffee, which helped to optimize the shopping experience. After doing a site audit I found that ∼60% of our total traffic was through mobile. Therefore, I focused on optimizing the mobile shop experience.

Project Goals

  1. Improve mobile conversions
  2. Standardize the way we displayed products
  3. Add pricing
  4. Improve mobile bounce rate

Previous Designs

With no pricing on the shop page, customers were forced to click into each product to get details such as: if the product was in stock, what sizes and grind types were available and even what type of coffee it was (blend, single origin, espresso or decaf). All of this made for a less than ideal shopping experience for our online guests.


I started these optimizations by updating and standardizing the way we displayed our product cards. I explored tons of different solutions to try and solve the issues mentioned above. After testing the most popular designs with users, I ran several feedback meetings where I posted my designs on the wall and had developers, stakeholders, product managers and members of the creative team vote on their favorites.

Next, I designed multiple ways to display the filters on our shop pages and tested them with users to understand what they were expecting and what was working the best.

High Fidelity Designs

Once we all agreed on the product card style, I started to carry out the rest of the designs based on those cards. In addition to the shop pages, these styles were going to be used for recommended items throughout the flow as well as trial and subscription flows.

The next major update I made, was to our Shop All page. Instead of having the full catalog of coffees and products we offer on our site, I updated the design to highlight a few items per category. This also provided the copywriters more space to talk about our one-of-a-kind products.

The last major update that was made to the shop experience was the addition of filtering which was a major undertaking for the digital team. I was responsible for building out the internal interfaces that allowed team members to add characteristics to products and then assign them to certain groups. In addition to designing this interface, I worked with our coffee and creative teams to decide what filters we should use. I ran user tests to determine which filters were the most helpful, and which ones they found to be intimidating. I also designed the external facing interfaces and interactions, which included mobile and desktop versions of the following: default and active filter states, empty states, filter bar UI, interactions for adding and removing the product cards, and more.


We learned a lot about our online guests through A/B testing the product cards. There was a slight dip in conversions from not logged-in shoppers, when the price was displayed right away. The hypothesis from this was that the higher price point for coffee was driving them away sooner instead of having to click into each product to see the prices.

However, of the users who clicked into on a product, the conversion rates (desktop and mobile) increased by 34%. From this, we concluded that if a guest is able to understand our pricing and offerings earlier on in the funnel, they are less likely to drop off and will ultimately complete their purchase.

Lastly, the filters launched in early November so it is still too early to tell how they are doing with statistical significance.