​
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
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.
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.
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.
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.
WIREFRAMES & PROTOTYPES
After drafting the user flows above, I started working on my wireframes.
RESPONSIVE WIREFRAMES
Users were then asked to test out the low fidelity wireframes in InVision App.
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
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.
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.
