Ok My Outfit (re-branded as Quinn) offers a catered shopping service and in-person styling advice for all styles and budgets using a subscription-based model. My team and I redesigned the onboarding experience.
The existing onboarding experience was long, tedious and resulted in a high drop-off rate. Our client asked us to simplify it in order to increase sign-ups. They also needed users to fill in more accurate information when completing their profile to best suit their needs.
After interviewing stylists and customers, we simplified the experience by reducing the number of steps in the user flow and showing a progress bar. We changed the tone to something more friendly and inviting in order to keep customers interested throughout the process.
We started this project by analyzed Ok My Outfit’s existing website to understand its flow. We performed this analysis using Nielsen's 10 general principles for interaction design (they're a good rule of thumb for heuristics). We discovered that the current website only satisfied half of those principles and decided to conduct usability tests to find other issues uncovered by the analysis.
We ran usability tests on the existing website to understand where users had issues, where they enjoyed the experience and to understand their behaviors. We tested the website on 6 potential customers and the takeaways revealed similar pain and pleasure points.
We mapped the test results into user journeys to understand how users were feeling during the experience. Their main troubles were with copy that was confusing or vague at times. Users also didn’t feel like they needed to provide that much information for a stylist to shop for them.
Studying competitor’s flows helped us notice where we could reduce actions. We compared this questionnaire to other lengthy forms to learn from them. OkCupid is a good example of a successful long onboarding experience. Knowing where you are in the process and keeping an inviting tone makes it a pleasurable experience.
After sending out a screener survey to identify key users, we interviewed potential and existing clients. We asked them how they felt about shopping
in stores and online and what information they would want to give a stylist in order to get clothing recommendations. We learned that:
• They would give the stylist their style, comfort zone and sizes/fit
• They like to shop for special occasions
• Most of them (not everyone) wanted a friend or family member’s input when shopping
“The stores I go to have really good stylists. They usually ask about the occasion, they see my size and pull stuff for me.”
We talked with Ok My Outfit’s stylists and fashion professionals in stores. We asked them
what information would be helpful when styling a client if they were not able to see them. They need to know:
• Their measurements and comfort zone
• What they currently wear and what they would want to look like
• It would be helpful for them to have a photo
We printed pages from the existing style profile and asked users to:
• Group the questions by category
• Name each category they created
• Put them in an order they thought made sense
We sorted their notes into a table and noticed an overall trend to their groups and order. This helped us decide the order and names for each section of the progress bar we were going to create.
After deciding each section’s name, we sketched ideas for what a default question page would be. We added a progress bar and a skip button.
We designed the wireframes and built a clickable InVision prototype to test it, first at a medium fidelity, then at a high fidelity. We went through 4 iterations (that I won’t show here for the sake of brevity).
We tested our initial design and found that some of the copy still needed to be improved, as it was a major pain point with users. We revised it to carry a more positive tone.
Even after simplifying the original onboarding experience, users still thought it was too long and wished the stylists would meet them in person. We suggested our client give customers the option to schedule an appointment right away if they didn’t need personal shopping.
As a former graphic designer, it’s hard for me not to think about the typography, colors and visual feel of a page. While it is a great skill to have at the final stage, it’s not as important as focusing on the layout and hierarchy in medium and low fidelity wireframes.