MIRROR is a successful clothing store chain for adults and children which opened in 1994 and has over 400 stores worldwide. However, with the digital age rising customers are complaining about a lack of an online store.
The brand design was outdated and they lacked an online platform, so customers were going to edgier and more sustainable sites. They wanted to appeal to the younger generation with the target users being 20 - 35 years old.
A new logo that felt neutral, modern, and fresh. Design a responsive website that allows users to shop directly from their site and appeal to the newer generation.
.png)
We want to know users values and their pain points so that we can design a responsive website with additional features (e.g., filters).
- The fashion retail market is valued at around $300 billion in 2020 and set to grow 3.9% annually (FashionNetwork, 2020).
- The fashion industry accounts for ~10 per cent of global greenhouse pollution. Around 92 million tons of waste and 79 trillion litres of water are consumed per year in order to makegarments (Chalmers, 2020).
- The fashion industry accounts for ~10 per cent of global greenhouse pollution. Around 92 million tons of waste and 79 trillion litres of water are consumed per year in order to makegarments (Chalmers, 2020).
Define the scope of the project and its information architecture.
Based on the research I compiled the most urgent features needed for MIRRORS minimum viable product (MVP).
Determine the navigation and informational flow on the website.
10 participants completed a closed card sort to determine how users would find products in a navigation bar.
I created a site map based on the data from the card sort and based on competitor websites.
I created a task flow based on the persona Lauren Johnson buying size 36 high rise jeans.
To show the same buying process but with more details on the decision steps I created a user flow.
I started thinking about the layout and design of the website.
I grabbed my pen and paper and started sketching ideas for the landing page based on the user research.
Next, to get inspiration for the project, I created a moodboard and researched what worked well for other websites.
.png)
Now that I got a feel for the vibe I was going for and thinking back to the clients goals, I really wanted to hone in on the clean and neutral design but still make it memorable. Initials sketches not included...
I made two iterations of responsive wireframes based off of feedback from my mentor.
I really leaned into the neutral and minimal aspect that MIRROR wanted when creating the color palette and layout.
.png)
From my user flows and 1-1 interviews, I identified key moments in the user journey and focused my efforts on the screens that were most important in the buying process.
Fit feature, interactive photos and videos, and a scroll add to bag feature.
In order to check whether or not the screens work as intended, I set up a prototype in Figma and conducted usability testing to gain insight on the websites functionality.
I created an interactive high fidelity prototype in Figma to test the usability of the website.
I used the data from the usability test (affinity map) to create a priority matrix in order to identify which revisions were high priority and focussed on those fixes first.
The main revisions which were feasible for the time constraint.
"I would still click on that [women CTA on homepage]thinking is women category even thought it says winter collection on top" -Participant 2
"The quick add with sizes in stock up front and maybe grey if it's out of stock would be nice"
- Participant 5
"That's a cool idea [move around and resizing images] as long as I can click on it and make it bigger"
- Participant 1
“This is what they [Zara] should try and aspire to do, they obviously want to be different and editorial or something like that and this is a user friendly way of doing that" - Participant 5
The goal of this project was to rebrand and create a responsive e-commerce website that allowed MIRROR customers to shop online at ease. This project gave me the opportunity to learn so much more about the fashion industry by researching competitor websites and listening to various perspectives from consumers.
Well I like to think so, I had a 100% completion rate and quotes from usability participants like...
"this is sooo good, it looks like a real website"
"I think the website as a whole looks very professional"
"I really like the website, I like a clean website it's easy to navigate"
"The website looked very nice and it's easy to navigate, it's nice that it's all in the same plane and color scheme"
I would add various features as documented in the product development roadmap!
Throughout this process, I learned a lot about user research strategies and how to take insights and implement them into sound design decisions. I learned the importance of user testing and how valuable those sessions can be to the final product.
Next time I will...
