MIRROR Onlineshop

eCommerce Design

Overview

Project Background
Mirror started back in 1994 as a clothing store targeting a budget-minded audience who looked for low-cost clothing for any occasion. Their main goal is to make any type of clothing accessible to everyone in a low price. Mirror is very successful offline. They have over 400 stores around the world in 32 countries.
Mirror is late in the game of a digital transformation. Although they have a strong global offline sales network, they have to build up their eCommerce website from the scratch. Mirror has a very outdated logo and would like to redesign it in a modern and fresh way.
Problems & Objective

Research & Analysis

Competitor Analysis

In the research, there are three well-known international fashion brands are compared and reviewed. Both of them have well-established retail shops as well as the online stores worldwide. They have been delivering a good online shopping user-experience. There are some common design features can be a good reference for designing the online shop for Mirror.
STRENGTH
STRENGTH
Branding and Marketing
•Global retail shop network, 1439 stores in 2020
•Target at people of all ages
•Logo with its unique character, easy to memorize and down to earth
•*UniqloLive Station
•The brand is from Japan, it has a better understanding of Asian preference
•Can shop online and pick up the items at a retail store

Function and Features
•Full-width hero image
•Mega menu to include all categories
•Multi-layer product filters
•Instant preview of search result
•Responsive website

Style and Design
•Low-cost clothing
•Basic design, with good quality
•Model- relax and with a smile
•*Cross over with high fashion brands, e.g. La Maire, Jil Sander, etc.
STRENGTH
Branding and Marketing
‍•Global retail shop network, 2270 stores
•Target at people of all ages
•Target at people who like mix and match follows fashion trend
•Fashion style logo brand design, simple logotype in black
•Can shop online and pick up the items at a retail store
•with category of ZARA Home
‍
‍Function and Features
‍•Mega menu to include all categories
•Full-width product grid views
•Instant preview of search result
•Responsive website•*Toolbar of accessibility
•Chatbot for customer support
‍
‍Style and Design
‍•Affordable clothing
•Chic design
•Color in a cool tone
•Model- stylish but no smile
Branding and Marketing
‍•Global retail shop network, 5076 stores
•Can shop online and pick up the items at a retail store
•Target at people of all ages
•Target at people who like mix and match follows fashion trend•Straight-forward logotype design
•Offer student discount
with category of H&M HOME
‍
‍Function and Features
‍•Mega menu to include all categories
•Full-width product grid views
•Responsive website
•Chatbot for customer support

‍Style and Design
‍•Low-cost clothing
•Stylish design
•Model- natural
WEAKNESS
WEAKNESS
WEAKNESS
From Japan, not enough understanding of European or American culture
Universal but not personalised
Loading speed is not fast enough
With Asian model, should include more from other continents
No precise slogan or theme
Call to action is not strong enough
It takes time to search a category
•No obvious slogan
•Body font size is too small when using a smaller display
•It takes time to search a category
•No obvious slogan or theme
•Select language button is not easy to be found
•It takes time to search a category
•Body font size is too small

User Interview & Summary

There are five interviews conducted. The five interviewees are with different background and occupations.
I found that the most of the interviewees are budget sensitive, prefer a user-friendly UI and simple flow of online shopping. They love to add the items to the wishlist, and place the order if there is a seasonal sale. They use both mobile devices and desktop to browse the items but most of them prefer to place the order via desktop because they think that will be more formal and reliable.
NEEDS
FRUSTRATIONS
MOTIVATIONS
• 3/5 interviewees need a Live Demo
• 3/5 interviewees expect a brilliant search bar
• 1/5 interviewees expect the online shop will recognize her when she returns, e.g. the category she used to visit; Notification of the new items/items on sale
• Simple check out flow
• Most interviewees are budget sensitive, they will check out the Item on Sale and buy the items during the sale
• 3/5 interviewees will shop with a purpose. Easy to find the item motivates them.
• A good customer support, return policy
• Good security will make customers shop without any further worries.
• Most interviewees worry about the size issues
• Product categorization is too complicated
• The search function is not powerful enough
• The notification is not instant enough
• 1/5 interviewees encounter a big security issue, credit card information was stolen.
Persona
Mia is one of the personas I defined. She represents a target group users. This group of users  are young professionals. They are tech-savvy and love to shop online, buying clothes.
Project Goals
The research and analysis gives a clear picture of our target group users. Here is the Venn Diagram created to summarize the goals of Business, Technical and User and the various KPIs are defined. These are the requirement and constrains of designing the online shop for Mirror in the next stage.

Information Architecture

A good online shop provides a good user flow, in which the users can easily find the items under the relevant product categories. However, there are many products and product categories in an online shop. Which products should be in which product categories? How are the users habits? This is what I have to figure out. Then, I setup a Card Sorting Exercises, in which the selected group of people were asked to put the products into the relevant product categories with their personal user experience. The following is the Similarity Matrix.

Card Sorting: Similarity Matrix

• 100% grouped Heels and Boots together
‍
• 85% of participants grouped Bras and Under wear together
‍
• 71% of participants grouped Boots, Loafers, Sandals together
‍
• 71% of participants grouped Blouses and Shirts together
‍
• 71% of participants grouped Light Down and Blazers together
‍
• 71% of participants grouped Underwear and Boxers together
Dendrogram
Meanwhile, the Dendrogram provides an insight. It shows the similar user preference, which is a good reference for defining the product categories of the online shop in the next stage.
• 71% of the participants put Boxers, Bras and Underwear into category Innerwear
‍• 71% of the participants put Sandals, Loafers, Heels and Boots into category Shoes and Casual
‍• 71% of the participants put Blazers and Light Down into category Outwear
‍• 56% of the participants put Graphic Tees, Sweaters, Hoodies, Sweater shirts, Shirts and Blouses into category Top
Interaction Design
Site Map
Here comes the Site Map of a online shop created based on the finding of the previous research. The What's New and Sale are put at the eye-catching places of the global menu bar. Then, we have got three main categories on the menu bar, i.e., Men, Women and Kids. There is a search bar and wishlist always shown on the top corner of the website.
details
Define the Flows
After the Site Map, I created the Task Flow and User Flow accordingly. The both flows are kept simple, as the online shopping is not a new things to the users but the users expect a familiar user experience. For example, there is landing page showing the various category, i.e. What's New, Sale, Feature items, etc.; there is product list page listing out all items under a product category; if the user would like to check further, there is the product detail page; finally, there will be a shopping cart page for users to check out and place an order.
Task Flow
User Flow
Wireframe
Then, I have developed the website structure and create the wireframe of the key pages, i.e. landing page, product list page, product detail page and shopping cart page. In the wireframe, it shows the scale, proportion of the different modules, e.g., images, descriptions, menu bar and filter bar, etc. The wireframe helps me to test and evaluate whether the things are make sense to the users.
details
User Interface Design
As the Mirror project requires to improve its brand image and the positioning of the online shop. The Logo, Moodboard, Brand Style Tile and UI Kit are created for Mirror based on the persona we defined. The target group users will be interested in stylish things, they are imaginary, prefer the natural things and relax vibe, they love to explore the new things.
Moodboard
Brand Style Tile
UI Kit
Page-1
Page-2
Prototype
According to the summaries, findings, features and brand image defined, here comes a prototype design. The beige main background color provides a natural and relax vibe, the bold and cool selected fashion photos gives a stylish but professional vibe, keep the call to action buttons simple and at eye-catching area for uses to access easily.
details

Usability Test

I believe the Usability Test is the most important to make sure my design works well before final publish. I have recruited six people to test my prototype. There are few task requires the people to complete, the process and result are summarized below. Between, I also talk to them, collect their feedbacks for final polish of the design.
Report
OBJECTIVE
‍The objective is to test if the users find it smooth or difficult to shop online.
‍
‍PARTICIPANTS
‍Number of participants: 6
Age: 25-40
‍
‍SUMMARY
‍There are 6 interviews are conducted. The 5 interviews are with different background and occupations.
Most of interviewees are budget sensitive, prefer a user-friendly UI and flow of online shopping.
TEST DEBRIEF
• 2/6 participants click the Search Bar to find out the item
• 3/6 participants click Mega Menu to find out the item
• 1/6 participants click Search by Tag to find out the item
• 3/6 participants tried to click the Burger Menu but find it not a correct path
• All participants can select the size they wish•All participants recognise the icon “heart” represents the Wishlist
• All participants will click the button “solid colour heart” on the item of Wishlist to remove to item
• All participants will choose the payment method to place an order
Final Design
At last, the prototype is revised accordingly and polished to a final design. Since it is a school project, I have developed the key flows, feature and design of the online shop. There is still a lot of details could be fine-tuned in the future. Thanks for all contributions from the participants, that makes the whole eCommerce design solution concrete and close to market.
details
Source images courtesy Pinterest. The images are not commercial purpose.

Want to get in touch?
Drop me a line!

I believe “One swallow doesn’t make a summer”, we have to make the summer together.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
ORIGINAL DESIGN by Jim Mau.
FacebookTwitter