Mirror - Case Study Presentation
Position: UX Researcher & UI Designer
Project Objective: Design a responsive website based on research and create a new brand identity for clothing retailer known as Mirror
Programs used: Figma, Optimal Workshop, Google Office
Notes: This is my first Capstone Project from DesignLab. The objective is to assist a faux clothing store with transitioning into the digital world by designing a webpage and redesigning their logo. I’ll do my best to treat it as a real life project to showcase on my portfolio.
Introduction
Background
Created in 1994 as a clothing store targeting a budget-minded audience looking for low-cost clothing for any occasion. Main goal is to make any type of clothing accessible to everyone. Belief is clothing doesn’t have to be expensive and last-forever. Successful offline with 400 stores around 32 countries.
Problem
Mirror currently has an outdated informational website that only lists locations, promotions, and a bit of background about the company. They want to start fresh. How can I help Mirror transition into today’s e-Commerce world?
Research Goal
With the continuous growth and progression of e-Commerce, I want to know what are customers’ favorite aspects of online shopping, what are their least favorite aspects of online shopping, who are the most common online retailers, and what is it about their site and product that creates such a want among shoppers?
Research Findings
- I found that the 3 most common stores that young professionals shop at when looking for work attire were H&M, Uniqlo, and Zara. Once I found the main 3 competitors, I did observed and studied their sites to see what was working and what I wasn’t a fan of.
- The common issue was that there was too much information overload on these sites. It would often sidetrack or interfere with the customer’s main objective.
- Another issue was that some sites were not as responsive when viewed on a phone or a tablet.
User Interviews
- I wrote up a list of 12 questions to asked my participants. The main objective of this interview was to get a more personal feel of what the user/customer is looking for during their online shopping experience. I wanted to pinpoint some specific wants and needs and identify any frustrations or slowdowns, if there were any.
- I found that amongst our demographic, majority of them had increased their online shopping ever since the onset of the pandemic. A lot of them also prioritized affordability and the longevity of the item when shopping.
- I discovered that there was a little bit of hesitancy for my participants when shopping online because they really wanted to be able to try the item on. The participants did not want to repeatedly go through the time consuming process of having to return/exchange an item after finding out that it doesn’t fit.
Creating a Persona
Once I gathered enough data and information from our participants, I created a persona. Meet Aaron!
Project Goals
I then sat down to identify the commonalities amongst the user, the business, and the technological side of it all. What was the common thread amongst these three goals? I used a Venn diagram to label and identify these goals.
Feature Roadmap
Furthermore, I wanted to established our priorities for my website. What were some MUST-Haves? There were specific features that each of the competitors had and I needed to include these features on my website as well if I wanted to hold our own against our competition.
Creating User Flows
Next, we needed to identify and conduct the user flows. We felt that there were 2 main flows on our website: finding an item via the search bar and finding an item through the navigation bar.
Low Fidelity Wireframes
With all of this information, we began to create low fidelity wireframes for desktop, tablet, and iPhone. We visualized minimalism, simplicity, and ease. A site that a customer can browse and navigate through without being bogged down by unnecessary or irrelevant information.
UI Design Elements
We needed to go through a rebrand. We created the logo from scratch. We implanted the color purple because it represented creativity, wisdom, and imagination. We felt that both men and women could identify and relate to this. We created a minimalistic icon set and UI elements because we felt that it would pair well with the vision of our site.
Testing
- Once we had some hi-fidelity screens for our participants to use, we started the testing process.
- Participants were assigned 2 tasks to accomplish. (Task 1: Purchase a slim grey blazer to the size of their liking via the search bar, Task 2: Purchase the same item, but via the navigation bar/category menu.)
- All 5 of our participants were able to accomplish the assigned tasks with little to no error.
- We did receive some feedback after the testing process about the website aesthetic.
Iterations
The general feedback we received was primarily positive. We got a lot of positive feedback about the minimalism and simplicity of the website. We did receive feedback that the site needed more color. We applied the feedback and suggestions to what we felt was appropriate as seen below.
Reflection
- Personally, I value minimalism and simplicity and I’m confident that our site would be easy for customers to use.
- At times, I wonder if the website is a bit too minimal? I think to myself if there could be something else that I could add to it.
- This was our first time taking on a project from the complete beginning. I do feel like it was a success. It was definitely a learning process. I will implement everything that I learned from this process and apply it to any projects that I take on in the future.
Final Product
