Le Tote

Onboarding UX design for iOS & web

Product strategy • user research • UX Design • UI design • interaction design • Usability testing

Company Problem

Low conversion, low retention, high "quick cancels".

User Problem

Onboarding flow confusion (including adding and removing items from box), finding and filtering item confusion, disappointment with product suggestions.

Solution

Removed disappointment with box selection, reduced confusion for finding items, reduced confusion for using custom cart system.

Results

Reduction in cancels after sign up, increase in purchase rate of add-on items, decrease in customer support tickets.

01 - understanding the problem

Identifying Barriers to Retention

Le Tote Background

Le Tote was a clothing rental subscription service. After signing up, users picked clothing and accessories to be shipped to them. After wearing the items, they returned them (or kept them for a fee), and were then able to choose their next box of items.
‍
After completing onboarding, users were directed to browse available items. After customizing their box by swapping items in and out, they could confirm and ship their items.

User Research

I conducted research with new users to understand common pain points.

Pre-filling Boxes & Immediate Disappointment:
Users were told they could choose their items after signing up. While this was true, the company would start by picking items on customers’ behalf, expecting them to understand they needed to swap the pre-selected items out with those of their own liking. Users found it confusing to be told their “first tote was ready to customize”, while looking at a cart already full of items they did not choose. They also disliked the items chosen for them by Le Tote, leading to immediate disappointment with the service.
Swapping:
New users had to learn that in order to add items to their box, they needed to swap another item out, instead of adding or removing items like on other sites. This swap mechanic wasn’t intuitive and took time to learn.
Access to Cart:
There was no cart icon in the navigation. The only way to view the items you had already chosen was to actively be swapping a new item in.
Navigation:
The navigation disappeared when looking at product pages. If a customer wanted to navigate to a different section of the site from a product page, they would first need to return to a browse page they had navigated from, making it much more difficult to find new items.
iOS Design:
Specifically on iOS, a user could only view one item at a time in their cart, which was frustrating for plans with large amounts of items.

Old design: Post-checkout users were shown items they didn't like and it was confusing how to change them, there was no navigation on product pages, no way to see what was in your box at any time, and there was a high learning curve to the "swap" item system.

Old design: On iOS, the process was even more cumbersome as users had to swipe through each item in their box individually before they could change anything.

02 - Developing the solution

Design & Test

Design Goals

The user research revealed many points of confusion, which allowed for significant exploration. Because much of the confusion revolved around the “swapping” mechanic and other non-standard experiences unique to Le Tote, I wanted to incorporate common e-commerce patterns to reduce the learning curve of the product, including updated navigation.
‍
I also wanted to remove the disappointment many users felt after having items they didn’t like chosen for them, and explore ways of incorporating interactions users liked about other services— such as having a “maybe pile” and easily adding extra items to their carts.
‍
While removing swapping and replacing it with adding and removing was an early idea that seemed like an easy win, I also had to make sure it was clear how many items were included in the user’s plan, as well as when their box had enough items in it to ship.

User Testing

Multiple rounds of designs were created and iterated upon based on user testing results. I regularly met with stakeholders and team-members to address concerns and incorporate feedback from across the company.

Examples of early wireframes.

Examples of early screens used in user testing prototypes.

03 - The End Result

Re-imagined First Box Experience

New Designs

Reduce Cart Confusion:
 Instead of having an always full tote, the new design allows for an empty cart state. New users now start with an empty box, while existing users can toggle pre-filling boxes on or off. This matches common cart patterns, significantly reducing usage confusion.
Reduce Plan Confusion:
 A certain number of clothing and accessories are included with a user’s plan; these items are now represented as empty, numbered slots in the cart. This makes it clear which slots need to be filled before the items can ship.
Use Common Patterns:
 The swap mechanic was removed. Customers now choose items like they would on any other e-commerce experience, by adding and removing products. Also, it’s now much simpler to add items on top of those covered by the user’s plan, and a price total is now shown before shipping.
Simplify Navigation:
 Navigation is now consistent across all pages, including a new cart icon that allows users to see what’s in their box at any time. Add-item notifications were also added to make it more clear what action a user was taking.

The new cart made it very clear how many items were included in a plan, how full the box currently was, and made it easy to add more items, including on top of their plan amount.

The new designs had a consistent navigation across the experience, including a cart that could be accessed at any time. Interactions were added for choosing items, and settings were updated to support new features.

04 - elevating the experience

Interaction Design

By adding a new cart system, the experience became much easier to understand and simplified the flow significantly.
‍

Users could now open a cart, add & remove items, navigate from the cart and product pages, easily add extra items, while understanding exactly what was included with their plan and when they could ship their box.
‍
Both the mobile web and desktop versions are shown here; iOS was designed to work exactly the same as mobile web.

Adding an item to the cart on desktop.

Adding an item to the cart on mobile.

05 - Results

A Win for Users and the Business

Data Outcomes

Users were no longer disappointed with what was selected for them, and could easily pick and ship their first box.

"Quick cancels" reduced by -5%
Help desk tickets on choosing items reduced by -65%
Visits to FAQ pages on how to choose items reduced by -78%
User disappointment in their first box items reduced by 100% (this frustrating "feature" was removed)
Extra items added to boxes increased by +93%
Retention increased by +4.3%

Allison Hughes