Mirror
A look at the process of a responsive design for a clothing store, from research to a high fidelity prototype.
Overview
My Role: Research, User Flows, Persona Development, Information Architecture, Branding, Wireframing and Prototyping, UI, Usability Testing
Access to companies at any time, on any device, has become necessary with our digital lifestyles. The clothing company Mirror decided it would be best to create web and mobile versions of their stores to keep up with the times and the fast-paced lives of its customers. Mirror was starting fresh, asking for a re-branding, along with a responsive website.
*Disclaimer: This is a project from UX Academy by Designlab. Mirror is a fictitious store.
Problem
Mirror only had brick and mortar stores, so they needed to create an online presence to meet the needs of their customers. Websites and mobile apps each present their own challenges. I wanted to create a design that would seamlessly transition from desktop to tablet to mobile device. I also wanted find the problem areas that customers were having with other sites and apps, so that Mirror could better accommodate their needs.
Process
User Research
I started my research with some competitor analysis to see what design patterns were being used by companies similar to Mirror. This gave me an understanding of common practices for e-commerce websites and an idea of design elements to avoid or change in my design for Mirror. It also gave me an opportunity to look at online stores from a UX perspective.
Following the competitor analysis, I conducted three interviews with experience shopping online. I wanted to get an in-depth look at what may be causing issues for users. I found that people tend to shop online when they have an idea of the type of item they want. They want to be able to find that type of item as quickly as possible, without having to scroll pages of unrelated products.
Meet Rachel
Based on the information I learned from the interviews, I created a persona, Rachel, to help me understand the needs and frustrations of Mirror’s users.
Rachel is a busy 29-year-old, who doesn’t have the time to go to stores to shop or spend hours scrolling. She shops online when she knows what she wants and wants to be able to find it quickly.
Aligning Goals
I created a Venn diagram to see where business and user goals overlapped and to know on what to focus the design. From the design brief, the business goals were to make a responsive site that allowed customers to browse and filter easily. My user goals came from my persona, spend less time shopping and find items quicker. It was clear to see the common goals between the two, which made it easier to focus on designing those features.
Information Architecture
I conducted an in-person card sort to gain an understanding of how users might organize different products offered by Mirror. This helped me see a pattern of organization that could be translated to the website. I then created a site map to see how categories and sub-categories would be related and connected.
Task Flows and User Flows
Using the information architecture and site map, I created a task flow to understand a step-by-step analysis of a task that most users would complete. I also created a user flow to understand how users might access the site or app, where they might have to make decisions, and where they might decide to leave. I learned that no every user will start on the homepage, which helps me make sure they have an understanding of where they are on the site and how to navigate it.
User Flow
Task Flow
Sketching and Wireframes
I started making sketches of the homepage using pen and paper to get ideas down quickly and work through multiple ideas. Then I moved to digital to make low fidelity versions of the homepage and few other key pages. I used Figma to make my wireframes. I learned that it is important to pay attention to spacing a to keep everything as minimal as possible to make sure the design is as readable as possible.
After creating wireframes for desktop, I worked on tablet and mobile versions to make sure the design was responsive to different screen sizes. Through this process, I learned that it is important to always iterate on your designs and to work through ideas to make sure the design is the best it can be and that it works on all screens.
Branding
Before moving on to higher fidelity wireframes and prototypes, I needed to work on some branding changes for Mirror. The design brief noted that Mirror wanted to be “neutral, modern and fresh, clean and clear.” I created a new logo, icons, and color palette and made new typography decisions to fit with the style of the brand. Through this process, I learned to make sure everything has the same style to create consistency within the brand, which leads to trust from users.
High Fidelity Wireframes and Prototyping
Once branding decisions had been made, I went back to my wireframes and started adding those elements until pages were filled with imagery and text. I learned that iteration continues even in this phase. I spent a lot of time getting the hero image and text to make it fit with the brand, but to also make sure the text was legible.
I utilized InVision to make my prototypes. I was able to gain experience creating hover states and screen overlays which help to make the prototype feel more real. It was important to make sure pages and elements were linked correctly so that the prototype worked as intended during usability testing.
Usability Testing
I wanted to make sure that I tested part of the website that seen as a problem for the persona that I created. I decided to test the clarity of the top navigation categories and the filter system that I designed for the item list pages because my persona wanted to be able to narrow down her choices quickly to fit shopping into her busy schedule.
Given scenario: you’ve been invited to a wedding and you need a new suit jacket. You also want to stand out so you want to choose a red suit jacket.
This task would make sure that the participants had to navigate to the correct category and then use the filter system to choose an item. I had the item in a sub-category of Occasions, called Formal Wear, which was decided based on a card sorting activity I had performed early.
Test Results
5 participants
4/5 participants expected the given item to be under a different category, Tops and Outerwear.
All participants utilized the filter system with success once they were on the correct page.
Because of the high number of participants expecting the item to be under a different category, I had the idea of tagging items with different possible categories so that an item could then be found under all of those tagged categories. I was able to gain experience facilitating in-person, moderated usability testing. Gauging how much guidance to provide was difficult and depended on each participant. Some participants needed very little guidance, while others needed more.
Affinity Map
After conducting the usability testing, I created an affinity map to see any patterns. I color coded sticky-notes to correspond with individual participants and wrote one piece of information per sticky-note. I then grouped related sticky-notes based on how participants tried to navigate the prototype, and how they interacted with the filter system.
I then went back to my wireframes and made some changes to accommodate the findings from the usability testing. One of the biggest changes that I needed to make was where items would be located. I made my categories based on results from a card sort, but because most of my test participants thought their given item would be under a different category, I had to make sure that some items could be found under multiple categories. I learned that it is a good idea to make as many elements clickable as you can, so that the test feels more authentic. I also learned to make sure that more than one pathway is available to the participants.
Final Prototype
My final prototype allowed a user to work through the process of finding an item, either using the search bar or through filters, and adding that item to their bag. I included several hover states and a quick view option.
Review
Throughout the life of this project, I learned that iteration and collaboration are key to making a good design and making it work for the intended users. I worked through multiple iterations of the hero image and copy on the homepage before the readability and usability was where I wanted. I changed the image several times, changed its orientation and layout, and got a lot of feedback on what needed to be improved. Through this project, I got to work on each stage of the design process, from user research and ideating, to wireframing and prototyping, to usability testing. I learned so much at each step, such as types of questions to ask and not ask during user interviews, to look at well-designed sites to see how they handle different elements, how much guidance to offer usability testing participants, and how to give and receive feedback.
Next steps for this project would be to design the rest of the mobile app and work on the responsiveness of the site so that people would have positive experiences on all devices.