A brand redesign and responsive fashion e-commerce website



2021 - 6 weeks
(120 hours)



UX Designer
UX Researcher
UI Designer

Paper & Pen

01. INtroduction

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.






My Design Process

02. Empathize

We want to know users values and their pain points so that we can design a responsive website with additional features (e.g., filters).

What do we need to understand?

1. Understand what attracts users to specific sites
2. Identify what features users interact with
3. Identify pain points
4. Assess how users navigate through websites

Secondary Research

Understand the market

Competitor Analysis

Research what the competitors strengths and weaknesses are

1-1 User Interviews

Gain an in-depth evaluation on users' goals, wants, needs, and frustrations


Gain quantitative data on users' Instagram behavior

Research Findings

Secondary Research

- 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).

Competitor Analysis

1-1 User Interviews

Sales Manager:
31, Sweden

He cares about a quick and easy shopping experience with very neutral and plain websites. More likely to purchase if something is sustainable.

"Usually when I shop online I know what I want to purchase."

PhD Student:
24, England

She doesn't like to shop online because she's not patient enough for delivery. Shops in person as a social activity and when she shops online filters are a MUST.

"Stores are messy, crowded, have closing times, can't find my size or clothes I want."

23, Netherlands

She cares about the sustainability of a product, but it doesn't determine her purchasing. She prefers shopping in person but online gives instant gratification. Willing to spend more on expensive items.

"I'm on a budge so I always sort low too high."

Digital Marketing Manager:
31, US

She wants to be conscious about fast fashion but can't fully make the switch due to pricing and convenience. When there will be an option she would be happy to do so.

"There's so many options without filters then you can get stuck for hours..."

Survey Results

Key Takeaways

...HONORABLE MENTIONS: Filter options, correct sizing, and a good return policy


Define the scope of the project and its information architecture.

User Persona

Feature Roadmap

Based on the research I compiled the most urgent features needed for MIRRORS minimum viable product (MVP).

Full Feature Roadmap

Information Architecture

Determine the navigation and informational flow on the website.

Card Sort

10 participants completed a closed card sort to determine how users would find products in a navigation bar.

Site Map

I created a site map based on the data from the card sort and based on competitor websites.

Task Flow

I created a task flow based on the persona Lauren Johnson buying size 36 high rise jeans.

User Flow

To show the same buying process but with more details on the decision steps I created a user flow.

04. Ideate

I started thinking about the layout and design of the website.

Wireframe Sketches

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.

Logo Design

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...

First Draft

Final Logo

Responsive Wireframes

I made two iterations of responsive wireframes based off of feedback from my mentor.



UI Kit

I really leaned into the neutral and minimal aspect that MIRROR wanted when creating the color palette and layout.

High Fidelity Wireframes

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.

*images used from Mango

Product Page

Fit feature, interactive photos and videos, and a scroll add to bag feature.

05. Testing & revisions

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.

Usability Test


1. Evaluate the usability of the website based on learnability, memorability, errors, and overall satisfaction
2. Observe how the navigation bar is used
3. Observe if/how participants use the filter and sort
4. Evaluate if the review/fit guide is helpful
5. Uncover opportunities to improve the user experience

Test subject

High fidelity prototype for MIRROR on desktop


Navigate the women’s section and find the “Cozy knitted cardigan”, read the reviews, then add the beige cardigan in size S to your cart and head to checkout.


5 participants: 24-31 years old, from Europe


- 100% completion rate
- 95% error free rate
- 5/5 participants made an error trying to navigate to the women’s section
- 4/5 were confused how to interact with the product images *

Key Takeaways

- Participants liked the logo and found the website easy to navigate
- Fix the CTA on landing page
- The product images need to be more obvious that you can interact
- Add height on review
- Change some confusing wording


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

Category Page

"The quick add with sizes in stock up front and maybe grey if it's out of stock would be nice"
- Participant 5

Product Page

"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

Final Design

06. Next Steps

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.

Did I solve the problem?

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"

If I had more time...

I would add various features as documented in the product development roadmap!

- Create a real prototype which could be tested by users for a longer amount of time to gain better insights on the product page feature
- Shop socials feature
- 24/7 chat
- Country and Language
- Sustainable packaging
- Mobile app

What I learned

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.

What I would do differently

Next time I will...

- spend less time making various different screens which won't be used in the user flow.
- show my designs often and get feedback
- keep all my design in one organized Figma file