E-commerce Website | Mirror
Mirror is a successful clothing brand that wants to bring affordable clothing to any occasion.
They saw the opportunity for taking their successful offline brand into an E-commerce setting. Mirror wanted to bring their vision of bringing clothing accessible for everyone while having good prices and various styles.
Roles
UX Researcher
UI Designer
Interaction Designer
Programs Used
Google Analytics
Adobe Suite
Figma
Timeline
4 Weeks
What do the people currently do and like?
Device/Interface
-
The majority use their computers as the primary mode to purchase clothing
-
The user uses their phone for quick items because it’s easier.
Lifestyle
-
Most buy for how they want to portray a particular lifestyle.
-
Others look at how the clothing is marketed. Is it sustainably made? Did the animal have a good social network?
Price to Value
-
All participants expressed that they look for clothes that have an excellent price to value.
Realistic Sizing Guides
-
Most interested in having real reviews or actual models in a video walk around to show the exact fit.
What are our competitors doing & HMW learn from them.
H&M
Strengths
-
Clean and easy to use
-
Sustainable products
-
Empowers community
Weaknesses
-
Font and weight are inconsistent
-
Images are too large, can’t see the text, making for more scrolling
Gap
Strengths
-
Has a large variety of clothing/brands
-
Lots of images
-
Accessible to different size people
Weaknesses
-
Flow gets interrupted by the modularity.
-
Font and weight are inconsistent.
-
Poor customer service
Old Navy
Strengths
-
Customer involvement
-
Categories are clearly laid out.
-
Accessible in many forms (shipping or pick up)
Weaknesses
-
Lots going on fonts and colors (busy)
-
Style is the same as GAP
Th๐คught Process:
All three competitors have their pros and cons. At first, I looked at general stores (H&M, GAP, OLD NAVY) to see how they organized their products because they have streamlined the organizational process.
โ
We do not re-invent the wheel; therefore, learning from other companies will help with our design decisions later on. We want consumers to feel at home with the mirrors website.
How do our consumers act, and why?
-
Task Flow helped to map out functions that needed to be addressed
-
Checkout Menuโ
-
Search/Categories
-
Product Pageโ
-
-
User Flows showed the multiple avenues that the consumer could take
-
Segmented paths
-
Yes โ
-
No
-
Alternate
-
How might we help the user get to the place they want to go to?โ
-
-
-
How might we help users get to where they want to go?
How accessible is the site?
Worried that the user will feel pressured to sign up.
NEED to build trust
First Stages Low/Mid Fid Wireframes
I started with the main header. Then one thing led to the next. Looking at competitor websites and other website inspiration, I sketched out some ideas. I'll go down a variety of avenues, then stop and look back to see what worked. From that, we would write down certain layouts that could work together. It's a lot of trial and error, but in the end, I'll have narrowed what I need to get done.
Landing Page Iterations
Putting myself in other's ๐
My research showed that more girls than guys will peruse the shop's online store. Therefore, I wanted to challenge myself and try designing for women.
โ
Women's clothing is far more complex than men's. It would be a great opportunity to learn from.
Landing Page
Wanted to empower to consumer. Reflecting, Empowering You
Product Page
Used a curved line to help guide the user through the experience
Product Page should flow, where one thing leads to the next.
โ
The thought process behind curve was to give the user a visual guide through the site. It ends by curving upwards for an uplifting feel.
Search Page
How might we make the experience one that is easy to use yet that all the right information?
Use a masonry grid, because my research showed that it keeps the audience engaged.
*menu when sliding down would be fixed, I later change this, so it would move with the scroll.
Landing Page should be clear and concise, allowing consumers to get the information they need quickly.
Reflecting YOU
Before I start any project, I'll develop some logos because it helps me get in the right mindset. It helps me put a face to the company.
Th๐คught Process:
I started by playing around with the meaning of a mirror. Changing the letters into a mirror, making the r's as "shoulders" for the head (letter o). The goal was to make it centered around "You" or the User/customer.
Ze UI Kit
As a logo brings a face to a brand, its colors bring emotion/feel. There was much decision when it came down to what sort of fonts and color styles we were going to go for. We decided to use sans serif fonts and softer colors to make the site feel homier/cozier.
โ
MAJOR ๐ = SIMPLICITY
Iterate, Iterate, Iterate
5 people completed the usability tests. There were four tasks. After each test, I went back and made more frames/ iterations, enabling the user to complete the given tasks more easily.
โ
* I understand that I should have waited to make the changes, but they were easy fixes, and I could iterate my prototype between tests.
Our Usability Findings ๐ง
More Subcategories in the Menu
Research showed women section has more variety than men's
Revamp Filtering in Search/ Categories Page
Reorganizing Visual Hierarchy (Size, Color, Type)
Be able to edit their cart, wherever on the site
Gives user more control over their experience
Change the Product Card Layouts
There wasn't enough information on each card resulting in users being disinterested