Humanizing Redenim’s Onboarding Process.
About the Project.
Redenim is an Austin-based PaaS (Pants as a Service) startup that helps its users find jeans that actually fit. (What a concept!)
In order to receive a perfect pair of jeans, users need to fill out a style questionnaire with detailed (and accurate) information about their measurements and style preferences. My team was tasked with redesigning this style quiz for desktop, with the overarching goal of creating a friendlier, more human experience.
Users were dropping off part way through the original style quiz because they were filling out a long form with no clear sense of what would come from it. Our challenge was to design a friendlier, more comfortable onboarding experience.
The original style questionnaire was created with Typeform (see above). Though this tool is certainly friendlier and more human than a typical static form, Redenim needed a design update to: 1) Establish and build trust with its users, and 2) Better position itself against competitors such as Stitch Fix, Trunk Club, and ThirdLove.
Our hypothesis was that we could build trust, help users feel more comfortable putting in accurate information, and set clear expectations if we took a more gamified or conversational approach.
So, how might we...
Create… a friendlier onboarding experience
For… women in their early 30s
To… help them feel more comfortable offering up sensitive, personal information such as size and weight
And improve… user satisfaction and trust with the Redenim brand and its entire onboarding experience.
1. Competitive Research (+ Analysis)
I went through the onboarding process for three of Redenim's competitors: Stitch Fix (general clothing), Trunk Club (general clothing), and ThirdLove (bras). Below are my takeaways from each experience.
Progress bar: Clear [clickable] sections and progress indicators.
User-friendly navigation: Users have control and can easily navigate between questions.
List format: Users fill out a form with their personal information and style preferences.
Contact information upfront: Asks for name and email (or Facebook login) upfront.
Error messages: Users are unable to skip required steps.
No progress bar: Users have no idea how far along they are in the onboarding process.
Poor navigation: Users are unable to see next or previous questions.
Slideshow format: Users answer one question at a time.
Contact information later: Does not ask for name and email upfront.
No error messages: Users can skip steps without consequence.
Progress bar: Has a progress indicator, but no clickable sections.
User-friendly navigation: Back button, simplified navigation, and prompts to continue.
Slideshow format: Users answer one question at a time and are unable to advance until they've answered a question.
Conversational copy: Clever messages in between questions builds trust with users.
Contact information later: Does not ask for name and email upfront.
2. User Research
To get a better sense of Redenim's current user base, I created a survey in Google Forms and sent it to Redenim leads (people who filled out some of the quiz, but never finished) and current customers (people who have actually purchased from Redenim). We received 25 responses, which helped shed light on a few glaring issues. Keep scrolling to see data and a few anonymous quotes that came from this research.
This data clearly shows that users have a hard time finding jeans that fit. Luckily, the data also showed that users are generally willing to do some upfront work (take their own measurements, provide personal information, and receive constructive criticism) in order to get the right fit. The goal, then, was to design an experience where users would have confidence in the onboarding process and trust that Redenim would deliver on its promises.
3. Initial Sketching and Ideation
Initial sketches were very visual, included a progress bar, and focused on one slide at a time. We did make some tweaks after receiving feedback from user testing (during both low-fidelity and high-fidelity phases), however the fundamental design you see in the sketches below remained the same.
4. Low-Fidelity Wireframing
Below are some low-fidelity wireframes I created based on team discussions and sketching sessions. I designed these desktop screens in Sketch and then turned them into a quick prototype in InVision to prepare for usability testing.
5. Usability Testing
In-person usability tests of the low-fidelity prototype revealed a few complications. The biggest issues we had were with connecting the onboarding process from the homepage all the way through the customer profile at the end of the quiz.
Though I personally focused on the style questionnaire for this project, it's important to take a step back and assess whether the user experience is consistent from first to last touch. Redenim's onboarding process technically begins when a user reaches the homepage, and it ends after they've explored their customer profile.
Since the onboarding process obviously wasn't seamless for users during testing, we went back to the drawing board (literally) to work out some kinks before jumping into final UI design.
Here were a few iterations we made due to user feedback:
- Signup CTA on the homepage needs a password section
- Rework certain language in the quiz (for example: add more description to pricing)
- The user's name should be pre-populated on the address forms
- Change the order of address and payment sections to Shipping>Billing>Card Info (it's currently very jarring)
- Add a section to the customer profile that allows users to change their email and password
- Add two separate address edits in the customer profile for shipping and billing
6. High-Fidelity UI Design
Finally, we've arrived at high-fidelity mockups for Redenim's style questionnaire. I designed these desktop screens in Sketch and then turned them into a prototype in InVision for additional usability testing and client review.
Here's what I focused on to address users’ pain points:
Introduction with clarifying information so users will understand how Redenim works.
Simplified navigation with options to advance forward, backward, or home.
Status bar with clear sections to show users there is a light at the end of the tunnel.
Encouragements with friendly copy to help with branding and building trust.
Visuals to keep users interested and engaged without needing to reach much.
- Illustrations instead of photographs to avoid feelings of comparison or self consciousness.
- Clickable question mark icons to clarify any complicated questions.
- Options for users to pay now or save their information and add credit card information later.
- Congratulations message at the end of the quiz with CTAs to continue exploring.
Test again, once the design is live.
I'd suggest implementing software such as FullStory to see how leads and customers are taking to the new onboarding process. Does everything make sense? Are there any points of confusion or frustration? If users are having trouble with any part of the design, it's important to pivot and make changes quickly to avoid dropoff.
Pay close attention to customer data and user feedback.
Are customer support calls and number of sales going up or down? Use this as a gauge to tell if the design is working. Take any user feedback from support calls, emails, or social media and consider them for future design iterations.
Seen enough? Let's chat.