Flyout Cart Redesign
It also uses a technology called Fit Finder which combines machine learning algorithms and customer feedback to select the best bra size.
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:
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:
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
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).
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:
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.
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.