ThirdLove is an American company producing and selling bras, underwear, loungewear and nightwear. It was the first bra and underwear brand to offer trademarked half cup sizing and a mobile app allowing women to measure themselves at home.

It also uses a technology called Fit Finder which combines machine learning algorithms and customer feedback to select the best bra size.

Intro

At this time, ThirdLove doesn’t count on a cart page. The only place in the funnel where users make their purchase decision-making process is the flyout cart (mini-cart).

Some usability problems I was able to detect from the get-go:

Big opportunity to improve layout & design details (spacing and visual balance issues, the design doesn’t breathe.

Bundling & free shipping message module could be better

No clarity on how to remove items

Quantity indicator too small and tapping area on mobile is not large enough

Thumbnails are too small and not clickable

Users & Audience

This project considered 5 main types of e-commerce user personas. Knowing the different motivations and habits they have when they visit the website helped me make decisions to improve the flyout cart usability while supporting different users’ needs.

Each e-commerce shopper is unique. Some visit with a specific bra style in mind. Others are deciding what to purchase. Some visit to kill time. So every element of the flyout cart and other core features of the website are important for the site’s success. Different types of shoppers rely on different elements of the site.

We have identified 5 different types of user personas:

Product focused: They know exactly what they want. They are high intention purchase users. They already researched their options. They don’t spend too much time on the site. They want to get what they want FAST.

Browsers: They are leisurely shoppers that browse in a RELAXED way. They love to dream about a future purchase and they spend a good amount of time on the website.

Researchers: They plan to purchase, but it could happen today, tomorrow or next week. They collect info about the right price, right features. They visit the site multiple times, and TRUST is important for them.

Bargain hunters: They want the best deal possible and they spend extra time and money on the site in order to qualify for savings. They need to be able to locate deals easily. Huge opportunity to make a sale & convert them into repeat customers.

One-time shoppers: They may be product-focused, browsing, bargain hunting, or researching. They are often gift-card recipients, gift-card buyers, or gift buyers
They have no intention to visit the site after the initial purchase; they are visiting due to a one-time need. They are not familiar with the site

My Role

I’ve been part of the company as a product designer since May 2018, and I’ve been fortunate to work closely with pretty much every team. Cross-functional collaboration has always been key. I was very lucky to be part of several teams: Product Growth, Marketing, Storefront, and also Checkout.

ThirdLove teams (product & engineering) are divided into pods. The flyout cart redesign project took place as part of the Storefront pod. It’s formed by 3 full-stack engineers, 2 product designers, a product manager, and 2 QA engineers. For this particular project, I was the only product designer, but there was a big design collaboration and the flyout cart design went through several rounds of feedback sessions.

The Product Design team at ThirdLove is part of the Product umbrella: There’s a Director of Product, 3 product managers, and 1 product designer. All of them located in San Francisco. The other 3 product managers and me, are in Cordoba, Argentina.

Scope & Constraints

There were some unique factors for this particular project. Working in a startup environment, the pace is fast and the amount of projects is big. So we had to take an MVP approach, that is to say, the optimal design solution that also included the cart page revamp was taken out of scope and we solely focused on the flyout cart redesign.

The UX Process

The UX process followed was based on hypothesis creation, experimentation, rapid release, and real-time measurement. In other words, I followed the Lean UX approach (which is outcome-based).

Assumptions

The first step of the UX process involves the declaration of assumptions. This was a group exercise that involved some members of the Storefront pod, and the product design team.

I gave the team advance notice of the problem we were going to be taking on to give everyone a chance to prepare any material they needed or do any related research before I began. Some important things I prepared:

Competitor Analysis

Conducting a UX competitor analysis definitely helped me know the market, product, and goals better. I was able to understand the competition, get actionable insights and make recommendations to boost the brand. The key was to understand exactly what we were doing right (or wrong) to potentially create an effortless user experience and a product that people would enjoy using.

My goal was to find out not only the most used design pattern but understand the benefits and cons. I was curious as to what were the best practices in the industry and what features other mini carts had that we didn’t.

Usability Testing

Design Rounds

MVP

Iterations & adjustments

I first run a remote Usability test on Validately, to uncover user pain points in the current flyout cart. I created 2 projects one for mobile and the other for desktop users. The goal was to get qualitative data, so I didn’t focus on the quantitate part since the sample was small.

I had some initial assumptions and from my experience, as a UX practitioner I was curious to verify how users behaved in the following scenarios:

– Adding products.
– Removing items.
– Changing quantity and size.
– Updating the item variation (color).
– Updating the upsell item variation and size.

I also was wondering whether users noticed and understood:

– the bundling message and free shipping threshold banner.
– the total and discount labels.