Work
Contact
Photography
Mirror is a global clothing retailer. I designed a responsive ecommerce website and gave the Mirror brand a new look.
Established in 1994, Mirror is a successful clothing company with over 400 retail stores around the world. They’re all about providing clothing that’s accessible for everyone with good prices and a variety of styles. Mirror has so far relied on physical locations to conduct business, and now wants to focus on building an online store to make shopping more convenient for their customers. They also want to rebrand the company with a modern, neutral, and fresh look.
To refresh the Mirror brand and build a responsive ecommerce website that meets the needs of their customers and business.
Empowered by user research and user testing, a responsive website was designed and Mirror was given a fresh, new look.
This is a project I completed for Designlab’s UX Academy. Mirror is a fictional clothing company but the research is organic and the design is based on real user voices, in combination with mentor and fellow student feedback ✌️
The first step was to uncover the needs, desires, and pain points of customers that shop for clothes online.
To help me discover these things, I analyzed industry competitors, conducted user interviews, and developed a user persona.
To cultivate empathy for the user, I also created an empathy map and storyboarded a typical scenario for accessing the future site.
What features do users want clothing sites to have?
What problems do users struggle with when shopping for clothes online?
Why would a user choose one clothing site over another?
What sorting filters are most important to users when looking at clothing online?
Why do users prefer shopping for clothes online instead of in a store (or vice versa)?
Once I understood users’ needs, I set out to determine how to organize the website in a way that makes sense and helps acheive both user and business goals.
This involved conducting a card sorting exercise and creating a sitemap.
The research and components I’ve done up until this point can now inform how the site will be used and what an interaction with the site actually would look like.
This phase of the project involved creating task and user flows in addition to low-fidelity wireframes.
Next it was time to jump into the actual UI of the website. Not only did this involve mockups of pages at various screen sizes, I also created a UI kit complete with design patterns to aid in the development and future iterations of the site. Since Mirror also wanted a simple brand refresh, I also designed a logo, prepared a mood board, and selected a new color palette and typography to match their brand values.
Complete high-fidelity designs of several pages were created in Sketch for desktop and mobile screen sizes and later implemented into a prototype using InVision.
Participants were asked to complete a series of tasks while I took notes on their actions and asked questions to understand their decision-making process. These tests were conducted in person.
Observe and measure usability on:
General site navigation
Finding specific items
Adding an item to favorites
Adding an item to the cart
The checkout process
100%
Measure user success, failure, and pain points in completing the tasks
Discover ways in which the site design could be improved or changed in future iterations
85%
Before designing anything, you must empathize with the people that will be using the product, and understand their needs and pain points. You need to define your own assumptions and hypotheses and discover if they’re correct or not and why. Otherwise, you might be designing a solution to a problem that doesn’t exist or a solution that nobody likes.
A pretty interface uninformed by research, empathy, and common design patterns probably isn’t very usable. Follow usability heuristics.
Particularly with digital products, iteration is a necessary part of the design process. Even if you think a design is “final” and fulfills all of your user needs and stakeholder goals, there is always room for more testing and iteration. You’d be surprised how much your own assumptions can be misguided or just plain wrong.
