Responsive Web Design for Mirror
Project Overview
Mirror is a clothing store that sells affordable and good quality clothes with over 300 of its stores scattered across the world. Their customers have been waiting for an online shop for years, and Mirror is aware of this opportunity that can benefit the shoppers and their business.
Timeline
3 Months
My Role
UX Designer
Deliverable
Responsive Web Design
Platform
Figma
Problem
Mirror needs an ecommerce website where they can sell and distribute their products nationwide. They need a website that is responsive and accessible from any device, a filter tag with easy access to categories, and a brand that is modern and fresh.
Solution
During the course of 3 months as a UX designer, I designed an e-commerce website that is efficient to navigate for the general audience using wireframes, research and usability testing. My solution has received positive feedback from my audience, who are avid shoppers.
Thought Process
Empathize
My goal for his phase is to understand why users shop online, and what compels them to shop.
I want to know…
What compels users to shop for clothes online
So that I can….
Create a brand and website that fits their needs and expectations
Competitive Analysis
For my research, I looked into competitors with mostly positive feedback from their respective customers.
For direct competitors, I’ve analyzed their strengths and weaknesses. The last two companies are indirect competitors to observe how similar their strengths and weaknesses are to a clothing brand.
-
Strengths
- Offers multiple online coupons
- Offers online in-store pick up
- Promotes sustainability
Weaknesses
- Outdated storefront
- Sales are boldly presented in 50% of the landing page
- Filters are disorganized
-
Strengths
- Responsive design
- Offers student discounts
- Free shipping over $40
Weakness
- Does not specify what the “Divided”category means
- Free returns in-store only; shipping returns are charged
- Quantity not available
-
Strengths
- Promotes sustainability
- Affordable high quality products
-Provides tutorial on how to return online orders
Weaknesses
- Products look too similar from one another - Overwhelming landing page
- “About Us” page takes you to more links instead of the core information
-
Strengths
- Browse function is easy to navigate
- Offers 1 day shipping
- Reviews are helpful and reliable
Weaknesses
- Free shipping only available if subscribed with PRIME
- Cluttered landing page
- Items look similar and have different price ranges
-
Strengths
- Offers online grocery shopping and in-store pick up
- Responsive web design
- Has a store directory and offers coupons for the nearest store to your home
Weaknesses
- Drop-down menu is overwhelming and could be organized better
- Free shipping to subscribed members only
- Have to go thru the trouble of creating an account to purchase items
User Interviews
Number of Participants: 5
Ages: 17 - 27
Based on the conclusions drawn for the analysis, I’ve interviewed 5 users on how they shop online, why they shop, and what compels them to continue shopping. By analyzing their responses, I can determine the relationship between user and product.
After analyzing the user’s responses, I have made key takeaways:
-
All participants want a convenient, easy, and straight-forward site to purchase clothes online
-
All participants have the need to try on clothes to see if they fit or have any defects
-
Most participants do not have any shopping app downloaded because it is not needed and take up storage space
-
Participants are likely to stay on the website if it has an easy navigation
Define
What is the user problem and how can we solve it?
User Persona
I asked people about their online shopping experiences, and received a lot of feedback. I incorporated the insights into the user persona.
Based on the persona, I have concluded what features to emphasize when creating the wireframes.
-
Straightforward Navigation
User would like to have a great experience if the website was uncluttered, and minimal.
-
Organized Categories
Categories and filters need to be organized for the user to find what they need in a matter of seconds.
-
Size Chart
Size chart needs to be visible in the site for the user to see measurements.
User Task Flow
The task flow demonstrates how the user can make a purchase of an item with simple steps.
Ideate
From paper to digital, it is time to create wireframes that emphasize the solution to the user’s pain points.
Sketching Process
I began creating sketches for potential designs of the main page, and chose the first iteration as my starting point. From here, I will make clearer marks on how I want to present important features.
Lo-fi Wireframes
I created digital wireframes for all the screens required to test the main flow. From then, I tested that I was able to complete the primary task flow with low-fidelity wireframes.
Brand/Logo Exploration
Exploring the brand was the fun part. The inspiration for the logo comes from the mirror frame, and the font style represents a professional theme.
UI Kit
For the UI Kit, I listed out the typography, colors, icons, buttons and templates. The colors chosen were determined by the brand’s theme: modern, sophisticated, and minimal.
Hi-Fi Wireframes
I refined the pages in more detail and depth before starting the prototype process.
Prototype
Creating a prototype to test my solutions for participants.
First Iteration of Prototype
The first prototype I put together explores two flows: purchasing an item and signing in.
Test Objectives
Test if making a transaction is straightforward to the test subject
Test if there are any bugs or clunks that can be improved
Observe the user’s actions when they are using the app
Test
Creating a prototype to test my solutions for participants.
Usability Testing Overview
Test Methodology
Remote: Participants are sent a prototype link and will be observed based on via screen share
In person: I will observe their behavior and actions on where they tap to the next step
Participants
Number of Participants: 4-5
Demographic: mid 20s
Tasks, Errands
Ordering a product using the navigation tools
Signing up through main page or checkout page
Browse through categories
Test Goals
To determine where the user can fulfill the tasks in the fastest way possible
To examine user behavior and how it can affect the overall shopping experience
Test the Final Design: Key Findings
Each participant started off by clicking around the website, trying to see which buttons were clickable
● Participants have said the process of purchasing an item was straightforward
● Some UX/UI design suggestions mainly came from the main page and check out page
● Minor details about design kinks involved small icon improvements and creating more pages for the next prototype
I Made Three Major Changes
Hero Image & First Section
By combining the header and top section, I was able to make a more organized and consistent layout by turning this into a carousel.
More Clickable Images
For my participants to feel immersed, they must have more options that they can play around with.
Check Out Page
I separated the steps for the user to process transacting more efficiently and easily.
Final Prototype
Mobile Adaptation
Moving Forward
If I had more time and more participants, then maybe I would have found better results in defining the problem.
I want to investigate more on the needs of a chat box feature, as previous feedbacks have told me to include in my prototype
I would like to research further on incorporating additional features, such as style picking
I learned how ecommerce websites function and the importance of straightforward tasks