Ok My Outfit

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.

Ok My Outfit hero image

The challenge

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.

Our solution

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.

Ok my outfit prototype

Heurisitic analysis

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.

Initial user tests

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.

User Test image

Mapping the findings

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.

User journey

Competitive and comparative analysis

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.

Comparative analysis

Getting to know the customers

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

user interview

“The stores I go to have really good stylists. They usually ask about the occasion, they see my size and pull stuff for me.”

Getting to know the stylists

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

Stylist interview

Mapping out our findings

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.

User card sorting

Rapid prototyping

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.

Us sketching Sketch on whiteboard

Designing and testing

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).

And iterating several times

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.

Iterations and changes

Modifying the business model

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.

What I learned

Don’t get hung up in the details when wireframing

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.

It’s ok to reshape the business model if it respects users needs and business goals

We realized that it made more sense for customers and stylists to meet in-person in most cases so we added that option to increase appointment bookings. Everybody wins.