Project Overview
Established in 1994, Mirror is a clothing store targeting a budget-minded audience looking for low-cost clothing for any occasion. The quality is good but the prices are low. Their main goal is to make clothing accessible to everyone.
Mirror is a very successful brick-and-mortar chain with over 400 stores around the world in 32 countries. Customer perception of the in-store experience has been cited as well-kempt and clean. Having refrained from investing in an e-commerce storefront, Customers have been asking about it for years, highlighting the convenience of online shopping. Our goal is to refresh their visual identity with a new logo and create a responsive online storefront to increase revenue.
Problem
Mirror is a successful globally recognized clothing chain that has been trailing behind in the online shopping market. They want to build a responsive e-commerce site and refresh their brand identity.
Goal
Our goal is to refresh Mirror’s outdated logo to add more appeal for potential customers as well as create a responsive e-commerce marketplace to boost sales revenue.
Research
Competitive Analysis
In order to build a pleasant and engaging online shopping experience, Initial research entailed identifying user habits, goals, and pain points through competitive analysis, user interviews, secondary research, and direct observation.
Secondary Research
To help me frame the problem more clearly, I conducted research by collecting data on e-commerce best practices and market trends.
FREQUENCY
75% of people who shop regularly, shop online at least once a month
SITE ELEMENTS
Search, navigation and product ratings are the most important elements to online shoppers
SALES PROJECTIONS
By 2021, 54% of E-commerce sales will be made through mobile devices
TECH INNOVATIONS
80% of online shoppers think tech innovations improve the experience
CART ABANDONMENT
Added costs and forcing users to create accounts are the two top reasons for checkout abandonments
FREE DELIVERY
The top reason consumers prefer to buy online is free shipping options
User Interviews
Number of participants: 4
Ages - 25-62
Shops online and in-store frequently
Insights
All participants need to know how their clothing will look and fit. 2 out of 4 participants need clear and prevalent filtering categories and easy-to-find clearance/sale sections. Participants also generally need easy navigation and a clean layout.
All participants desire quality clothing at a good price. Participants generally want easy checkout processes, detailed filtering categories to find specific items, and consistent sizing.
3 out of 4 participants cited not being able to try on garments as their primary frustration with online shopping.
All participants emphasized the importance of sales and clearance sections when shopping online. 3 out of 4 participants felt more inclined to shop if the UI had a clean and minimal design. All participants were motivated to shop online due to convenience and ease of use. Quality and price are generally important motivators as well as comfort.
User Persona
Using the information gleaned from secondary research and user interviews, a user persona was created.
Information Architecture
Sitemap
To guide the construction of the site’s information architecture, A card sorting exercise was conducted with 8 participants. The results of which directed the creation of the sitemap.
Defining the flow
Compiling my subsequent research, I created a user flow and task flow to provide insight into how a user might perform tasks such as searching for an item and adding a product to the cart.
Design
Synthesizing all my research into a clear idea of how the product should function, I set to work on sketching and wireframing key screens for the aforementioned user flows.
Branding and UI
The next crucial step was defining Mirror’s brand aesthetic what the intended to visually communicate to their customers. Based on Mirror’s mission and history, a bold, modern and inviting direction was chosen.
High Fidelity Screens
With the wireframes, branding, and UI elements in place, I designed the high fidelity screens
Usability testing
Participants: 3
Test Subject: High fidelity prototype of Mirror website
Methodology: In-Person observational testing
Insights
Participants found the layout and color choices relaxing and navigation relatively clear
The visual hierarchy was well organized
Participant 3 preferred a more prevalent sales CTA in place of the hero image
All participants highlighted consistency in navigation elements
All participants felt the checkout flow was easy and clear
All participants preferred some form of an order confirmation page
Participant 3 was confused by the lack of visual price reductions on the product results page
Iteration and Implementation
After initial testing, I created an affinity map based on my results to highlight patterns and refine the prototype.
Refined Prototype
Outcome and Findings
Throughout this process, I found I had to alter my thinking process and let the user guide my design process rather than using my biases to inform my process. Form does follow function after all. I am happy with the end result, however, refinements, iterations, and more research could be done to further improve the product.
Next Steps
Iterate and Refine
To refine and improve user experience, I plan to make adjustments to UI elements including hover and press animations, build-out modals such as Promos, Signup, and Fit Attendant, as well as adding a favorite/share functionality.
Further Testing
To further improve the product, I will complete more comprehensive testing with a wider audience for each iteration. Adjust prototype according to new data.