Mirror
Responsive Design
Role
UX Researcher / UI Designer
Software
Figma
Duration
8 weeks
Project Overview
Mirror is a clothing brand whose goal is to sell accessible, good quality clothing at affordable prices for men, women, and children. With over 400 locations across 32 countries, there is no doubt that Mirror has a strong presence in the fashion community. However, even with their success they still lack a presence in the online community thus limiting the accessibility to their products.
Challenge
With no online presence and there being an increase in use of the internet as a medium for shopping, Mirror is late to the game for a digital transformation and therefore wants to rebrand themselves and create a modern and user friendly eCommerce website.
Solution
Create a modern, neutral, and fresh logo and a responsive website design that adheres to both their business and user goals.
Research
Research was done through the methods of competitive analysis research and user interviews in order to identify user expectations and pain points of online shopping. The information collected would then be used in guiding the direction of Mirror’s design.
Research Goals
Collect information on what contributes to a positive customer experience
Understand how a user navigates through a clothing website and what features they use to ease the process
Identify the difference in shopping experiences amongst different digital devices
Learn the pros and cons of shopping online versus in-person
Detect obstacles customers come across to improve user experience
Competitive Analysis
Goal: Compare clothing websites with similar goals and understand the strengths and weaknesses of each site.
Through competitive analysis, I was able to identify patterns used within Nordstrom Rack, H&M, and Uniqlo such as their layout organization and visual and information hierarchy as well as the content they emphasized whether it was sales, the products, or their mission statement. This information was then used to figure out what was and was not successful amongst users. What resulted from the research was that they emphasized their deals and if they had a sale, showcased popular and trendy clothing categories, and used imagery of people in real life settings wearing their products to make their company seem more relatable to their customers.
Strengths:
Landing page showcases different categories & markdowns
High end brands at low costs
Deal associated with downloading mobile app
Weaknesses:
Free shipping with purchase of $100+
Inventory consists of outdated trends
Only uses a two-tone color palette therefore CTAs and hyperlinks are not distinct
Strengths:
Clean and simple website layout
Offers student discount
Loyalty program with discounts
Brands off of sustainability
Weaknesses:
Lacks a quick view option
Poor material quality of products
Spectrum of variety is either on the professional end or casual end with no in between
Strengths:
Pop up that showcases deal on landing page
Gives reminder if user has items in shopping cart when revisiting site
Wide size scale (XXS-XXL)
Weaknesses:
Very busy landing page
Limited variety in stock
Visual hierarchy isn’t apparent
1:1 Interviews
Goal: Get direct insight on the users’ thinking process as they navigate and shop online, their preferences, and dig deeper into their conscious and unconscious actions as they shop.
Interviews were conducted with 5 participants (3 females, 2 males) that were ages 23-28. The goal was to learn more about their wants, needs, and frustrations when it came to eCommerce clothing sites and therefore used a set of questions that targeted their experiences in-person versus online, their use of features to ease their online shopping experiences, and their pathways of navigation on clothing sites.
Key Findings:
Online shopping is more preferred due to accessibility, conveniency, and ability to make purchases easily
Participants shop twice as much online than they do in-store because:
Avoids the need to travel
Saves time
More options of products available
Customer reviews and filters are important features on clothing sites
Size and fit of products influences likeliness to return to store
Frustrations arise from inaccurate sizing, limited stock, and lack of organization of categories and their products
Who is this product for?
Based off the research conducted, a persona and an empathy map was created. The persona showcased the users’ goals, needs, and frustrations when it came to online shopping which made the target audience more relatable and realistic thus allowing myself to feel more empathy. This document was an excellent reference point during the design process because if I lost sight of who I was designing for, it was a constant reminder of the users’ goals. The empathy map was a great addition to the persona because it explained what motivates and contributes to a user’s shopping experience such as what they do, think, and feel as well as how their environment influences their decisions through the things they see and hear on a daily.
Persona
Empathy Map
Project Goals
The project goals were organized within a venn digram which allowed for clear differentiation between the business goals of Mirror and the user goals of potential online clothing customers which helped identify the common goals the two had. Although both business and user goals individually are important, by having the common goals, it can narrow down our focus on what should be priority when creating Mirror.
Feature Roadmap
From user interviews, information on what features they use to ease their online shopping experience were documented and used as a basis for a Feature Roadmap. The feature roadmap allowed for prioritization of potential features and made it easier to decide what was important to include from the start and what can be added later, if necessary.
Navigation
Developing seamless navigation is key when it comes to eCommerce clothing sites because that is how customers get from the landing page to a finalized purchase. The process of creating a seamless navigation included card sorting research to figure out how to categorize products within the navigation bar, a site map to visualize the sorting, and a task flow and user flow to visualize potential navigation for users.
Card Sorting
Card sorting research via Optimal Sort was conducted in order to achieve the seamless navigation and excellent flow Mirror wanted. Participants were given a list of 30 products and were given the task to categorize them in as many or few categories they could think of. I didn’t provide set categories and gave them the freedom to name their own because it offered more insight into how they identify pieces of clothing. The results from this research would be the basis to the Mirror’s navigation bar.
Site Map
Taking the information from the card sorting research, I developed a site map to serve as a visually representation of how navigation will occur for Mirror. The site map consisted of main categories (men, women, children, and sale), their subcategories (clothing, accessories, shoes, sale), and then the product categories in which came from the card sorting research.
Flow Charts
Task Flow
The information organized on a site map was used to guide a creation of a task flow to visually see where a user would need to go, page by page, to complete a purchase as well as the actions taken, such as needing to hover versus click. The task flow would start at the landing page and end with finalizing a purchase after checkout.
User Flow
After the creation of a task flow, I then created a user flow. What differentiates a user flow from the task flow is that task flows showcase the pathway a user can take if everything were to go right whereas a user flow showcases all pathways a user will navigate through while taking into account decision points the user makes from start to finish of using the site.
Wireframes
Using all the information acquired from user interviews and competitor analysis, the first step would be to create wireframes in order to build the skeleton of Mirror and start visualizing how the flow and navigation. The wireframes will start from low-fidelity sketches, with multiple options of layouts, and work its way to high fidelity designs. My goal in creating these wireframes was to focus on having a clean and organized layout that is easy to navigate through and that can help showcase the Mirror brand of being family friendly, good quality, and affordable. Although desktop was the main medium for the site, responsive designs were created to make sure that the overall design will flow well no matter what device the user was shopping on.
Medium Fidelity Wireframes
The design highlighted key information that users are more likely to gravitate towards on the landing page. From user interviews it was an unanimous statement that all participants will head to the sales section so the hero image selected emphasized Mirror’s sale. From there was popular categories as well as information that supports Mirror’s mission statement of sustainability and the quality of their products.
Mood board
Before my low fidelity wireframe became a high fidelity designs, a mood board with specific color palettes, typography, and imagery was put together as inspiration for the design of Mirror. This mood board will jumpstart the rebranding process. Mirror wanted a modern, neutral, and fresh look so it was my goal was to create a design that was airy, breathable, and clean-lined feeling so that the focus will be on the imagery of the products versus the overall design of the site.
High Fidelity Designs
With having the low-fidelity wireframes as an outline to build off of and in addition with the mood board to start the rebranding process, a theme with a color palette of brown tones and with a minimal but elegant typography was selected and inputted into the wireframes to evolve the design. From here I was able to start seeing Mirror’s website come to life.
UI Kit
To make designing the site easier and consistent, a UI Kit that consisted with all elements within Mirror ‘s design (e.g. cards, input fields, and bread crumbs) was put together including the new logo. This way when it came to creating additional screens such as product pages, search pages, or category pages, we can just cut and paste. All design elements will be consistent in color and size. All the elements came from the high-fidelity wireframes and would make the prototyping process a lot easier when it came to designing additional screens for usability testing. This UI kit can then be referenced by all the designers on this case.
Prototype & Testing
The prototype and testing phase consisted of testing my high fidelity designs through usability testing. I ran my prototype through 5 different participants and assigned them two different tasks of purchasing a dress and then a sweater. I created these two tasks to better analyze how a user will navigate through the site and if there was any hiccups along the way. Mirror’s overall goal is to create seamless navigation when shopping and these two tasks will let me see if my design allows the user to have that. The findings from my usability test helped me improve my designs and its navigation.
Testing Objectives:
Identify any area or feature that causes confusion or frustration to the user as they complete a task
Determine average time it takes to complete a task
Determine level of difficulty of completing a task
Tasks:
Scenario #1: It’s Mirror’s annual sale and you are looking to stock up on dresses. Your main goal is to look for a white long-sleeve knitted dress.
Task #1: Without using the search bar and any filters, find a white long-sleeve knitted dress in size small and add it to your cart.
Scenario #2: Fall has just arrived but your wardrobe is still stuck in summer so you decided you wanted to start shopping for sweaters.
Task #2: Find a blue chunky knit sweater in size medium as if you were just browsing and then with the search bar.
Results:
100% Completion rate
5/5 had no frustrations when completing tasks
Post-Usability thoughts:
It’s rare to come out of a test with no user feedback and therefore difficult to figure out what areas needed improvement.
After reviewing the screens closely, there were a few areas that needed editing. They were difficult to detect when going through the prototype while completing the task but visible when paying attention to all components
Mirror Closing Thoughts
The overall process of creating an online presence for Mirror was very eye opening. Although the research process of working with participants was very familiar due to my psychology background, it was nice interacting with people and learning about their thoughts, opinions, and experiences when it came to shopping for clothes. It was the UI section of the process that seemed the most difficult for me. I had to learn how to take the research I did and the common goals of the user and business and translate it into a user-friendly design. It was definitely the section that required more time to be worked on. Usability testing itself seemed the most fun because I got to see my work come to life.