1. empathizing.
mirror
responsive website
0. overview.
the brief
Mirror has over 400 stores in 32 countries, and is a leading clothing brand for affordable, fashionable and accessible clothes for men, women, and kids alike.
Since starting back in 1994, Mirror has only been relying on physical stores and is now looking to launch its online presence; its customers have been asking about it for years, citing its convenience in finding different styles and sizes.
Mirror has asked for a new look - the online storefront will come with a new logo for a fresh rebrand of the brand.
problems
-
No online presence means no online sales, therefore lowering potential revenue.
-
Mirror’s warehouses have inventory left unsold because there is no way to sell it
-
Clients complain that when the store does not have their size, they have no easy way to acquire that item
proposed solutions
-
Creating a responsive e-commerce site
-
Including a clearance section for the warehouse items
-
Developing a rebrand for Mirror, including a new logo
my role
For this project, I was working on my own.
I fulfilled the following roles while conducting research, developing the brand, and designing the app:
-
User Experience (UX) Researcher
-
User Experience (UX) Designer
-
User Interface (UI) Designer
-
Interaction (IxD) Designer
-
Visual Designer
deliverables
-
Competitive Analysis
-
Interviews
-
Persona Development
-
Empathy Map
-
Project Goals
-
Information Architecture
-
Feature Roadmap
-
Task & User Flows
-
Wireframes
-
UI Kit
-
Usability Testing & Analysis
-
High-Fidelity Interactive Prototype
project specs
-
date: completed in 2022
-
duration: 6 weeks
-
tools: Figma, Figjam, Illustrator, Whimsical
methodologies
Primary Research | User Interviews
Participants:
-
Familiar with online shopping, ages 25 to 40
-
Currently shop online
-
Browse the online stores but do not buy
-
Buy online, but not clothes (think Amazon)
Secondary Research | Competitive Analysis
Brands:
-
Zara
-
Mango
-
H&M
-
Old Navy
research goals
& objectives
-
Learn if shoppers prefer online or offline shopping to better understand and tailor to their needs.
-
Learn who shops online the most in order to ask the right users the right questions.
-
Learn what pain points come with online shopping to find ways to mitigate those.
-
Learn what the shoppers’ favorite part about online shopping is to highlight that aspect in the product’s UX.
risks & assumptions
-
We risk not finding people who prefer to shop online, and like shopping in store more
-
We assume that people are more comfortable buying items other than clothes online
-
We assume that an older, less tech-savvy demographic prefers to shop offline/in-store
-
We assume that online shopping is more convenient and therefore more popular among all shoppers
research summary
-
Body inclusivity is highly important, both on a psychological and a sales levels.
-
Shopping online is more convenient and preferred, but the in-store shopping experience is missed, where you get to touch the materials and try items on before you buy them.
-
The hassle of exchanging and returning items is a big downside because some brands do not make it easy nor simple.
findings
Shared goals:
-
Get best deals
-
Save time & money
-
Fashionable but comfortable
-
Seamless online shopping
Shared pains:
-
Models are rarely relatable
-
Pop-ups & ads
-
Complicated return/exchange
-
Waiting time for delivery
-
Bug and malfunctions
Shared needs:
-
Inclusive body types models
-
Easy return/exchange process
-
Reviews section with photos
-
Personalization
-
Recommendations
-
“See it on me” kind of feature
actionable insights
-
Models with different body types showcasing the items
-
Ability to select the model’s body type when browsing
-
Include size guides that are easy to understand
-
Have a Reviews section with add photos
-
Add filters for categories, size, price, colors, etc …
meet our persona, alba
-
age: 32
-
occupation: marketing manager
-
location: washington, dc
-
status: single
-
archetype: deal-hunting fashionista
motivations
growth
social
achievement
financial
incentive
fear
personality
tech knowledge
extrovert
sensing
thinking
judging
▪
▪
▪
▪
introvert
intuition
feeling
perceiving
internet
software
apps
socials
▪
▪
▪
▪
goals
frustrations
-
Get the best deals on purchases
-
Save time by shopping online
-
Be fashionable but also comfortable
-
Smooth, seamless online experience
-
Models are very perfect, not real or relatable
-
Pop-ups & videos in the apps or the website
-
Complicated return/exchange processes
-
Waiting time for order delivery
-
Bug and malfunctions
needs
-
Models with more inclusive body types
-
Easy return/exchange process
-
Reviews section and photos of reviewers
-
Personalization within the app
-
Recommendation based on previous purchases
-
"See it on me" kind of feature
empathy map
The empathy map exercise is important to help us create a cohesive view of Alba's perspective, and maintain a human-centered mindset. The insights gathered from the interviews were split into the four main categories - says/does, sees, hears, and thinks/feels.
2. defining.
project goals
As a result of analyzing Business Goals, User Goals, and Technical Considerations, I came to the conclusion that the shared goals are:
-
Seamless and smooth shopping experience, with no bugs or distractions such as popups and ads.
-
The ability to filter searches and categories.
product roadmap
Based on the interviews, the research, and the project goals, I put together a Feature Roadmap to outline what the MVP (minimum viable product) would look like, and what extra features can be added in the future or based on the team’s workload.
info architecture
After the research and the interviews, it was much easier to map our the information architecture. The diagram was iterated upon a few times as the wireframes and prototypes were designed. For a closer look, you can go here.
user flow
The user flow below depicts the journey of Alba through the website, with the task of searching for and purchasing a pair of jeans. For a closer look, access the flow here.
3. ideating.
sketching
wireframing
When thinking about my wireframes and the prototype, I wanted to create an experience that is as complete as possible for the testing phase. Therefore, I chose to test an end-to-end flow, and a second simpler flow. For that purpose, the prototype will need to contain the following pages:
-
Homepage
-
Category page
-
Search results page (list view)
-
Item page (detail view)
-
Shopping Bag page
-
Checkout pages
-
Order Confirmation page
-
Profile page
Note: Changes were made to the wireframes as the UI was further developed and testing was conducted. For a closer look, you can check out the wireframes here.
4. branding.
When developing the rebrand for Mirror, the design decisions I made were based on the following assumptions and ideas:
-
The target users are modern
-
The target users are craving a sense of inclusivity especially when it comes to fashion brands
-
The brand can look and feel upscale without breaking the bank
-
Switching to a gender-neutral brand will expand the client base, and give the existing consumers a sense of inclusivity
-
The new look and style for the brand should be clean, elegant but also bold, neutral, and modern.
logo redesign
As a first step in the process, I begin with typeface exploration. For this logo I wanted to keep it clean but also give it a bolder presence. I wanted the logo to be able to stand on its own, and the shorthand version to be recognizable anywhere.
The next step is narrowing down the options, and introducing color. This is where I play with further exploration of the different things I can do with the typefaces and the color combinations.
style guide
putting it all together,
and then some.
To bring the identity together and have a reference for the future, I put together Mirror's UI Kit. It contains details about the following items:
-
Colors
-
Typography
-
Locator
-
Iconography
-
Buttons & Tags
-
Forms & Menus
-
Browsing
-
Animation
5. testing.
testing goals
& objectives
parameters
-
Test and validate the ease of use of the navigation, icons, buttons throughout the site.
-
Test and validate the ease of understanding of the flows.
-
Observe how the users interact with the functionalities to complete the scenarios.
-
Observe and make note of any hesitation, confusion, or feedback from the user.
-
Confirm the understanding and value of the new model size selection feature.
-
Eight (8) testers for this prototype.
-
Two flows: one of them was focused on searching for an item, adding it to cart, and completing the purchase, and the second one was about accessing their Profile to find previous orders they’ve made.
-
The testers were from a pool of friends, family, and UXA students, ranging between the ages of 25 and 50.
-
The tests were done remotely, and were fully monitored.
-
All testing sessions were recorded for note-taking purposes after the testing.
affinity map
Going over the notes I took during the usability testing and listening to the recordings again, I was able to create this affinity map. Affinity mapping is a great way to sort, prioritize, and rank the feedback.
suggestions
(8/8) - revisit the hover quick add feature on the results page
(6/8) - add an arrow for the reviews section,scroll bar not clear
(3/8) - reword the “save info for future purchases” checkbox text
(3/8) - add filters to the Reviews section
(3/8) - expected the action buttons to be on the right throughout the checkout process
(2/8) - add sorting to the columns in the purchase history
(1/8) - make the filter dropdown bar statics on scroll
(1/8) - reword “select your size” in quick add to “select your size to add to cart”
(1/8) - have a popup appear with a preview of some of the items in Order History
(1/8) - add gender neutral text on homepage to explain the brand
metrics
Test Completion Rate: 100%
8 out of 8 participants completed the test successfully
Error Free Rate: 100%
There were two flows that the participants were asked to complete: searching for an item and completing purchase, and accessing previous order details.
8 out of 8 participants successfully completed both tasks.
summary
Overall, the general sentiment was that the website was clean, simple, familiar, and features are as expected. There were some details that were brought up, mentioned above, which I will take into consideration when I make changes to the prototype. Some of the users were the same ones that I interviewed at the beginning of this process, and they were very happy to see that some of the pain points we had discussed - such as model size for inclusivity, and reviews - were present and taken into account.
here's what was changed,
and why it was changed.
Note: hover over the images to see the magic happen
checkout process
In the initial wireframe, the login option was not easy to find, and the first page of the checkout process was overcrowded and a bit confusing. The second and third frames below show the updated layout and design of that initial page.
-
The login prompts were now clear, so the attention of the user can be turned to that one task.
-
The third frame shown below focuses on the shipping address, but also gives the option to Express Checkout, which does not take away from the attention of the user.
profile page items
On the Profile Page, some feedback from the Usability Test was about the Order History section being clean, but that it could be daunting to find previous orders by going into teach of their Details pages.
For that purpose, I added a feature in which upon hover, a popup would show up displaying a preview of the items that were part of that order. This hover feature only works on the desktop site, however, for the mobile version, clicking on the link would trigger the popup.
quick add hover
The Quick Add hover feature displays available and unavailable sizes for the item. It also allows the user to click on their size to add that item to their cart.
Two changes that I made to this design was:
-
The wording of the prompt was changed to indicate that selecting a size would add to the cart
-
The unavailable items are now indicated by a strikethrough, making it more clear what is available and what is not.
reviews section scroll
For this section, the scroll bar seemed to not always be visible, or its functionality not always clear to all testers. In general, the participants were expecting to see an arrow to signify scrolling.
To remedy that, I changed the color of the bar, making it more in line with the site’s navigation, and I added a clickable navigation arrow to the side.
save details
Although the intention behind this checkbox was generally clear to the testers, in some cases it was unclear what saving the details meant.
For this reason, I chose to reword the phrase in order to make it clearer that adding a password and checking the checkbox will result in the creation of an account.
6. learning.
design for experience
It took me a couple of tries, but I learned that it is much more valuable to design for ease of use and clarity than it is to design for aesthetic value.
If the text is not readable, or if the intention of a feature is not clear, the likelihood of the user dropping the task and moving along to something else is very high.
iterate, and reiterate
With every test and every iteration, the design and product were reaching a better place. However, I believe that if I ran another set of tests after the latest round of edits, I would still be given some valuable feedback that would lead to more changes to the prototype.
Iterations are part of the process, and because of the frequency that they may take place, it is crucial to keep the design files clean and tidy, with the right naming conventions and the correct components and shared styles.
listen to the end user
Just like many of my users and the participants in the interviews, I also am a frequent online shopper. One of the first things I learned at the beginning of this process, and again when conducting the usability testing, is that my assumptions and my hypotheses will not always be accurate.
For example, more than half of the prototype testers actually do not use the Search Bar to look for items. They prefer to browse the catalog and use filters instead.
Another assumption that was proven wrong is the degree of reliance on reviews. I did not think that reviews were an important part of the shopping experience, and almost all of the interviewees actually said that they always read the reviews before making a purchase. This was only solidified during the usability testing, when the testers were expressing appreciation to the existence of the Reviews section.
.png)
.png)
