Background
Mirror is a very successful brick-and-mortar clothing store. With a global chain that consists of over 400 stores around the world in 32 countries. Mirror provides a wide array of fashionable clothing for men, women, and children of all ages. CANVAS is part of a house of brands for Mirror. With the opportunity for sales being huge online, Mirror recognized the need for expansion into the digital space. CANVAS is reevaluating the supply chains and processes through which clothing gets made, as well as shifting sales to e-commerce platforms; focusing on what’s now known as “work-from-home” wear.
In addition to this, CANVAS targets a niche market that is not available in the fast-fashion/retail world. As the first entry advantage, we have a blank canvas to create a storyline that promotes BIPOC and inclusivity.
Role: UX/UI Designer, UX Researcher, Branding, Project Manager
Timeline: 4 weeks/20 hours per week
The Challenge
How can we help Mirror reach a higher audience with a website?
The Proposal
Our goals and objectives for CANVAS are to create an easy-to-use responsive website that allows customers to browse and filter through products easily, highlight/promote collections with our partners, and designing a brand system for the company that is modern and neutral enough to attract all of our customers.
4 Step Process
1.Empathize 2.Define 3.Ideate 4.Prototype & Test
1. Empathize: Gathering Insights & Understanding the Users
Research Goals
1. To study and discover the differences in potential/existing customers’ common shopping behaviors, habits, motivation, and preferences when shopping online and in stores. Research current market trends of online clothing stores and what is currently working for other e-commerce companies as well as competitors.
2. Find the negatives and pain points of customers that shop online.
3. Identify features CANVAS customers need and want to provide a good user experience while maintaining business goals.
Market Research
With lots of online retailers in the market, it will be important to do thorough research on what is working and not working with other online retail stores. This can help identify issues as well as provide data on what is successful with users.
Results
- An estimated 1.8 billion people worldwide purchase goods online (Statista,2018).
- 63% of shopping occasions start online (Thinkwithgoogle,2018).
- According to (Statista, 2019) 63% of cart abandonments are due to extra shipping costs.
- Chatbots improve shopping experiences. Helps with giving customers the feeling of personal attention while allowing them to communicate with thousands of customers. The study found 60% of customers report preferring having websites with Chatbots to answer simpler questions.
- Mobile shopping is on the rise. Statista estimated in 2019, that by the end of 2021, 73% of eCommerce sales will take place on a mobile device.
Provisional Personas
Based on the secondary research I created four personas as hypothetical users for Canvas.
Competitive Analysis
One of the goals of the research is to look for opportunities. I found that it would be useful to understand what our competitors are moving towards. By doing a competitive analysis we find what is working and not working and spot current trends in the market. I did an analysis on Canvas’s top 3 competitors and listed their strengths and weaknesses below.
User Interviews
I interviewed 5 participants ages 19-50 with diverse backgrounds and genders.
Summary:
Customer reviews and pictures are a priority when it comes to online shopping.
All participants agreed that easy navigation and filters are musts.
Sales and coupons motivate the customer to visit the website and purchase an item.
Inaccurate descriptions and difficult return processes are common pain points amongst customers.
2. Define
User Persona & Storyboard
Using the primary and secondary research, I created a User Persona Leah that is representative of Canvas’s target audience.
Categorization: Card Sorting experiment using Optimal Sort.
Overview
Total Participants: 7
Gender: 3 Males, 4 Females
Age: 20-50
All based in the United States
3 have previously participated in the User interviews.
All participants have shopped online for clothing.
7 out of 7 participants completed the study.
It took an average of 8m 31s to complete the study. The longest time being 28 minutes and the shortest being 4 minutes.
My participants created a total of 46 categories with a median of 7 categories each.
Summary findingsCommon categories <70% included: accessories, activewear bottoms, jackets, loungewear/nightwear, tops, and basics/shapewear.
Common categories <70% included: accessories, activewear bottoms, jackets, loungewear/nightwear, tops, and basics/shapewear.
1 participant uniquely categorized the clothing based on things they would wear, not wear, and would consider wearing.
1 participant categorized the clothing based solely on activity.
Sitemap
Based on the card sorting results, this sitemap helps the users understand how information is structured on the site.
3. Ideate
Task Flow & User Flow
Using the Sitemap as a guide to determine how users would complete tasks. I made a Task flow, which is a linear path of steps the users will follow to complete a task. Following the Task Flow, I created a User Flow that takes the user from their entry point through a set of steps to purchase a product.
Wireframes
Low-Fidelity
Based on my research and referring back to my sitemap, I first sketched out my low-fidelity wireframes on paper and chose these 3 to present.
Responsive Wireframes
User Interface Design
After building the responsive pages, I then made a UI kit that best represented the aesthetics and mood of Canvas: Neutral, Warm, Inviting, and Modern.
The Logo was designed after several sketches and iterations.
High-Fidelity Designs
4. Prototype & Test Findings
Test objectives
- Track and observe how users navigate the site to complete tasks.
- Understand user’s experience and understanding of flows.
- Identify features/design elements that users find challenging or obstacles the user will face from completing the task easily.
- Identify areas of confusion or error for the user.
Iteration and Implementation
Participants:
- 4 users
- All genders
- Age 22-50
- Have shopped online before
Goals:
100% Completion rate
100% Error-free rate
Affinity Map
Next Steps …
I have learned a lot from the feedback I have received during the user testings. The next steps are to implement the feedback and continue working on the other pages. Going back to Canvas’s goals, I plan to dive deeper into developing the feature where Canvas can be a platform for other small sustainable and BIPOC brands. I will then use Zeplin to hand-off my finished prototype to the developer team.