Mirror
E-commerce Responsive Web Design
Role: UI & UX Design
Team: Solo
Duration: 4 Weeks
Project Background
Mirror is a globally successful clothing store targeting a budget-minded audience who look for low-cost clothing for any occasion. The quality is pretty good and the prices are rather low. Their main goal is to make any type of clothing accessible to everyone. They are very successful offline and have over 400 stores around the world in 32 countries.
However, they are very late in the game of digital transformation. They decided a few years ago to not invest in e-commerce because they preferred keeping the service in person. However, they have acknowledged this mistake and realise that e-commerce is a good way to boost their sales and reach a larger audience.
Problem
Mirror wants to translate their offline shopping experience to an e-commerce platform as well as rebrand for a more modern look.
Objectives
Design a responsive website that is easy to use and allows customers to browse through all products intuitively.
Design a logo for the company that is modern and neutral enough to attract all types of people and styles.
Research
The first step was to perform research in order to find out the following:
-
Discover who the main users will be along with their needs, goals and preferences.
-
Find out who the main competitors are and what makes them successful / more appealing.
-
Understand user's previous experience and pain points with online shopping.
-
Discover any user expectations of an e-commerce platform.
Competitive analysis was conducted first to find out how direct competitors tackle the issues faced in e-commerce. As well as find indirect competitors who could have ideas or strategies which could be adapted for use. This would also help identify any industry standards, trends, and expectations that the end product would need to meet.
Key findings from competitive analysis
-
E-commerce is an essential tool to help push sales for any retail business.
-
Convenience - Ability to buy and sell 24 / 7.
-
Extensive range of products - Without limitations of a physical store more products can be offered to customers.
-
Limited customer service.
-
Lack of instant gratification.
-
Not being able to see or touch the product physically.
Understanding people on a large scale
Next, a survey was conducted to gain quantitative research data about people’s shopping habits and preferences. The aim was to capture a wide-ranging audience and to see if I could
identify the largest demographic most likely to use a clothing e-commerce website.
Interviews
Participant #1
Female, 30-39, Kindergarten Teacher
Married, no children
A self-confessed shop-a-holic.
Buys clothes “at least twice a month” mainly for herself but also for her husband.
Shops both online and at physical stores.
Key insights
-
Likes brands as they equate to quality.
-
Has preferences for certain stores due to style and size/fitting.
-
Trusts bigger stores and brand names.
-
Prefers to shop when there are sales.
Participant #2
Female, 30-39, Primary School Teacher
Married, 2 children
Young mum who buys clothes for her entire family.
Mostly shops online and has specific preferences based upon who she’s shopping for and whether or not there’s a sale on.
Key insights
-
Shops at specific stores depending on who/what she’s buying.
-
Has a preference for stores that cater to her style/size.
-
Reluctant to pay full price for items.
-
Loves sales.
-
Feels that shopping online is like a game.
Participant #3
Female, 30-39, Recruitment Consultant
In a relationship, no children
Shops almost exclusively online for clothes unless she needs the item quickly.
Helps eliminate a lot of her pain points of physical shopping such as having to find the cheapest price, crowds, long queues, physically traveling to the shop.
Best value for money and quality is the biggest factor for this participant.
Key insights
-
Top priorities are price and quality of products.
-
Doesn’t care about brand names.
-
Wants to shop for everything in one place.
-
Doesn’t like to shop physically unless urgent or needs to try something on.
What insights were uncovered?
-
Online shopping is preferred over physical experience.
-
A large portion of people have online shopping experience.
-
Shopping online can help save money on purchases.
-
Cheaper prices are a big motivator for online shopping.
-
Online shopping saves time and effort.
-
Product transparency is important. Ie. Product photos taken outside of a studio environment.
-
An established physical retailer can be an indicator of quality.
Consistent pain points described -
-
Size & fitting-related issues.
-
Being able to return purchases in an efficient way.
-
Concerns about whether the product descriptions are true to life.
Based on the research conducted, I identified patterns in behaviour, common goals, and pain points of users. This helped create an empathy map that was then further refined and humanised then presented as the target persona.
Define
With an idea of what problems and needs users had, it was time to start defining the product and what features would help solve their pain points.
Identifying common user and business goals would help to decide and steer the direction of developing a feature roadmap. Further in-depth competitor analysis in the form of a feature comparison would also help to identify features that were essential and expected from the user.
The next step was to figure out the best way to organise the website so that it would be easy for people to understand and navigate. A card sorting exercise was used to better understand how people would categorise products and how they relate to each other.
Using this information enabled me to create a sitemap that would be logical and intuitive for the user.
With a sitemap established I could start defining user flows and the main paths people could use to navigate the website. Along with task flows that show a high-level view of how they would complete certain tasks. The flow diagrams also helped to create a product requirements list that outlined the functionality of different pages of the website and further inform the feature roadmap.
Ideate
With the product features laid out it was time to start sketching wireframe ideas for how the website could look.
The initial rough sketches helped me with blocking out lo-fi wireframes and consider how they would translate in a responsive manner.
Visual design
Once a skeleton of the website had been laid out it was time to start fleshing it out by creating the visual design. This would be how the look and essence of the brand is conveyed through graphic design elements such as typography, colour and imagery.
I started off by creating a mood board by thinking about what keywords would best describe Mirror as a company, as well as some consideration to the main persona.
This would help to inform design choices about how the new logo would look and feel along with colour and typography choices. All the elements were incorporated together to create a style tile that would define the brand.
All the visual design and branding elements were combined to create a UI Kit.
Prototype
With most of the visual elements complete it was time to start applying these styles to my wireframes and take them to a high fidelity state. This would allow me to create a prototype of the website ready for testing.
Test & Iterate
Like research, the first thing to establish was to define what I was going to test and how I would test it. A plan was created in order to test the following:
-
Can users quickly find what they want?
-
Can users successfully make a purchase?
-
Is navigation intuitive and easy to understand and use?
The methods for testing would be:
Moderated test - This would provide qualitative data and insights into the usability of the website.
Unmoderated test & SUS survey - The idea for this would be to collect quantitative data to help judge how usable the website was.
For the moderated tests I managed to recruit 4 participants with differing backgrounds.
They were given 2 tasks.
-
Buy a men’s navy blue jumper
-
Buy a woman’s white jumper
They were asked to think out loud and describe their thought process as much as possible. A series of questions were also asked at the end based upon how participants reacted during the test.
The SUS survey was also based on the 2 tasks above which would be completed unmoderated by participants, after which they would need to complete a 10 question SUS survey.
Results
The results of the survey were collected and a SUS score was calculated. This showed that the website was already at a very acceptable level of usability. However, it couldn’t help identify which areas needed improvement.
From the interviews, a series of notes and comments were made regarding issues both positive and negative. These were collected to create an affinity map where they were categorised into groups that gave focus as to which areas needed improving for the next iteration.
With the feedback and test results, I went on to create another iteration of the website.
Home page Iteration 2.
Category page Iteration 2.
Product detail page Iteration 2.
Outcomes & Lessons
The final outcome of the project was a simple and easy to navigate website that allowed users to view and purchase products in an efficient way.
Being my first full end-to-end UX project there were a lot of lessons learned. Apart from understanding the UX design process as a whole, I realised how important research is to developing a product and that it is constantly referred back to in order to help make effective decisions. Not only that but the research data that is collected must be synthesised effectively to help define problems.
Another lesson from this case study is that defining a specific goal and what problem is being solved is essential to steering the project in the right direction and keeping it on track so that what is developed in the end has purpose and is relevant in solving that problem.
Ideally given enough time I would’ve gone back to the research phase in order to ensure I had the appropriate information to help better define the problem I was solving and understand users and their pain points on a deeper level.