MIRROR

a Fashion Ecommerce Responsive Website

Duration: 80 Hours

My Role: End-to-end UX/UI Designer

The story behind mirror

Founded in 1994, Mirror is a company that promotes affordable eco-friendly clothing for any occasion. With low prices and good quality, their main ideal is to make any type of clothing accessible to everyone. Despite having success with in-person sales around the world, their online presence is almost non-existent. We need to keep up with the digital transformation of this day and age or face customers going to find other shopping options.

Determening the Problem Statement

With the world turning more toward online consumerism, maintaining an online presence is key. Even though Mirror is a global brand, it did not feel the need to go online. Due to the pandemic, people were unable to visit the store in person, causing a gap in sales. Currently their website is outdated and could use help with rebranding. They understand that they are behind in creating an online presence and need to create a responsive website with effective search filters for customers convenience. This will also solve their problem of selling stock for items that they have remaining.

STAGE 1: RESEARCH

UNDERSTANDING THE MARKET

Secondary Research

In secondary research I studied various online e-commerce fashion websites and gathered relevant information. I viewed both fast-fashion as well as sustainable fashion insight. I found data from several websites looking for what was trending and how sustainable fashion has impacted the fashion industry.

With Secondary research I summarized data and collated it to increase the overall effectiveness of research. I looked at current trends, user reviews, and started to get an idea of what potential and current customers might be looking for.

kEY fINDINGS FROM Secondary Research

Click HERE to view my Research Notes

Knowing the competition

Before I furthered my journey, it was extremely important to know our competitors in order to construct a strategy for the market and provide the best product for the future. While in the process of Secondary Research, I observed a few companies and websites which were leading sustainable clothing brands. I created a Competitive Analysis to study and understand the features which were available on each competitor’s website. This helped to decide how I could make the brand unique in comparison. I prepared a report which is shown below:

Prioritizing Features

After compiling the competitive analysis, I selected a list of several features that I was going to produce on the website. I sorted out the features’ impact value and building cost to the project. The features have been classified according to impact value and priority. This roadmap helps us to understand the feature requirement according to priority so we can categorize what is essential to make sure the product works and what can be added at a later time.

STAGE 2: define

UNDERSTANDING THE USERS

Shopping Habits

Online clothing shopping is used by a vast number of people from different age groups. The best way to get to know about the users is by discussing with them. Feedback from existing users of online clothing stores was necessary. Instead of having an informal, open-ended conversation, I created a list of relevant and structured questions. I interviewed people via Google Meets, Facetime and in-person in order to get their opinions and answers to those questions.

You can see my Interview plan HERE and the Empathy Research Findings HERE

Summary of Findings from User Interviews:

Six Participants who shop for clothes online were interviewed. Two male and four female from the age group 28-30. Most of them were avid shoppers. Most of them felt they preferred in-store shopping due to the easiness of trying on clothes and returns; however, they enjoy the convenience of online shopping.

NEEDS

All participants state the importance of accurate sizing, having several filters to narrow down their search and the importance of the quality of the material of the clothing.

FRUSTATIONS

All participants find returning clothes and dealing with customer service to be a hassle. They also reported that sizing and the feel of material were a big issue when purchasing clothes.

MOTIVATIONS

All participants stated how ads were a big influence in helping to determine where they shop online. They all enjoy the convenience of online shopping due to the easy accessibility at any time.

You can view the Research Debrief HERE!

creating a persona

After gathering all the research and feedback during my interviews I created a persona that spoke to the representation of the target audience.

project goals

Online clothing shopping is bombarded with so many clothing companies that it is essential for a brand to stand out in how they present their clothing. In order to do this, we must focus on some business goals. A project becomes a success when both the business and the users are satisfied. I built out a model showcasing the user’s goals alongside business goals in order to find the common goals and how these would best serve a purpose to make a cohesive product that satisfy all.

INFORMATION ARCHITECTURE

Fashion Foundation

Now that I had conducted the research, I had a basic idea of the pages I would need to build in order to satisfy users. I created a sitemap, which listed out all the pages in order to help with mapping out the navigation between the pages on the site.

After I created the initial structure of the site and mapped it out, I needed to understand how users would navigate it to find a product and complete the task of purchasing an item, so I created a task flow.

Next I created a user flow of all the potential paths that users would be able to take to reach the final action of purchasing a product. There are several ways a user could arrive at a product page such as ads on social media, navigation through promotions or discovering through a google search.

STAGE 3: design

Sketching it Out

In order to get the creativity flowing, I started off sketching with pencil and paper. This allowed me to produce several different iterations during the beginning stages in order to decide what the best solution for the product is.

From these sketches, I proceeded to creating mid fidelity wireframes, where I was able to play around with the elements without having to worry about the stylization or colors.

TOOL-BASED WIREFRAMES

Desktop Wireframes

By observing several other websites and sketching other iterations, I created low-fidelity wireframes designed in Figma. It provided a clear overview of the page structure, layout, information architecture, user flow, and overall functionality of all elements.

Click HERE to view all desktop Wireframes

Responsive Wireframes

I also created Responsive Wireframes in order to get a feel of how the desktop version would scale down to tablet as well as mobile.

Click HERE to view Responsive Wireframes

VISUAL DESIGN

Stylization

For the overall visual design, I wanted to create something that was clean and minimal. I selected a neutral color palette deriving more from earthy tones, since Mirror is a sustainable company. As well as adding in elements such as leaves to give a sense of natural and organic, hence the Leaf iteration in the Logo.

Completed UI Design

Because there was more time throughout the process, I was able to create hi-res designs before creating the prototype. Check it out!

Check out all the rest of the Hi-Res Screens by clicking HERE!

STAGE 4: TESTING

User Interaction Testing

I designed a plan and conducted the usability testing of the desktop high-fidelity prototype. This was essential in order to validate the design and see if there were any nuances. Participants were given a task and their behavior was observed. Participants were encouraged to discuss openly and discuss whatever came to their mind while using the prototype.

View complete Usability Test Plan HERE

Changes after User Testing:

From the user testing, I was able to conclude that the prototype was a success for adding an item to the shopping bag and going through the checkout process. User testing helped to uncover a couple of issues in elements that needed to be fixed for better usability. A couple are listed here:

CREATE NOTIFICATION POP UP FOR IN-CART ITEMS

Participants wanted to confirm that the item they chose was added to their cart.

MAKE SURE SPELLING IS CORRECT THROUGH OUT MOCKUP

Participants wanted to confirm that the item they chose was added to their cart.

Mirror Prototype Walkthrough

Next Steps

This was my first responsive design project that I completed end-to-end and it was extremely exciting and fulfilling. Every stage helped me to understand more about the overall process and improve my skills as a researcher and designer. Although I only explored the checkout process in this project, my next step would be to explore other journeys.

Click HERE to view Case Study