Micah's FIT + STYLE QUIZ
Background photo by Clark Street Mercantile on Unsplash
Background + Research
Context
The modern consumer has access to an endless supply of online apparel brands, so delivering a memorable, personalized, and effortless shopping experience is critical for modern eCommerce companies to stand out to their consumer. Quizzes are a fast-growing and highly impactful business method that provides shoppers with a fun, efficient and tailored shopping experience and draws on their personal preferences and characteristics.
The Market
ThirdLove, Warby Parker and Stitch Fix are all well-known online brands that have leveraged online quizzes to help customers find the right product for them - their quizzes tend to focus on three personalization facets: the customer’s size, preferred fit, and personal style.
THE PROJECT
Opportunity Area
Most online quiz experiences probe for answers on only one or two of these personalization facets. Getting answers for all three facets (size, fit, and style) would enable shoppers to find products that not only fit their unique style, but also come in their size and preferred specifications.
​
The Client
Micah is a mock head-to-toe menswear brand that offers hundred’s of refined and elevated apparel, shoes, and accessories on their website. They are a relatively new brand that young professional men (ages 25-35) turn to for workwear and special events/occasions.
The brand is looking to build an online quiz experience that helps their demographic more quickly and effectively find products that match their preferences on all 3 personalization facets to apparel shopping: fit, size, and style.
RESEARCH
Exploratory Consumer Research
I conducted exploratory interviews with 5 men aged 25-35 with salaries over $60K/year to understand shopping preferences and behaviors. Based on these conversations, I determined that the following were needs that the Micah shopping quiz could solve for their target consumer:
-
Providing outfit & style advice
-
Adding variety to their wardrobe
-
Finding clothing that fits properly
-
Offered a convenient & easy way to find products
Assumptions
As a professional with multiple years of experience in eCommerce, there are assumptions I can make about the male consumer:
-
Men shop with size and fit in mind initially
-
Men need more direction on style & outfitting than women typically do
-
Men rely heavily on imagery and outfits within marketing assets to guide their purchase decisions
​
Persona
I created a provisional persona that will serve as the North Star for Micah's Fit & Style Quiz.
Competitive Research
I conducted competitive research to understand what quizzes existed in the market and how they were formatted. Common features across quizzes indicate benchmarks for the feature that consumers may expect.
Building the Experience
Evolution of the style screen
REQUIREMENTS + FLOW
Quiz Requirements
Although this is a mock project, I considered realistic constraints & product requirements. Drawing from my experiences working in eCommerce, the following are important requirements for the quiz:
-
Questions should build on existing product attributes like color, size, fit, and style information
-
Mobile-first design
-
Provide Head-To-Toe Recommendations (tops, bottoms, accessories
-
Include playful UI elements that make the quiz a fun & engaging experience
-
Maintain elevated branding of Micah for cohesion
-
Quiz must provide value & drive conversion
-
Include questions on size, fit, and style for each type of product (tops, bottoms, accessories)
User Flow
To ensure that fit, style, and size were all factored into the quiz experience, I included a full screen for each. Here is the original user flow.
​
WIREFRAMES
I created mobile wireframes with sample question data related to fit, size, and style based on information found on other eCommerce websites. I included test form elements, including drop downs and checkboxes, to match consumers' mental model of an online quiz experience. I also added a progress bar to indicate progress and clear CTAs at the end of each screen to aid discoverability.
MOCKS & USER TESTING
Mocks
Size and fit are related attributes that help consumers find products that match their body shape or type. The original wireframe & flow separated size and fit across multiple screens, which I predicted would increase cognitive load for users since they may need to remember their responded from a previous screen. Before getting this in front of users, I reworked the quiz flow so that size and fit for each category were on the same screen as well as made some UI and spacing changes.
​
The new flow separates screens by product type (pants, shirts, shoes & accessories) and concludes with style and email acquisition.
User Testing
I brought the quiz mocks to an eCommerce Photo Shoot in San Francisco - after chatting with a few men at the shoot, I uncovered some optimization opportunities:
-
Content feels long
-
Some questions are too tall, requiring users to scroll up & down to read it fully - opportunity to shorten/condense to make this more mobile-friendly
-
Unpersonalized imagery - as a personalized experience, men expected that imagery throughout the quiz would be relatively neutral so they could imagine themselves in the clothing. Opportunity to incorporate more off-body imagery
-
Image Format - Fit images would be more powerful with graphics rather than real-person images
-
Add fun elements
​
Final Updates
-
Reduced screen length and copy - created image CTAs, simplified subheader and instruction text, and brought components side by side wherever possible
-
Converted drop-down boxes - eliminated drop-down menus (which I predicted could get very long on mobile) and replaced with an open answer and multiple-choice formats
-
Updated fit imagery - I found fit graphics online for pants (could not find for tops but ideally would have in a final product)
-
Streamlined pagination/progress bar - minimized the number and variability of progress nodes
-
Provided a "back" pathway - added a back button to each screen so users could review or change answers
-
Updated format of style page - converted image-CTAs into squares to optimize for mobile
-
Added Share + Save Your Results CTAs at the end of the quiz to promote engagement
-
Added styling accents - made the quiz feel intrinsically enjoyable through teal accents, no-fill/black outline font for headlines, and loading screens​
Final Product
Prototype
Here is the final experience for the Micah Fit & Style Quiz, live on Invision: https://projects.invisionapp.com/share/QZSKXNB4CDB#/screens
Scaling For Development
This was a design challenge for a brand that sells men's apparel for regular sizes. Here are a few opportunity areas to scale this quiz for other brands with different apparel offerings.
​
Consider desktop & responsive design
Designs for desktop will have more white space to work with - consider adding a light backdrop color to create a more immersive experience on desktop
​
Custom Graphic Images
Most online quiz experiences include custom graphics tailored to their product offering - since this is a design challenge and not going to be fully developed, I used free online images.
​
Genders
If the brand offers both men and women's clothing, two separate quiz experiences will need to be created with gender-specific size, fit, and style options.
​
Inclusive Sizing Flexibility
Depending on the brand's size offerings, there will need to be a "Regular" and "Big & Tall" size offering toggle on each page that includes size questions.
​
​