Mirror is a clothing store that originated in 1994. Currently, they have over 400 stores in 32 countries and are very successful. Mirror’s goal is to provide clothing that is accessible by keeping prices low while maintaining the quality of clothes so that they last a long time. Mirror carries a wide variety of styles to suit any occasion and person.
In current times, there are many sales opportunities online. However, Mirror lacks a strong online presence as their website is outdated and does not allow customers to make purchases. In this fictional project, we want to help Mirror with online sales.
We want to learn what creates a positive online shopping experience for customers so that we can design a responsive e-commerce site for Mirror that has a modern appeal and is easy for customers to purchase items.
Duration: 1 month (September 2021 to October 2021)
Role: UI/UX Designer
Tools: Figma, Whimsical, Optimal Workshop
In order to familiarize myself with operating an e-commerce site, I conducted a competitive analysis to see how competitors design their sites and what their strengths and weaknesses are.
I conducted a total of 5 user interviews with participants who were recruited through a personal network pool. All participants were asked demographic questions related to age, occupation, and annual income/salary. Through these interviews, I wanted to discover what the main goals, motivations, and pain points were when shopping for clothes online.
I created a persona based off my research findings from the user interviews.
After conducting user research and creating a persona, I started to think about information architecture. I generated ideas for what information was going to be included in the designs and how the information was going to be presented.
I had a total of 8 participants remotely participate in an open sort. My goals were to 1) see what categories participants create when organizing clothing items and 2) observe any similarities or differences in how participants categorize cards.
With the findings from the card sorting exercise, I created a Site Map to show the general structure of what Mirror's website will be like. I also took into account my previous competitive analysis and how Mirror's competitors organize their content and navigation.
A task flow was created to visualize the pages and actions involved when a user carries out the task of finding an item on Mirror's site and purchasing it. The goal was to keep the task flow as short as possible and not involve too many steps in order to create a better user experience.
I then expanded the task flow with different routes the user might take when carrying out the main task. I also took into consideration questions that the user may be asking themselves throughout the process. The full user flow can be viewed here.
In this phase, started designing Mirror's responsive pages. I started off with sketches, low-fidelity wire frames, and then produced high-fidelity designs.
After the initial designs and prototype was completed, I moved onto usability testing. All usability tests were conducted in remote sessions with participants recruited from my personal network pool. After all tasks were completed, I asked a few follow up questions to gain more insight on their experiences.
This was the prototype that my participants used during the usability tests.
I created an affinity map by organizing my notes on what participants said or felt into three categories: Successes, Pain Points, and Improvements. I further sorted the notes by the screens involved in the usability test.
After gaining insight as to what was done well and what areas needed improvement for each page of the prototype, my next task was to make revisions to the design. Under my time constraints, I focused on the revisions that were urgent and important.
Due to the time constraints of this project, I was only able to focus on one task flow and the main pages involved for desktop. If I had more time to work on this project, there are some steps and areas I would focus on:
