*Summer 2017, I chose to work at ThirdLove through the NEA Design Fellows Program. Ah, you might say-- a bra company? What a deviation from what Cheechee usually does! That is true, I've had a pretty tech-heavy undergraduate career, from the likes of software giants like Adobe to entertainment-tech companies such as Disney. Yet I saw this as an opportunity to learn as much as I could about scaling an e-commerce business, to tap into my previous internship experience within data driven conversion optimization + design, and to actually be able to move the needle in an impactful way-- all while under the tutelage of one of the greats himself, Albert Lee (NEA Design Partner). You can ask me more about it in person!*
As an NEA Design Fellow, I had the opportunity to work at one of their portfolio companies, ThirdLove, as a product design intern. ThirdLove's mission is to empower women to #breakthemold. By helping women find their best fitting bra, ThirdLove hopes to give women the confidence to be their best selves.
ThirdLove prides itself on the fit of its bras, and the seamless feeling of wearing one of their bras. However, their shopping experience-- in particular the shopping cart experience-- was clunky and did not fit the brand standards. In addition, there were business needs that our current cart did not fulfill.
Upon the first two weeks of joining ThirdLove, I embarked on the journey to ease pain points throughout the shopping experience, starting with improving the cart experience, whilst paying heed to the business interests at hand.
Business Goals: How may we increase conversion + increase AOV (average order value) across the site?
Customer Goals: How can we smooth out friction points and increase customer satisfaction?
I utilized Heap’s funnel analysis report (alongside our data scientist) to analyze following data over the most recent 3 month period. As we were particularly interested in lifting the conversion rate, I dug specifically into a specific conversion flow across the site: the purchase funnel.
The purchase funnel can be broken down into a set of four key actions, as seen below in the diagram. (Click checkout refers to the current CTA on the flyover cart, which pops up every time a user adds an item to their cart.) I’ve segregated the traffic between mobile and desktop-- an important distinction because mobile suffers from smaller screen real estate, yet constitutes nearly 70% of our traffic.
As can be seen in the graph above, mobile sees less conversion on all three major friction points. Yet what was most interesting was the second friction point: mobile experienced a 41.28% rate of success from “add to cart” > “click checkout”, whereas desktop users had a much higher rate of 65.09%. This discrepancy in success rate was quite strange, as the current cart design was uniform across desktop and mobile (no scaling). This led to the first discovery: The shopping cart may be causing friction among users, especially those on mobile. Overall, we would want to boost conversion on both mobile and desktop, but give more emphasis to a mobile-first design, as the majority of our shoppers were on mobile.
Naturally, quantitative data has limitations. To further understand what issues may actually be causing users to abandon cart after investing time in adding items to cart, I dug into customer support tickets. Some common themes that occurred through my discussions with CX included:
1) Shoppers added a bra to their cart, but later decided the color wasn’t what they actually wanted. There was no easy way to edit colors of a certain style of bra within their cart. Thus, shoppers had to resort to clicking out of the checkout page, return to the homepage, and search for the bra they wanted all over again. This took them out of the funnel (especially for first time buyers), and distracted them from completing the purchase.
2) Shoppers easily got stuck on not knowing how to exit the cart nor edit/remove items from their cart, because they couldn’t find where to perform such actions. Since the cart would flyout automatically upon each item add, shoppers often got stuck and couldn’t exit the cart. This in part had to do with the color palette used by ThirdLove, which did not have great contrast according to WCAG standards, and would be very faint on less high resolution/ smaller screens.
In addition, I also got new employees @ThirdLove to walk me through how they would navigate ThirdLove's shopping experience. This was particularly helpful-- by recording their interactions with the site on mobile in person, I was able to ask follow up questions on points where they got stuck and create a wishlist of features they desired.
Below, I've distilled my findings from both qualitative and quantitative research into a flowchart, with the major friction points highlighted. With 8+ friction points, this experience definitely could be improved.
After gathering data on what the perceived problem was, I attempted to understand the shortcomings of the current cart through performing a heuristic evaluation of ThirdLove's existing cart, and also researched what UI patterns forward thinking e-commerce sites employed for a friction-less shopping experience. Below, I've highlighted a couple of design inconsistencies in ThirdLove's old cart.
To run a low level test to see whether a visual uplift would help with conversion, I ran A/B tests on whether the shopping cart icon itself contributed to clickthrough rate. Here are a couple of iterations on the icons I created.
To help determine the hierarchy of content, I used low fidelity wireframes to place in the blocks of content. I also iterated upon the hierarchy of each individual list item, which you can see below.
I deployed prototypes for both internal and external user testing. Internally, I worked with new employees to iterate quickly upon my first couple of low fidelity prototypes, eventually moving into higher fidelity mocks and improving upon each feedback session. I eventually brought this to an external panel of 8 users, who performed a series of tasks while their mobile screens were recorded through Validately. The full user testing script is available here.
The final design came to being after numerous iterations upon each user test, a pixel perfect review with my mentor, and engineering scoping of feasibility with both engineer leads and Product Managers at ThirdLove. I've included a video of a walkthrough of key actions that could be taken from the cart, as well as the key screens from this interaction. The full InVision prototype is available here.
This was only my first project of the summer, but I've already learned so much about pixel precision and working in an e-commerce startup. This project will be pushed into production in the next couple of weeks, but for now, I'm working on some more exciting projects! To view all the pixel-perfect screens from this prototype, please contact me.
I've also linked my interview design challenge here. Feel free to contact me for more details on what else I'm working on this summer!