Mirror: An End to End Responsive Design

Retail clothing site that allows users users to shop for quality and affordable clothing in various styles for the entire family.

Role: UX/UI Designer & UX Researcher (Solo)

Tools: Pen, Paper, Figma, Miro, Whimsical

Duration: 2 Weeks

Project Overview:

Mirror is a budget minded quality clothing store founded in 1994. Mirror caters to different styles for men, women and children. They currently have 400 stores in over 32 countries. The problem is, Mirror does not offer an online shopping experience or web presence that is aligned with their branding. Company stakeholders requested a total revamp from concept to completion to increase their bottom line and secure longevity. 

Solution:

Create a fully functioning e-commerce website that allows customers to have a complete shopping experience. I was responsible for all conceptual designs and completing the project from start to finish for desktop, tablet and mobile. One of the biggest pain points to consider is how to transition a 100% brick and mortar customer base to an online platform.

Discover:

Comparative and competitive analysis 

Reading the project background, I immediately knew I wanted my retail company to have a clean, gender neutral feel to appeal to masses. I started by conducting competitive research to determine the design strengthens and weaknesses of comparable sites and mobile apps. This comparison was extremely helpful in shaping the direction of Mirror and its future design.

User interview 

I conducted 3 in person user interviews. My objective was to determine how they are using their favorite sites and mobile apps and what features on clothing sites are most beneficial. I gained more insight into people’s favorite retail sites, their why’s, pain points and motivations for customer loyalty. I used this information to accurately develop a persona of the ideal Mirror user.

User Interview questions: 

1) What do you currently value in your favorite shopping websites?

2) What sites accomplish your goals the best? Why?

3) What obstacles arise during your shopping experience?

General insights:

  • All individuals loved the ability to type and search for the items they are looking for. 

  • A site this is easy to navigate and offered pre-loaded check out information were highlights of their shopping experience

  • Fast delivery options, options for in-store pick up, user friendly, convenient, and visually appealing were all characteristics that stood out. 

  • Participants who shopped the most downloaded the apps to the sites they enjoy the most. 

  • Some frustrations included technical issues, having to find credit card for checkout, item only available in store. 

Define:

User Persona

After the user interviews, I used the information to create a persona. I was able to generated the user goals and motivations of our target audience giving me the ability to empathize and satisfy customer needs.

Meet Emily Middleton, a busy wife, mother of 3 and full time registered nurse. She wouldn’t trade her family for the world but Emily always feels as if there’s never enough time in the day, yet always something to do.

User Goals: 

  • Find clothing items and sizes they’re looking for

  • Check out quickly 

  • Fast Delivery options

  • Save time & money

User Motivations: 

  • Save time and gas

  • Can always return item in store

  • Exclusive online discounts for loyal shoppers

  • Shopaholics will shop and spend out of boredom

Ideate:

User Flow

 I created the User flow to determine the users decision making process if Emily was searching for a dress for her daughters. I wanted to capture as many pathways as possible. I also used a lot of the feedback I received in the user interviews in regards to shopping patterns when piecing this together. This allowed me to determine how I wanted to structure the website.

Site Map

I conducted a card sorting survey to determine best placements for the categories of clothing items and other retail pieces.

Wireframes

Once the site map was complete, I began building mid-fidelity wireframes. I wanted a site that had easily accessible navigation menus, strong clothing categories, large search bar on the homepage and clean look like it’s competitors . I wanted the site to be fully responsive and easy to navigate for the user who is short time on time but deserving of something quality and nice.

UI Kit

Lastly, I created a UI Kit that was gender neutral, refined and simple. I wanted to keep the eliminate simple but still add a level of timelessness and class.


Prototype & Test:

Hi- Fidelity Designs

As I was creating the Hi-Fidelity designs I kept the same layout that was created in the mid-fidelity design. I wanted the design to be clean so I played around with the colors a bit but knew I wanted the search bar to be the main focal point/call to action. The scenario I wanted to test was having the user pick out a dress from the site and make it all the way through to checkout. I tested this prototype on 3 different participants to observe their decision making process.

Test

I performed the usability testing using three participants via in person and virtual. All participants were given access to the prototype link generated in Figma.

100% success rate, all users clicked “Womens” to access the navigation menu of products as opposed to typing dresses in the search bar

100% of the participants used the same user flow to complete the task. This caused me to reiterate to ensure all clothing categories are listed in alphabetical order.

Iterations

Since all the users used the same user flow to complete the task I was forced to reiterate. I assumed the majority of the users would type dresses in the search bar to find the needed item. All of the users used the navigation bar, scrolled down to dresses and followed the pathway to checkout. I also made sure that all clothing items were listed in alphabetical order. That was something all users looked first. All of the revisions were extremely important and feasible.

Reflections:

This project was my first case study and I learned a lot. It was fun and interesting building the bricks to get the final design. The goals and insights held true but I was shocked to observe the pathway I had assumed users would take was the exact opposite. No one used the search box to look for dresses. I determined that most users only use the search bar on sites they are frequent otherwise they like to look at a site in its entirety including navigation bars.

I learned the importance of going through each step of the design process and not to cut corners. Every step of the process allows you to narrow down whats needed to provide the best possible user experience.

The biggest challenges faced were getting individuals to answer the survey questions in a timely manner and getting targets that fit your potential persona. Next time, to improve the project, I would create an in store pick up options and more challenging features to satisfy all aspects on the customers wish list. 

Next Steps: The next steps would be to hand off the design specs to the development team to help launch the product.