MIRROR
Crafting an online identity for a clothing retailer.
2020
USER RESEARCH
BRAND IDENTITY
UX DESIGN
PROTOTYPING
BRAND IDENTITY
UX DESIGN
PROTOTYPING
INTRODUCTION
PROJECT BRIEF
Opening in 1994, Mirror is an internationally successful clothing retailer, with brick and mortar locations across 32 countries. They are company that prides themselves on offering modern styles at an affordable price. For the past twenty-six years, Mirror has thrived as an exclusively brick and mortar establishment, but as times change rapidly they have begun realize the necessity of an online presence.
THE CHALLENGE
As the UX designer for this project, I was tasked with crafting an online identity for Mirror. As a clothing retailer, they had the advantage of entering into an already well-developed market – but there is always room for improvement. The big questions to be answered here were “How do I improve upon the classic e-commerce model?” and furthermore “How can I elevate this familiar experience while maintaining comfort and familiarity?”
EMPATHIZE
RESEARCH BEGINNINGS
Because the online clothing retail industry is well-established, there was plenty of data on shopping habits, competitors’ models, etc. By researching the way people shop online, I was able to learn more about some pain points already identified within the market, as well as establish a target demographic. By analyzing the experience Mirror’s competition, both direct and indirect, provide, I gained even more insight into the market and how best to improve upon it.
CONVERSATIONS
Through a series of phone conversations, I gave my interview participants the floor to speak about their shopping experiences, preferences- to tell me their stories in their own voice. I learned about the frustrations that can come from trying to find a pair of jeans that fit just right, about the joy of exploration, about the relation between visual appearance and identity. These are insights invaluable.
DEVELOPING A "WHO"
After my conversations, I used the affinity map method to synthesize my findings, and from there understand the common needs and frustrations. However, the goal of this project was not to design for a set of needs and pain points – we design for people. Rather than create for a demographic, I wanted to build for the knowable individual. So for Mirror’s online experience, I built for Morgan.
DEFINE
INFORMATION ARCHITECTURE
In order to design for the mental model of an online clothing store, I needed to understand more deeply the way people organize large sets of information. Using a card-sort exercise, I was able to learn more about people’s categorical arrangement of information – in this case, clothing. The findings of this exercise helped inform a more human site map – organized in a familiar and logical way.
KEY TASKS
Identifying the key functions of a clothing website allowed me to create a set of things to be done. Understanding what needs to happen and how gives only a limited scope however, so putting myself in Morgan’s shoes and considering her thought processes allowed me to build a more human task flow.
BUILD
WIREFRAMES
Starting with a low-fidelity mockup to lay out the elements of the page, I began to put the pieces of the site together. Keeping in mind my past research, what I had learned about the way people organize information, and what people need to be able to do, I began to build a site with the shopper in mind – prioritizing ease of use and familiarity. Using InVision, I used this early sketch to create a prototype.
BRAND IDENTITY
Mirror not only needed an online presence, but also a modernized identity. I wanted to highlight the sense of sophisticated minimalism of the brand. In creating a brand identity, I was inspired by Japanese minimalist streetwear – the muted neutral tones, a sense of quiet coolness and confidence. I wanted to make Mirror feel like a luxury accessible to everyone.
TEST
INCREASING FIDELITY
After applying the aesthetic choices to the wireframes, I had a workable prototype that was ready to be tested. I wanted to be sure that the product I had created functioned in a way that made sense and felt natural.
ASSESSING USABILITY
To see how people interacted with my design, I conducted a series of tests of certain key tasks. I asked participants to walk me through their thought process while working through the key functions of the site to make sure I was understanding their perspective. Though I had researched and talked with shoppers, there was still plenty to learn from the tests, and necessary changes to be made.
CONCLUSION
PARTING THOUGHTS
When I began this project, I felt as though I had a pretty clear vision in mind. I had used clothing sites before, I felt I knew a bit about fashion. However, I failed to consider how insular my perspective was. By the end of the project, I understood that I was designing for people, real people with real needs and motivations. In opening my perspective, I was able to rise to the challenge of improving upon familiar structures, while keeping those interacting with them at the forefront.
