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.
- Card Sorting
- Task & User Flows
- First Iteration Wireframes
- Brand Logo Ideation
- UI Kit
- Responsive UI
- Usability Tests
- Affinity Map
- Next Steps
What do the people currently do and like?
The majority use their computers as the primary mode to purchase clothing
The user uses their phone for quick items because it’s easier.
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.
Clean and easy to use
Font and weight are inconsistent
Images are too large, can’t see the text, making for more scrolling
Has a large variety of clothing/brands
Lots of images
Accessible to different size people
Flow gets interrupted by the modularity.
Font and weight are inconsistent.
Poor customer service
Categories are clearly laid out.
Accessible in many forms (shipping or pick up)
Lots going on fonts and colors (busy)
Style is the same as GAP
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
User Flows showed the multiple avenues that the consumer could take
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.
Wanted to empower to consumer. Reflecting, Empowering You
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.
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.
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.
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.
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