menu
Fictional B2C Website Design
This responsive ecommerce website for the fictional clothing retailer, Mirror, makes it easy for customers to make purchases and returns, and find deals on things they like.
Responsive Website
70 Hours
Online shoppers face several challenges:
An inefficient buying process
A complicated and confusing return process
Difficulty finding deals
A responsive ecommerce website that makes buying and returning easy and encourages shoppers to find deals on items they like.
Easier return process
greater error forgiveness, purchasing confidence, and a solution to buying something without being able to see it in person or try it on
Saved favorites
shop using a familiar practice, see when favorites go on sale, and get good deals on desired items
Editable favorites & shopping bag
change color, size, and quantity from favorites and shopping bag without having to leave the current page
I conducted user interviews and a competitor analysis to confirm my assumptions and identify a problem to solve.
I interviewed 7 people and learned that online shoppers struggle with:
“Sometimes the return and exchange process is so hard that I won't buy from them again”
“A wish list of items I'm interested in to refer back to when I decide to buy would make the whole experience better”
“Nordstrom is my favorite online shopping website because of their wishlist and return policy. I also love their bright white interface which is simple, easy to use, and easy to see when things are on sale.
Based on my research synthesis, I developed a preliminary persona named Camille. Camille represents the primary target user that Mirror aims to engage and support in achieving her goals.
I analyzed 5 ecommerce websites based on their features and usability.
I brainstormed solutions for the main pain points uncovered during discovery.
Pain Point
An inefficient buying process
A complicated and confusing return process
Difficulty finding deals
➞
➞
➞
Solution
Simple checkout, don't have to leave page to view cart, edit items in cart
An easy return process with clear instructions
Save favorites, get deals on favorites
Before focusing on branding and visual design, I wireframed each screen to understand how the user would move through the app. This helped reveal any missing content and provided the framework for the final prototype.
Learning Moment
To save vertical screen space, I originally had buttons to change quantities, remove items, and save items for later on the right side of the mobile shopping bag wireframes. I moved them to the left side for added error prevention (users might accidentally push them when scrolling), and added error forgiveness messages for left-handed users.
I tested the prototype with 6 people using these 2 flows:
Learning Moment
The prototype only allowed test participants to select size S when adding the on-sale dress to the cart in task 1, but it was unclear why. 4/6 participants tried to select a size other than S and were confused when they couldn’t, resulting in confusion during what should have been a simple task.
Learning Moment
After struggling to find the Returns and Exchanges button, usability test participants suggested different (and conflicting) locations for where they expected to find it.
Learning Moment
I thought people might use the sort feature to quickly find on-sale items in their favorites. But, because “sort by on-sale” was hidden under the sort by menu and isn’t a common pattern, none of the test participants even tried the sort feature and instead just scrolled to the on-sale item.
6/6 participants completed both tasks
4/6 participants were confused by only being able to select size small
5/6 participants didn’t find the returns button on their first try
2/6 participants missed that the prepaid shipping label for returns comes in the box with the original shipment
4/6 participants were confused by only being able to select size small
Original
“I like to see if other sizes are sold out, if that’s why this is on sale"
“I would investigate more if I was unable to select a size and it wasn’t grayed out”
Revision
Clarified which sizes are unavailable
5/6 participants didn’t find the returns button on their first try
Original
“Returns and Exchanges doesn’t live in help, it should have its own spot in the hamburger menu”
Revision
Moved Returns & Exchanges button from Help subcategory to top level of hamburger menu
Original
“Returns are always at the bottom under help”
Revision
Added dropdown menu including Returns & Exchanges button to footer Help button
2/6 participants missed that the prepaid shipping label for returns comes in the box with the original shipment
Original
“I didn't realize the shipping label came in the box"
Revision
Improved visibility of the prepaid shipping label info
