Optimizing Typology‘s cart UX

Back in 2019, my first impression on Typology.com was “Wow”. It still is.

To me, Typology is one of the few brands in the cosmetic industry applying true innovation in terms of UX. Indeed, many large & well-known companies are just working super hard trying to catch-up. I, myself, have encountered this frustration, where innovation was hampered despite significant budget, mainly because of organizational issues. But Typology rocks it !

Overview

The challenge here is to provide, in more or less 7 days, a critical analysis of the cart user experience on Typology, prioritizing mobile.

1. What works for me? What can be improved?
2. Develop a low/mid-fi prototype to solve the problems I have identified.
3. Develop the hi-fi prototype.

And considering the current Typology UX performance, it’s not an easy one.

During this challenge, in order to go a little further, I will consider the critical analysis as my assumptions that I will confirm or not by applying the design thinking process:

1. Critical analysis — which will serve as a basis for discussion.
2. Guerilla research — including interviews, usability tests, competitor analysis & secondary research.
3. Low-fi prototype— which came up from ideation & will go through concept testing.
4. Mid-fi prototype— that includes iterations from the concept tests.
5. High-fi prototype — my work will culminate in a high-fidelity prototype based on all the previous steps.

Typology’s current cart user experience - a process in two steps.

Critical analysis supported (or not) by the guerrilla research

Considering the deadline, I started to write down some assumptions based on my own point of view as an e-commerce specialist & I continued the process with a guerilla research.

1. Therefore, I performed a quick 2-question interview among 3 users to better understand their behavior, especially in the cart. The objective here was to be quite generic trying to catch interesting insights to be prioritized in the cart.
2. Right after the interviews, I asked to those same 3 users to do a usability test.
3. In parallel, I conducted a secondary research…
4. …& a competitor analysis.

This allowed me to gather a lot of information that either confirmed some of my previous assumptions or added new interesting elements. The processing & analysis of all this data enabled me to come up with 9 key insights.

Affinity Diagram

Insight 1: the current two pop-ins — added to cart confirmation & cart— lengthens the customer journey & create confusion.

Assumption: when adding a product to your cart, it doesn’t open the cart itself but a confirmation pop-in that invites you then to “Continue shopping” or “Go to cart”.

• The “added to cart” confirmation & cart pop-ins look very similar.
• When you add a second product you don’t see the whole cart, simply the item you’ve just added, which was a bit confusing to me. I had to perform another click on “Cart” to see my entire list of items.

“I just added another item in my cart but I don’t know if I’m on my cart or another page.” B********.

“So now I’m back on my shopping cart. Am I on the same page? It’s a little different because ….? It’s exactly the same page. It looks the same.” A***.

{Recommendations}

• Merge those two pop-ins to avoid duplicated content & get the user more quickly on the cart.
• Keep a background behind the pop-in to compensate for the removal of the “Continue shopping” CTA & allow the user to leave the cart easily.

Insight 2: there’s too much information in the cart, overwhelming the user & affecting his ability to focus .

Assumption: both the key selling proposition banner & incentive progress bar are powerful. However, I would review a bit the information architecture to optimize both the space & information readability.

For example, the incentives are shown progressively. First, the user is encouraged to purchase more items to get the free shipping. When the level is reached, the progress bar is being updated to push the € left to get a complimentary gift. Then again, it’s updated for a second gift.

On the other hand, the KSP banner is featuring some info that we already have on the progress bar, such as “Free shipping starts at 50€” & “Complimentary gift with every purchase over 75€”.

The usability tests confirmed this assumption:

“There’s too much information.” B********.

“Free delivery, we have a flash info again”. Bo****.

“I’m told I can get a Premier subscription. I “continue without”. It’s a brand I’m just discovering so no, it’s too early. I’m not in the phase where I’m ready to subscribe to a program.” Bo****.

Moreover, when looking at competitors, ⅞ of the ones I have benchmarked feature the progress bar on top vs on the bottom for Typology.

Examples of incentive progress bar at Glossier & Respire.

{Recommendations}

• Merge the KSP banner & the incentive progress bar to deduplicate content.
• Feature it on top of the screen like most of the competitors for better visibility.
• As we will remove the KSP banner, it is necessary to include the shipping reassurance “Your order will arrive directly in your postbox” particularly appreciated by the users, next to the cost line. Adding the delivery time.
• Within the A/B test, set the target to push the premier subscription exclusively to clients, & not prospects as they are in a discovery phase.

Insight 3: there is a need for more relevant cross-sell without being too pushy.

Assumption: the cross-sell is very powerful. But those recommendations are based on what ? Are they best-sellers ? Or related to the actual items added to the cart ?

Moreover, the section seems a bit invasive to me. I would offer a more isolated & discreet one with the possibility to close it.

What about up-sell to promote bigger format when the smallest one has been picked up?

“What I don’t really like about the cart are the recommendations at the bottom. It can be misleading, did I add it to my basket by mistake ? It’s a bit too pushy, commercial… I’m being forced. (…) If it’s a suggestion, OK, but give me the opportunity to close it and now I can’t do that (…) It’s not the time to bother me, I just want to know what I have in my basket, it’s sensitive for me.” B********.

“The recommendations works really well on me but I feel here it’s not related with what I have in my cart. I usually like to complete my order, but here I feel there’s no real connection.” A***.

When looking at Oh my cream, they place the section below & hide it a bit. You have to drag/click on it to extend the whole info.

Oh My Cream way to display the cross-sell section

{Recommendations}

• Replace “Our recommendations” by something more specific such as “Our best-sellers”, “Trending now” or “ complete your (…) routine”, (…) being defined depending on the product added to cart, knowing the categorization by concern have been particularly appreciated by the interviewees. Ex: “Our routine for wrinkles & fine lines”
• Isolate the cross-sell section from the product list, moving it to the bottom of the screen.
• Make the cross-sell section appears after few seconds so the brain of the user understands it’s an additional information & that the products are not actually in their cart. It’s just suggestion.
• Add a cross to allow the user to hide the section.
• Close the cross-sell section by default if sales index is above target.

Insight 4: the user wants to access the total price, including the shipping costs, straight away.

Assumption: currently, the price featured on the CTA (cf screenshot above) is not fully correct as it doesn’t include the estimated shipping price.

Item price at 8,90€ + estimated shipping price at 5,90€ is not equal to 8,90€, but 14,80€.

The user needs to be aware right away of the price & doesn’t want to discover another amount in the next steps.

“The total price is crucial to me in order to check if there is shipping cost I potentially didn’t see before.” B********.

In addition to this, Nielsen Norman Group mentioned in their research for the fourth edition of the E-commerce User Experience report series that shoppers strongly disliked unexpected cost increases during the course of their transactions.

{Recommendations}

• Include the estimated shipping price in the total price from the very beginning.
• Of course, the shipping price depends on the delivery address entered in the next page but smoothing out costs in parallel can be an option.
• Consider the US as a specific market as US customers’ e-commerce mental model includes the addition of taxes & standard shipping charges at checkout.

Insight 5: both cost & time delivery information is crucial.

I didn’t have any specific assumption regarding delivery information as it was perfectly clear to me. However, I gathered a lot of insights regarding this.

“When you buy on Amazon, you know that your order will arrive quickly. Last time, it was a next-day or second-day delivery so super fast.” B********.

“I appreciated the fact that my order arrive very quickly. (…) The delivery time is crucial to me, I can’t wait for it to arrive. 2–3 working days is OK.” Bo****.

“It’s interesting because Typology offers free delivery and direct delivery to the mailbox”. Bo****.

“I’m very pleased with the delivery directly in the postbox information.” A***.

“ I have no delivery time in the cart” Bo****.

{Recommendations}

• Feature the delivery directly in the postbox information
• Add the delivery time.

Insight 6: there’s a need to get one-click checkout options at the very beginning of the checkout flow.

Assumption: regarding the one-click checkout, my assumption was that the one actually featured in the checkout is enough. I didn’t really see the value of adding it in the cart, except saving a click to purchase (which is already a good reason).

However, my research convinced me to reconsider including it from the cart.

“I love the one-click checkout (provided by Amazon), it’s so fast”. B********.

Nielsen Norman Group published an article in which they encourage to offer one-click checkout options at the very beginning of the checkout flow while making sure to repeat them also on the payment page for those users who may have missed them in the beginning.

{Recommendations}

• Add Apple Pay (or paypal) one click-checkout in the cart, prioritizing the most used one.

Insight 7: removing an item is a task that users may struggle to perform.

Assumption: I noticed that Typology forces the user to change quantities to zero in order to delete a product from their shopping cart.

I assume it doesn’t happen frequently but if a user has various quantities of an item that he wants to remove totally, he need to click several times on that “-”.

“It’s crucial to be able to delete a quantity easily if you’ve taken something you don’t want anymore. I may be stupid but I’ve already failed to do this, it’s not always done so well.” A***.

Nielsen Norman Group mentioned that the best-practice was to give users a clear “Remove” link next to each item in their cart. Such links clearly indicate what users can do.

{Recommendations}

• Replace the “-” by a trash icon when the item quantity is equal to 1.
• Include a “Remove” link when the item quantity is greater than 1.

Insight 8: the current non-conventional cart icon creates disturbance.

Assumption: I assume the current cart icon is an aesthetic decision and I personally really like it. However, I am curious to see if a more explicit icon will increase the conversion rate.

“There is a product number in a black circle, but there is no cart icon, it’s weird & not like on other e-commerce sites. It shocks me a bit, it looks more like a message box than a shopping cart.” B********.

In addition to this information, UX movement mentioned that when looking at UX writing, the button label for UK users should say “Basket” instead to avoid confusion.

{Recommendations}

• Replace the current icon by a more explicit one.
• Empty the design when 0 product added to bag. Do the same for the wishlist for cohesiveness.
• Adapt the labels on the UK website, replacing “Cart” by “Basket”.

Insight 9: review the Gift With Purchase module to ease both “select” & “update” tasks

Assumption: I personally struggled a lot to select & update my complimentary gift. I still didn’t really get how it was working. & I was very surprised that any of the interviewees mentioned it. However, I’ll still push this optimization, at least by curiosity, to see how it goes.

Low-fi prototype

Following all the previous steps, I created the following low-fi prototype. Globally, it passed the concept testing among all 4 testers.

Low-fi wireframe made on Balsamiq

The main reactions that came up from this test were:

• There is no relationship between the progress bar & the cross-sell.
• The cross-sell disappears when the first complimentary gift is reached which means that the user needs to leave the cart to reach the left amount to get the second gift.
• The cross-sell still seems generic, it’s not clear enough that it has been personalized based on the item added in the cart.
• There is inconsistency with the one-click checkout options. Apple Pay is the only one-click checkout option featured in the cart but then, on the next page, in the express checkout box, there’s Apple Pay AND Paypal.

Considering those feedbacks, I included the following iterations in the mid-fi prototype:

• Push 2 different cross-sells which switches depending on the sales index. Focus the 1st cross-sell on how to complete a specific routine based on the first product added to bag & focus the second cross-sell on how to spend X€ left to get the second gift, pushing best-sellers.
• Add a subtitle in the cross-sell section to describe better what is this about. Ex: “Complete your order to get the full treatment.”.
• Add both Apple Pay AND Paypal one-click checkout.

Mid-fi prototype

Following the concept testing, I created the mid-fi prototype below & run a usability test among 4 users.

Mid-fi prototype (accessible here on Figma)

Globally, the main feedbacks received during this usability testing were related to the GWP module:

• The old gift is still visible in the background when clicking on “update” — to be removed.
• The number of items featured in the cart icon on top is not considering the free gift — include all items including the gifts.
• The free gift product value is conflicting with the concept of gratuity — cross-out the product price.

High-fi prototype

After iterating, I finally came up with the following high-fi prototype:

High-fi prototype (accessible here on Figma)

Next steps

First next step would be to create a dedicated wireframe for the empty cart & for the promo code.

Then, I would create this prototype for desktop & tablet, taking into account the importance of responsiveness.

In light of the number of changes in this project & considering the sensitiveness of this particular step in the customer journey, I would say that the best way to proceed would be to deliver single proposals, one by one, conducting A/B testing to confirm or not the accuracy of each recommendation.

In a phase 2, next step would be to continue fine tuning the UX based on the available data. By the way, it has not been revealed during the previous tests but I have an assumption about the GWP module which may differentiates itself a bit more from the cross-sell to avoid confusion.

Last but not least, I would define & study the feasibility of a sampling strategy that could enable users to choose complimentary samples in the cart (cf Glossier for example).