What is Mirror?

Mirror is an American fashion department store chain that focuses on quality clothing for affordable prices. They pride themselves in being able to provide clothing for all ages & genders.

Problem Statement

With the success of their 400+ stores they decided they needed to expand their business into the online space. In addition to building a website, they would also like to revamp their logo to something that is neutral to age & gender.

Solution

A modernly designed website for both desktop & mobile devices focused in giving the customer the best possible experience. A new logo that reflects the quality of the clothing & the brand as a whole.

Empathize

Interviews

To begin each project I like to start with the “user”. The better I understand the user, the easier my job as a designer becomes. I decided to begin with User Interviews. This helped me see common choices amongst the participants & also helped me get an idea of where I should be designing different elements of the website. Below is the data I was able to gather from the three users I brought in to interview.

Similarities:

  • Price was mentioned by all as one of the most important deciding factors when buying

  • All 3 have had bad experiences revolving around deliveries

  • 2 of the 3 users purchased on their desktop more than their phone

  • All stated that the more options the site had in terms of search or tracking features, the better experience they had

  • All stated how important visiting an easy-to-navigate website is 

  • Most of them brought up discounts as one of the main reasons for shopping online as opposed to in-store

Differences:

  • Only one participant mentioned design as one of the most important aspects of an online site

  • There were mixed answers revolving around what they look for in clothing. Some said price and others mentioned style/trends.

  • Mixed answers on why they choose to shop online over in the store

Define

Competitive Analysis

To familiarize myself with the other successful competitors I ran some competitive research. I tasked myself with a couple of main objectives:

  • Identify strengths & weaknesses to the following sites (Design elements, color schemes, flow, hierarchy,)

  • Notate which navigational patterns are repeated across the competitor’s sites.

  • Go through the checkout process of each site.

  • Test mobile functionality

    To get things started, I went to 5 of the most successful competitors in the industry. The summary of my research can be found below.

User Persona

Now that I completed the interviews & research, I had a pretty good understanding of who my targeted audience was. To help focus my efforts, I created a User Persona. Below I listed some goals, frustrations, priorities & motivations.

Ideate

User Flow

It was now time to take the knowledge I gained from the research & the interviews and start mapping out the flow of the website. I knew I wanted to showcase a user going through the buying process so I created a user flow chart. This helped me organize my thoughts & better visualize how to accomplish the task at hand.

Style Guide

I knew I needed to make the company colors & logo as neutral as possible. I started out with several different mockups for the logo until I finally found what I was searching for. I was able to create the logo with just the lettering but was able to subtly add two “Mirroring” lines running parallel to each other at the bottom. From there I needed to pick a Typography style & color scheme that would match it. I decided on something that felt modern, with high quality but also approachable.

 

Prototype

Wireframes

For this particular project, I was asked to map out a user journey from start to finish when it came to purchasing clothing. I was able to design the skeleton of the homepage, a product page, a checkout page & a payment confirmation page. 

  • Home Page

  • Browsing Page

  • Product Page

  • Check Out Page

  • Confirmation Page

  • Home Page

  • Browsing Page

  • Product Page

  • Check Out Page

  • Confirmation Page

Test

Usability Testing

Through usability testing, I was able to identify several areas of improvement. It can be hard at times to see your own flaws or areas of improvement so it helped to get an outside perspective. Below is a snapshot of some of the changes I made after my tests.

  1. Reduced the space between the menu & product.

  2. Change the size of the price. Adjust the area of the color selection.

  3. Added in a live chat feature as well as the ability to share an item through social media.

The

Final

Product

I enjoyed taking on a project that needed a variety of design choices to be made: Color palette, logo design, typography & in charge of the website. It pushed me to think creatively in multiple ways to complete the design challenges I faced. I feel confident that my work would serve as a great starting base. The next steps I would take would be to continue usability testing & start expanding into the rest of the pages using this structure. I would want to interview users after they clicked through the site to find common issues or concerns. After collecting the data I would continue to follow my process until the site was ready for a full-scale launch. Overall, I had a great time tackling this brief & am excited where the next project takes me.

Mirror

/

Mirror /

Notifly

A reminder app designed to connect family members & friends

Procreate

A project in which I created a social feature for the digital art app: Procreate.