eCommerce Responsive Design | Mirror Clothing
a design project rebranding and developing e-commerce website
Role
Sole UX/UI Designer
Skills/Tools
User Research, Information Architecture, Wireframes, Sketch, InVision, Zeplin
Timeline
10 weeks - 20 hours/week
Project Brief
Mirror is a traditional brick and mortar clothing store that has had a lot of success offline, however with the shift to the digital age, they have had increased pressure from their customers to shift online. Therefore, they are looking to revamp their website, and expand the features and functionality of their online store as well as their overall brand.
Challenge
Build a user-friendly responsive e-commerce website
Develop the overall brand to be neutral, fresh and modern
Solution
Based on the research uncovered by secondary and primary research methods, this helped define the target audience and expose areas of improvement, specifically sizing and fit. Through testing and iterations, this enabled a successful user friendly design that resonated with Mirror’s brand and vision.
01. Discovery & Research
Research Findings
Since Mirror is primarily a brick and mortar retailer, they didn’t have a lot of experience as an online retailer. Therefore, I was tasked to build Mirror’s eCommerce website from scratch. As a result, it was important that I gathered market research to understand how consumers were interacting with online shopping. Below are the key points we discovered:
Competitive Analysis
It was also important to recognize what other retailers were doing, and by understanding their strengths and weaknesses, it gave insight into what needed to be included as well as what needed to be changed. Because Mirror’s goal is to deliver a user friendly, responsive site that caters to men, women and children, Old Navy, H&M and Zara were the perfect contestants to compare to.
Interviews
In addition to the secondary research and the market research, I conducted 1:1 interviews with 4 participants who were frequent online shoppers. Grouping the themes gathered from the interviews and connecting the dots with the research from secondary/market research, I discovered that what motivated consumers to shop included:
Free Shipping & Returns
Price & Promotions
Quality and Style
And from that I also discovered what frustrated them the most was sizing inconsistency. Therefore, a major feature that would be required when considering the design of the website was how to solve these issues:
Sizing Comparison
Reviews
02. Define
Persona & Empathy Map
Using the research, the two personas, Katie B and Julie were developed to paint the picture of who Mirror’s target audience is and further define the motivations and frustrations. This helped illustrate why they shop, what they think about when they shop and what ultimately triggers them to make that purchase.
Project Goals
In addition to understanding the users, another aspect to consider were business goals and how these would overlap so that I could prioritize what would make happy users AND stakeholders.
03. Ideate
Feature Roadmap
The purpose of the feature roadmap is to identity which features were critical to include in building the design of Mirror’s site.
User Flow
Once the users and the features were outlined, the user flow was created to show how the user’s decisions and actions in navigating the site through different scenarios.
Scenario 1
Katie is looking in the sale section to find a new blouse
Scenario 2
Julia sees a promotion in her email and clicks into it
Task Flow
The task flow on the other hand was specific to what the user would do given a certain task:
Senario 1:
Katie is looking for a new top that she can wear to work and go out in, but doesn’t want to spend too much, so she goes to the sale section
Scenario 2:
Julia is bored and is scrolling through her email when she gets a promotional email on a sweater sale. She clicks on the link that takes her to Mirror.
04. Design
Lo-fidelity Wireframes
In order get some ideas on paper, I reviewed the heuristics of the competitor e-commerce sites to get an idea of the general design patterns of an online clothing retailers. From there I sketched three variations of the homepage and moved forward with the first sketch. Once I had those on paper, I continued by sketching out the rest of the main pages, before creating the mid-fidelity wireframes.
Mid-fidelity Wireframes
From the sketches, I built out the main wireframes, including how each frame would be on desktop, mobile and tablet.
UI Design
After I created the foundation of the website, I put together some imagery from Pinterest to draw inspiration on for the re-branded logo, the color palette as well as typography. To align with Mirror’s brand objectives, I kept the logo to a simple font and the logo would be used for the favicon. The colors and imagery were selected to be more modern and neutral. Once the UI Kit was put together, these characteristics were applied to the wireframes to give a better visualization of the overall feel of the brand.
Key Screens
Since one of the main pain points of shopping online was sizing, finding a way to help users find their perfect size was an important piece of the design, so the fit calculator was created to give users a better estimate of how their sizing would be for the item they are shopping for.
From research, the reviews section was also something that consumers typically look for when considering their purchases, so I included as much information a consumer could use to push the consumer down the purchase funnel.
05. Iteration and Implementation
High Fidelity and User Testing
Once the key screens were produced, I created a prototype built through InVision and conducted user testing on 5 participants over video to understand how participants would navigate through the site. I added the prototype to Maze, so that I could go back to review how the user interacted with their clicks. This allowed me to identify areas of improvements that I would then go back to update. Based on the user testing, discovered the following:
Success & Positive Feedback
Straightforward navigation and design
100% completion
Fit Calculator was more interactive than most, easy to use
Improvements
Being that users were not frequent shoppers at Mirror, tried to use the Guest Checkout option
Users found that the size selection was confusing when navigating through the fit calculator
Iterations
Drawing from the feedback provided through user testing, revised the prototype to account for what users struggled with the most. This included adding:
Additional screens to the fit calculator selection
Guest checkout option as an additional path for users to navigate through check out
Final Product
Key Learnings and Next Step
Continue to learn from user testing by asking questions regarding the branding elements and layout
While Maze provided great insight into the user behavior, I would have benefited from asking the user “why” throughout the process to get a better understanding of their thought process
Impact
User: By adding sizing estimates to the website, this increases the chances of the customer buying the correct sizes and reduces the frustration of finding the right size for them.
Business: With customers buying the right size, this helps the business reduce excess costs such as shipping for returns and maximize their profits when customers leave happy with the product they’ve purchased and brought home.