Onboarding Style Quiz

Onboarding Style Quiz Redesign

Mini & Me is a children’s clothing box subscription service, similar in concept to Stitch Fix. The onboarding style quiz is critical to the success of the business, being the main source for leads and lead conversions. The existing onboarding style quiz had a low conversion rate, and I was asked to try to increase the conversion rates for two metrics, along with updating the look and feel.  

CompanyMini & Me
IndustryRetail/Clothing
SkillsUI/UX Design, Usability Testing
ToolsSketch, InVision
RoleUX Lead

Project Goals

  1. Increase conversion rates in onboarding flow for accounts created and box requests
  2. Visually align onboarding with our recent website redesign
  3. Provide more detailed customer preferences to stylists for better styling success rate, and longer customer LTV

Project Notes

  • The client previously worked with an agency to revamp onboarding and it failed to increase conversion.
  • The previous redesign effort changed everything all at once.
  • The average conversion rate for box requests in onboarding was 3%. The average conversion rate for accounts created was 28%.
Step One

Recruit and test non-customers on the existing flow

Recruited 82 non-customer usability testing participants from Facebook mom groups 

Screener survey for participants made sure there was a diverse range of demographics

Selected 5 participants from different demographics for the existing onboarding flow usability test

Original Onboarding Flow

Heuristic Review

The original onboarding style quiz flow had several usability issues that were apparent even before usability testing began – the most glaring point being that the flow felt like three totally different experiences. Steps 1-8 were mostly consistent, Step 9  was significantly different in style, and Steps 10-13 made a user account menu available which gave users an all to easy way out of the flow. In addition, Steps 12 and 13 had a duplicate success message, when there was still information to enter on Step 12. 

Usability Testing Findings

  • Potential customers have taken other style quizzes which are more in-depth, contributing to  more confidence in other styling services
  • Number of outfits shown aren’t enough to get people excited, users are not spending very long on the website
  • Too many accessories are shown
  • Baby outfits are not shown which leads people to think baby clothes are not offered
  • Users missed the thumbs up and down buttons at the bottom of the screen
  • Black, gray and beige are missing from colors to avoid
Step Two

Redesign the existing flow to visually align with the new website, and fix the end of the flow

Try to get parity with the existing flow

If the design is on par, design can’t be an issue in terms of drop off

Significant changes are needed at the end of the flow to prevent drop off

Facelift Wireframes

Wireframes

Because of the risk level of this project, I opted to begin with only small changes to the flow where absolutely necessary, specifically at the end of the flow.  Instead of showing users the menu to access their newly created account, I eliminated the header on the Shipping and Checkout screens and only kept the step-tracker. 

Other changes included making the hit area and size of the thumbs up/thumbs down buttons larger and more obvious, and splitting Features to Avoid and Colors to Avoid into two screens. 

Another addition was to replay the information entered on the quiz, and clearly state the $20 styling fee that will be charged upon completion of the flow. 

User Interface Design

  • Created more obvious Back and Next buttons using higher contrast colors that performed well with the website redesign project
  • Created custom icons and illustrations to make the flow feel more consistent and to add a touch of friendly whimsy
  • Added three missing colors to Colors to Avoid screen: black, beige and gray
  • Updated the What’s Next intermediary screen to include stepped directions to provide further understanding as to how the service works
  • Shipping, Credit Card, Box Request: removed user account menu from these screens
  • Box Request screen: replayed information to customer, as well as highlighting the $20 styling fee
  • Revamped the success message screen to replay information about what happens next to set expectations
Facelift Onboarding Flow Redesign

3.4% Improvement in Accounts Created

When A/B tested against the original, the “Facelift” version resulted in a significant increase in Accounts Created.  Box Requests were exactly the same, leading to the assumption that the outfit images needed to change to see an improvement in that metric. 

Major reductions in drop off were also made at the end of the flow:

  • 14% improvement in drop off on the Shipping & Credit Card screens
  • 17% improvement in drop off on the Box Request screen
  • 5% improvement in drop off on the What’s Next screen
Facelift Test Results
Step Three

The outfits need work. But what will customers respond well to?

Surveyed 65 moms, a mix of customers and non-customers, and gave them a $20 credit

Survey participants voted on 50 outfits, based on the gender and age of their own children

The outfits were styled by Mini & Me stylists using photos from the product dashboard

Outfits Survey Results

Feedback from Outfits Survey

“I would have rated items of the outfits separate, i.e. I loved the pants but the top was just okay.”

“I often ignored the accessories when looking at the outfit, knowing my kids wouldn’t wear a hat or carry a purse.”

“I generally don’t like graphic tees or ones with sayings. I also prefer a more neutral palette and the majority had lots of colors and prints.”

“I wish I could take small quizzes like this prior to each box I take to give the stylist a better idea of what to send.”

How Many Outfits to Show?

  • 6 outfits (existing quiz) is not enough
  • 4 existing style categories per gender
  • Outfits need to work for multiple climates, seasons, and for a long period of time
  • Outfits need to accurately represent inventory
  • StitchFix shows 28 styles for men, 48 for women
  • Trunk Club shows 20 outfits piece
4 styles x 5 outfits = 20 per gender/age
Step Four

Prototype new ideas for user testing with 15 non-customers.

Incorporate feedback from testing on existing onboarding flow into new concepts.

User test prototypes, iterate based on feedback, test again to create a Build-Measure-Learn loop.

Use the established baseline “Facelift” version as a jumping off point.

Onboarding Outfits

Two ways to display 20 outfits: in a grid format, and one-by-one. The grid won out in usability testing. 

The best of grid and full-image: adding a zoom feature to the grid images allow users to see more detail. 

Final Result:
Increased Box Requests by 20%

I ended up testing 3 different versions of prototypes with 15 users. This final prototype is what went into production, and increased Box Requests by 20%.