Moving a clothing retailer online—A detailed UX/UI case study
About Mirror and their online push
Mirror is a global brick and mortar clothing company that started in 1994. They tout inexpensive clothing for any occasion, much like Old Navy, and H&M. Unfortunately, the shopping landscape has changed in the past twenty years with the advent of online shopping. Mirror opted not to invest in digital because they preferred to keep their service in person.
While hugely successful offline, Mirror quickly realized is that the opportunity for sales is huge online, and they’d be short sited not to invest the time to move their clothing online. The customer demand is high, and Mirror has been listening to complaints from customers not being able to find their particular sizes in-store. They also have tons of back inventory that is proving to be difficult to sell in-store, moving their brand online would help solve this.
Regarding the brand, Mirror feels they are very outdated. They’ve contacted me to provide a complete brand refresh. They are willing to abandon any logos or branding materials they’ve used in the past for something new, and refreshing.
Problem Statement
How might we: Design a responsive ecommerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others?
We will also be addressing:
How might we: Design a logo for the company that is modern and neutral enough to attract all types of people and styles?
Scope
My goal as a UX/UI designer and researcher was to thoroughly answer these questions through a specific UX design process. My goals and Mirror’s had to align, and I was very excited to take on this task!
Let’s get started!
The first thing I want to do is identify the UX design process, and define each stage before going into more detail throughout the case study. Take a look at the graphic below to get an idea of the outline I followed throughout this process:
Project KPI
Before we get started, I think it’s wise to identify some Key Performance Indicators (KPI) that can tangibly measure Mirror’s online success. One is to see how many people are using a newer feature Mirror will offer, and the other seeing the number of pages the user is clicking through when making a purchase:
- Try and Buy Feature — We can start by measuring the Try & Buy feature on the site, & how many ppl are using it to purchase items. It’s a new feature Mirror plans to use, and it’d be great if it was successful. It’s innovative, and companies are starting to use it.
- Proper Purchase Journey—We can measure the number of users who purchase goods and are doing so with a proper purchase journey, meaning we can see if they are visiting the proper pages. This can help in future revisions.
Great, now onto stage one, empathize
Research research research! At the very beginning of our quest, perhaps the most VITAL first part of the process is researching. This is where we try and understand our user base (hence empathize) and test some of our assumptions. Along with creating a detailed research plan, we’ll study available materials online, conduct interviews, create empathy maps and personas, and more.
To best sum up, I have three strict goals in mind:
With our research we sought to [1], discover what makes Mirror unique, and how we might stand out from competition. [2] Discover what makes a successful online retalier, and [3] better understand what motivates an online shopper.
Secondary Research—With Secondary research, we do a deep dive into available materials on and offline to better understand the online retail market. We’re looking at what exists currently and what makes them successful, or unsuccessful. We’re also going to identify and understand our target audience.
I studied the various websites of the many online clothing companies and gleaned some very pertinent information. I looked at trends, a wealth of user reviews, and really started to get an idea of what potential and current customers might be looking for. Also, being a designer, the visual tour I took of current online companies’ websites led to a lot of things I wanted to STEER CLEAR of:
Visual issues of websites–blurry imagery, price points being to small, lack of visual hierarchy, etc. Some were too busy, while others weren’t quite busy enough. One website, in particular, had an immense amount of scrolling.
Brand issues–some brands were a little overwhelming, like Old Navy, while others didn’t quite stand out enough, The Real Real.
*Below you can see some takeaways from our exhaustive research into the online marketplace:
Competitive Analysis — Another important of our early research was to perform a detailed competitive analysis. This consisted of studying the habits and successes of other online retailers so that we can perhaps incorporate some of these findings into our own company.
I did a thorough walkthrough of several online retailers’ websites and studied some of the practices they employ, what works, what doesn’t, etc.
I had some clear ideas as to what I wanted, or needed to include on Mirror’s site, and also started to develop some ideas for branding to come.
Below you’ll find the competitive analysis:
1 on 1 interviews (primary research)–The next part of my research included interviewing handpicked friends, family, and colleagues who shop both on and offline for a 1 on 1 discussion. I wanted to determine what entices them to try out an online retailer, what frustrates them, and things they hoped would be different.
These empathy interviews were crucial in helping to determine the shape of Mirror’s website…what MUST be included, and what can be made smoother. They explained some of the pains they have with online shopping, and why most of them actually preferred in-store shopping instead.
Below you’ll find a graphic with the characteristics of my interviewees:
And here are some key takeaways:
Lastly, and basically the fourth method of research is to take all the data we’ve gathered thus far and create something called a persona: Someone with the shared characteristics of my interviewees. Developing this persona also helped in the design process, and really gave me a better idea as to the type of person I’d be designing for:
Creating an empathy map was another step in developing my persona. Here is a look at how we synthesized the research so far to map out a typical day for “Hannah”. It was another building block in understanding our user base, and what might be going through their minds on a daily basis. In the end, I also tried to identify certain obstacles Hannah might face regarding online shopping. All of which I address down the line:
Stage Two, Define
This is where we look at our research and begin to synthesize it. We start to understand the framework of our site with things like a feature roadmap and define the goals we’d like to achieve from a business end, what goals the user has, and identify goals from a technical POV.
What we did then was to try and identify places where these goals meshed, and see what was possible going forward:
From here, we were able to create what’s called a feature roadmap, which is a checklist of features Mirror’s website will have, and ranked in their order of importance. What we’ve also done is to try and estimate the man-power each feature will ultimately use, i.e. time and cost, and label each feature accordingly, P1, P2, etc. (Priority 1, Priority 2, 3…)
Piggybacking the feature roadmap is the feature matrix. Which is a graphic used to illustrate how important (and less important) website features place in relation to cost. You can see this in the graphic below:
Culminating the definition stage was our sitemap. This is how we organize our site structurally, labeling each page and where it exists in relation to others, we develop information architecture at this point:
Information architecture (IA) is the structural design of shared environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; a
My method was to identify all of the items you’d see on a specific page, and indicate clear call to actions. You can see this represented in the graphic below:
Stage 3, Ideation
At this stage, we develop our product even further. We establish Mirror’s new brand with a logo, a detailed user interface guide–a set of rules that all designers can follow if helping to design. Site sketches and wireframes, we also detail a specific task flow that a potential user might take when making a purchase. With that comes a more detailed user flow, where we’ll expand our task flow to see what the user is thinking and what specific actions they decide to take when navigating our site.
Below is our task flow:
After creating a singular task flow, we were then able to take a more detailed approach and map out the screens a particular user would come across on a on a journey with several paths to choose from. This is called a user flow:
From here, I started sketching my ideas for the site on paper. Going through a few iterations, my plan was to take all the information we’ve gleaned from each stage and use it to map out a series of lo-fi wireframes. These will work as a blueprint going forward. Here are my final iterations for the landing page, followed by a few earlier sketches and ideas:
From here, I developed lo-fidelity wireframes, which were completely responsive. This was to further map out all of Mirror’s pages on their site. I also began to develop some User Interface elements during this process.
The idea was to create enough pages for users to go on a proper purchase journey, which you can see was created in our task flow.
In this case, I decided to make the purchase journey about purchasing a pair of men’s jeans, from beginning to end. Take a look at the desktop wireframes:
After establishing our desktop wireframes, we were then tasked to create them for mobile platforms. Responsive wireframes are a must:
Logo–At this point, it was time to start thinking about branding. Our first mission was a logo refresh. This started with sketching, later refining in Figma. I then laid out my choices in a grid-like fashion and wound up choosing a very simple and modern solution:
I decided to go with the version below. Simple, elegant, and very modern in my opinion. Completely vector, able to be resized and colored to fit any occasion. It sits nicely atop the Mirror site.
Note: The “M” logo is slightly based on Avenir Next Ultra Light typeface.
From here we had more fun and came up with a style tile, and then a more detailed UI kit. This included our logo, brand colors, typefaces, and all of the UI elements being used on our site. Active and inactive buttons, form fields, pop-ups, etc.
UI Kits are meticulously detailed and comprehensive, I thoroughly enjoyed making mine. Color choices remained simple, but I feel they stayed very elegant. Black is our most used color, and it’s tricky using it. I feel it worked really well and gives the site and brand a certain chic factor.
What you’ll see below: original style tile, with a provisional style tile and logo. Right, a more expanded UI kit, which’s what is included in the final design. Bottom left documents more textures, icons, and popups.
Stage 4 Prototype
After developing a UI kit, it was time to create high-fidelity prototypes. I created all the screens necessary to go through a men’s and women’s purchase journey.
See below for desktop and mobile high-fidelity mock-ups:
Stage 5 Testing
After creating high-resolution mock-ups, it was finally time to test our product! We did this by conducting a usability test with three potential users, all of which fell into our target market.
The idea was for each participant to complete three tasks on Mirrors site, while I observed and timed. It was successful, with each member completing each task in good timing.
I wrote down my observations and documented all of their comments, what they enjoyed about the site, and what they would like to see improved.
Click here to see detailed results. I received a lot of feedback, all of which was helpful. After synthesizing my results, I created an affinity map so I can have a clear visual reference of the usability test results. What I did was document each participant's journey through all three tasks using post-it notes.
I also made sure to write down what they reacted positively to, and what suggestions they made so I can revise later.
Next Steps
This was an amazing experience. I believed I achieved all of what I set out to do, and learned the invaluable tools of the UX process. I created two complete purchase journeys, from start to finish, and researched, iterated, and fully realized & documented my process.
I would be anxious to build the rest of the product going forward; having more detailed user flows, purchase journeys for different products, and perhaps try some new aesthetic ideas for different sales in Mirror’s future. I really hope you enjoyed exploring. It was a lot of hard work, and I appreciate your time.
Please feel free to reach out anytime:
Spencer Goldberg
You can email me here: srginosu@aol.com
Visit me on Linkedin, Instagram
