mirror
UI/UX Case study - Product Design
About Mirror
Mirror started in 1994 as a clothing store targeting a budget-minded audience. They believe clothing doesn’t have to be expensive and last forever-that we should be able to change styles as we need and please. Mirror is very successful with over 400 stores around the world in 32 countries and no online presence.
Choosing to go with an online platform will be very beneficial for new and frequent shoppers. It will allow Mirror to grow an even bigger audience. Remaining inventory could be allocated to the website and is a great way to sell off past season and items that have few pieces left. This can also solve the problem of consumers needing a size that isn’t in the store and they could possibly get it online.
This research plan will help us collect the data needed to design and build a responsive e-commerce website.
Project Vision
While brainstorming on conceptual design for aesthetics we came up with the look and feel with mood boards. Here’s a look at what the client and I have envisioned.
Vision boards or mood boards are effective to jump off the creative path.
research & Findings
With much competition there was a way to pin point the most direct competitors using price, locations, UI/UX design and clothing selection. Though there are many more, these best fit for the demographics Mirror is wanting to target.
1-on-1 interviews
Conducting interviews gives great insight for what users(consumers) need or would like to see during their online experience. Below are the questions asks to get feedback which also leads to empathy research.
Do you shop online? If yes, when was the last time?
Where do you usually shop online?
How did you decide to go to those site(s) or app(s)?
How frequently do you shop online?
Do you go to any physical stores for shopping?
What is your most used website or app for shopping?
Can you list your likes and dislikes about this website or app? (2 or 3 of each)
What makes you trust this website or app? If your favorite physical store were to have a
website or app, would you still shop with them?
What would be a downside of shopping online?
Do you have any additional comments?
Participants:
User Preferences:
User Goals & Needs:
After conducting the interviews, we got to learn about user habits that help make decisions.
Feature roadmap:
A roadmap is a strategic, living artifact that prioritizes, and communicates a team’s future work and problems to solve. It helps the team align around a single vision and set of priorities. Starting with the high-priority (P1) needs and functions you can see the list below of what our participants prefer as well as findings from competitive research and market research.
Persona & Empathy Map:
When we empathize with our user, we can make sure that we’re solving the problems that are most important to them.
Persona:
Empathy Map:
project goals:
In the diagram below you can see the goals set and see the relation within each category.
information architecture:
Information architecture(IA) is the most important part of the project. Labeling and organizing content effectively to help users complete tasks. We did a card sorting to see how participants would arrange the categories for hierarchy and see which categories could be labeled together.
Site Map:
A UX sitemap is a hierarchical diagram of a website or application, that shows how pages are prioritized, linked, and labeled. If a user flow is like the street view details, the sitemap is like the bird’s eye view.
Task Flow:
A task flow was made for a user to be able to purchase an item with the possibility of account creation or to check out as a guest.
User Flow:
Based off two scenarios this user flow shows a scenario coming from a Google search and then an ad seen while on Facebook.
Wireframes:
Wireframes are a sort of architectural blueprint used to represent the underlying skeletal framework of your interface visually. They connect the conceptual structure to the product’s visual design.
Concept for Mirror’s homepage.
Design phase Begins:
After Information Architecture and wireframes we can now begin to implement the design elements. Below you will find all involved to bring Mirror to life.
Taking the vision board into consideration we can begin to build out the site with the aesthetics and minimal design the client prefers to move on with.
UI Kit:
A UI kit was created to show the element styles and interactions throughout the website.
Homepage Design and Responsive Pages:
Hi-Fi responsive pages for the desktop, tablet and mobile versions.
Iteration and Implementation:
After usability testing was done with the hi-fi prototype, we are able to make changes from feedback provided by the participants. This is a crucial step to make for a better user experience.
Prototyping
We designed a prototype with scenarios for searching for a product, viewing the product, adding to favorites and to then purchase the item.
Usability Testing
Objective:
• Observe users site behaviors.
• Observe learnability for actions.
• Observe how users get to a product they are interested in.
• Observe purchase procedure.
• Gain feedback on interface. (Layout, colors, flow etc.)
Hypothesis:
• Participants are familiar with e-commerce.
• Participants have general knowledge of icons, buttons and flow of websites or apps.
• Participants can adapt to how a site is setup due to familiarity.
Affinity Map:
With collaborated feedback we were able to pinpoint the user’s wants and suggestions so we can begin implementing these changes.
See the prototype→
Comparisons:
Here is a look at the before and after iterations and implementations for the Mirror desktop version.
We have implemented a fixed navigation bar (top right) and below the category menu while in hovering.
Hovering over an item now bings up the options “add to cart” and “quick view” for the user.
At the right you can see we have added the quick view window.(top right) And there are now sizes visible rather than a dropdown menu.(bottom right)
Signing up to become a member is now integrated within the checkout procedures.
Confirmation page and message have been restructured to make the user more aware of completion.
The confirmation number is now linked to “orders” in of the account holder.
Moving Forward:
The implementations and iterations provided showed high priority and there are still some changes we can make for a better experience. We will continue with iterations and prototyping to ensure we hit our mark.