Mirror, Fashion E-Commerce
Role: UX Designer, UI Designer
Date: May 2022
Team: Curtis Knecht
Tools: Figma, Optimal Workshop, Whimsical
Overview
Mirror is a fictitious clothing store chain for both kids and adults. They also have different styles-casual, business, sporty, party, and formal. They are looking to take their business online since currently they only have a very outdated informational website that only lists locations, promotions, and a bit of background about the company. They don’t want to keep anything that they currently have. For now, they want to start with a new logo and an e-commerce responsive website where they can sell their products online.
High-Level Goals:
Design a logo for the company that is modern and neutral enough to attract all types of people and styles.
Design a responsive e-commerce website that is easy to use and allows customers to browse through all products and filter by size, color, style, etc.
Design Thinking:
Empathy research is key to understanding the potential users and prototyping is essential to identifying the best solution for the given process before any further investment is made.
Research:
Crafting a Research Plan:
Research Goal:
We want to know what current shoppers value when shopping online so that we understand the priorities to create an engaging e-commerce site. Discover challenges with getting proper sizes to minimize customers going to other retailers.
Research Objectives:
1. Understand how to translate great in person service to an e-commerce site
2. Understand user challenges with finding proper sizes
3. Understand what will support complete sell through of product in warehouse
4. Determine top priorities for ease of use for consumers
Research Questions:
1. What purpose does online shopping vs. in-store serve?
2. What is the struggle finding sizes, i.e., out of stock, no sales help, etc.?
3. What sizes are most challenging to find in a store?
4. What will encourage full sell-through of the products?
Methodology:
• Comparative and competitive research to see what our competitors offer.
• User interviews to see how people are currently shopping online and what they value to save time and find sizes effectively.
• Contextual inquiry to see how users are currently shopping online to gather pain points and what creates user satisfaction.
Conducting Research:
Comparative Research:
To start the research process, I looked into what applications are currently on the market for this type of information. This also allowed the creation of 3 provisional personas.
User Interviews:
Participant Information:
The research was conducted with 3 users aged 20-50 that are clothing shoppers in-store and online. The users were also observed shopping on their favorite clothing sites to gather information on what they found appealing and what was frustrating.
Summary:
All of the participants are looking to find clothing that is of high quality and a comfortable fit. For themselves, the cost is not a priority. The clarity of fit and size is the biggest obstacle to feeling confident purchasing a garment online.
Needs:
• All participants must feel safe purchasing a garment, this can be trying on in person or an easy return policy.
• There needs to be a clear description of the fit, either various models or better verbiage. Customer reviews and uploaded photos support this.
• Methods to streamline and sort items for shopping to save time.
• A clean and streamlined site to allow easy purchases, returns, and free shipping.
Wants:
• Two of three participants would prefer to shop in-store if all sizes were available.
• All three feel that they must try on the garment before deciding to keep it
• All participants put a high priority on return policies when shopping online
• Filters for sizes
• Organized categories for ease of shopping – but not too many layers
Frustrations:
• All three feel that they are unable to find their sizes in-store consistently
• Two of three feel trying on clothing in a store is not an enjoyable experience
• All three feel the fit of the garment they are looking at is not clearly depicted by the retailer
• Every garment, even the same size, fits differently and causes frustration
• Busy websites with a lot of banners are distracting and disengaging
Synthesize Findings:
User Persona:
Catherine does most of the shopping for the household, including clothing. While she would prefer to shop at more fashionable stores, Target has become her go-to spot just because it can save her time and energy getting everything in one place.
Storyboard:
Define Product:
Project Goals
To define the goals for all stakeholders, the following Venn Diagram was created to visualize goals.
Project Roadmap:
Prioritize Needs:
To prioritize user needs and create an MVP, the project roadmap was created.
Top Priority:
The top priority is for the site to have easy navigation to find the garments customers want to purchase. This should include a simple flow to checkout, and clear policies on returns and shipping.
Secondary Priorities:
An easy way to find garment specifications on fit and cut is important to users. Also, there needs to be an opportunity to see other customers’ reviews of the garment.
Nice to Have:
Customers would like a way to search through reviews based on their size or body type. This should also run throughout the site as a filter for body type or size. Customers would prefer to see the clothing on models that are their shape and size.
Information Architecture:
Organization System:
Finding how users want and expect information and products to be organized was the next step in this process.
Card Sort:
Optimal Workshop was used for the following Card Sort. This was to uncover the categories users would expect to see. Cards were created based on some items that were wanted to see and some items from the company inventory. The inventory is highlighted in yellow in the chart. Any clear category delineation has been bolded and underlined. Overall, this activity helped to narrow down a couple of categories but was in line with the comparative research.
Navigation and Search Systems:
Site Map:
Focusing on learnability and usability, the model for this website is consistent with many popular fashion websites.
Sketches:
With the goals of shopping confidence and comfort, the sketching process started with a few iterations on how the landing page would look and feel. The goal was a hover state that would allow a drop-down navigation modal to simplify the filters and sections of the site. The filters will have a focus on body type and fit to ensure users understood the cut of a garment.
Interaction Design:
User Flow:
Wireframes:
Wireframes were created based on research and user needs.
Responsive Design:
Continuing to focus on the user, how and where they will access the site, the responsive wireframes were created.
User Interface Design:
Logo Design:
Looking at the concept of Mirror, a clean and simple logo was created that also has a fun play on the word mirror. With the M “looking” at it’s reflection in the mirror, this image shows that you can see who you want to be at Mirror.
UI Kit:
The UI Kit is clean, simple, and straightforward. The Color pallet is muted and neutral to match the customer base.
High-Fidelity Mockups:
Figma was used to create high-fidelity mockups for the prototype and the ultimate prototype that was utilized for usability testing.
Iteration:
Usability Testing:
The usability testing was conducted over Zoom with the Figma prototype software.
1. Test user flow to find Skinny Jeans and to get to the checkout screen.
2. Test how a user searches for items, either search bar or category.
3. Test if the user tests or notices the “Shop by Body Type” feature.
4. Test if users utilize the Customer Reviews section of the site.
5. Find any challenges or inconsistencies in the design.
Test Objectives :
1. Identify what search options are important to the user.
2. Confirm ease of flow to the checkout screen.
Test Goals:
Participants:
• 5 Users aged 20-50 who shop online for clothing for themselves and others.
Results:
There was a mix of feedback that was incorporated in this affinity map.
Summary:
• 60% of Users navigate through the Navigation Menu using the “Jeans” Button, 40% through Search Engine
• No users chose the Body Type Filter, 80% noticed and commented but none chose
• 20% of Users went to Reviews, all mentioned they usually do when shopping but did not in this flow
• 100% of users completed the flow through to Checkout.
General User Observations:
• All users commented on the clean, neutral design and color pallet.
• All users mentioned the site felt familiar and in line with current retail websites.
• 40% of users noticed the Sale Section first, 60% of users noticed the Hero Section First
Reiteration:
Prioritizing Needs:
Assessing the needs notated in the affinity map, they were placed in a priority matrix to ensure maximum return on investment.
Additions:
With the adjustments made from the user feedback, the final iteration was completed. Here are some of the updates made:
Add “Continue Shopping” to Shopping Bag
Search Engine Update
Edit “Fit” Categories on Jeans Page
Add “Skinny Jeans” Category Page
Add Navigation to “Reviews” on the Product Page
Photography Adjustments
Adjust Body Type to be Filter
You can view the second version of the prototype here:
Next Steps:
After adjusting the design and completing the top priority elements, future iterations will have more functionality. After usability testing for this iteration, other future options may include:
Create a feature that sorts model photography once the size is chosen
Create a User profile Option that saves Body Type and size preferences