top of page
MIRROR Mockup for site .png

Mirror is a clothing store for women, men and children. They started their company in 1994 and have been a successful leader in the apparel industry ever since.  They like to think of themselves as the World Market of clothing stores with a very natural and earthy flare.

They have over 400 stores in 32 different countries. Mirror's apparel and vision is that their clothes can be used for Every Occassion, Every Day, and for Everyone.

PROJECT OVERVIEW 

Design a responsive e-commerce website for a clothing company interested in a brand image

change and increase in sales

PROJECT 

TARGET USER 

Women, Men and Children looking for clothes that are affordable yet trendy. 

GOALS

Design a site that is clean and easy to use. Re-design a logo that is fresh and memorable

MY ROAL

UX and Visual Designer 

TOOLS USED

Pen, Paper, Sketch App, Invision App 

RESEARCH

Secondary Research

Interviews

Competitive Analysis

User Persona

Empathy Map

Storyboard

INFORMATION

ARCHITECTURE

Card Sorting

Homepage 

Sketches

Site Map 

INTERACTION

DESIGN

Task Flow

User Flow

Responsive 

Wireframes 

UI DESIGN

Logo

Color Palette

Typography

Responsive Design

RESEARCH

PROCESS

RESEARCH GOALS

  • Explore and analyze other competitors and their online stores

  • Differentiate trials and successes from other competitors

  • Define the different user's demographics 

  • What features stand out and are unique 

METHODOLOGIES

SECONDARY RESEARCH

Market Competitive Analysis: Reviewed and researched latest trends, customer reviews and additional successes in their field. 

PRIMARY RESEARCH

Interview with shoppers ages 32- 69 years of age.  Motivations for shopping, why do they go to particular sites; emails, sales, and what makes them stay on a site. 

COMPETITIVE ANALYSIS 

research-ramp-up-by-heather-h-rhodes.jpg

My findings shows through primary and secondary research that at an active, fast, safe, up to date and reliable checkout payment system is key for a customer staying and/or choosing a site. This reliability accounts for 46% of all e-commerce transactions.  Amazon's features of free shipping and free returns beats out all e-commerce websites and was also mentioned as a key factor as to why a person stays and chooses a site. A social media presence is also important in the 30-50 age group range to keep a customer engaged. 

PERSONA

Through the above research; secondary, primary and competitive analysis, I came up with my persona, Eve Singer. 

Eve- quotes.jpg
create-personas-by-heather-h-rhodes.jpg

STORYBOARD 

After creating my persona, Eve Singer, I then created an Empathy Map and Storyboard to show the relationship between Eve as an actual user of the website, Mirror. Although a rough sketch below, you can see how Eve had successful Mirror shopping trip. 

storyboard-exercise-by-heather-h-rhodes.
storyboard-exercise-by-heather-h-rhodes.
storyboard-exercise-by-heather-h-rhodes.
storyboard-exercise-by-heather-h-rhodes.

INFORMATION ARCHITECTURE 

To further understand the knowledge retained during research and user personas, I used information architecture to delve further into my findings. By card sorting, I am now better able to better understand the desire and order of items and can then create my sitemap

CARD SORTING 

& SITEMAP 

I had 10 participants from the ages of 32 - 69.  I had a total of 30 cards and 12 different categories which I based off other students and the designlab example for Mirror. 

Mirror card sorting .png
Mirror SiteMap 2.jpg

INTERACTION DESIGN 

TASK FLOW & USER FLOW

The task flow and user flow were designed to help create my person's personal journey, so that it would be easily mapped out before designing. This process was essential for understanding and developing the proper wireframes for the Mirror site.   

User Flow .jpg
Task Flow 4.jpg

WIREFRAMES & PROTOTYPES

After drafting the user flows above, I started working on my wireframes. 

Wireframes Mirror .png

RESPONSIVE WIREFRAMES 

Users were then asked to test out the low fidelity wireframes in InVision App.

Screen Shot 2018-09-22 at 1.38.38 PM.png

UI DESIGN 

RESPONSIVE HIGH-FIDELITY WIREFRAMES 

The logo was the next step in the visual design, then color palette and typography. A UI Kit was created below to complete the final steps before moving on to the high fidelity wireframes. 

UI KIT 

Mirror UI Kit New3.jpg

Using the color palette, typography and ideas from the UI Kit, the High-Fidelity Wireframes were created with each screen walking you through the sign-in process, logging into your account, finding a dress, picking a size and then checking out.  These wireframes were then tested by users with Invision App. Once those tests were complete, items were added or taken away due to the customer feedback and additional research. 

Screen Shot 2018-09-23 at 10.05.07 AM.pn
Screen Shot 2018-09-23 at 10.05.24 AM.pn
Screen Shot 2018-09-23 at 10.03.50 AM.pn

FINAL PROJECT

The final project turned out to be a huge success with my users. They were pleased with the changes,  in some instances- adding an easier checkout system, and working through issues of adding items to the cart, or just even adding that red sale button.  Whatever the item, I addressed each issue head on with additional research added in at every corner, making sure Mirror was ahead of their competitors and ready for the final launch.  

MIRROR Mockup for site .png
bottom of page