Project Background
Clothing store Mirror established its business back in 1994, targeting a budget-minded audience who looked for low-cost clothing for any occasion. They succeed in their mission by offering pretty good quality at an affordable price. they believed that as in the natural process of change in human beings, clothing shouldn't be something to last forever, rather be able of changing style as we need and please. Proving this point they had been very successful offline with over 400 stores around the world in 32 countries. Pretty impressive, right? As people say they are not fancy but always well taken care of and good look.
Although Mirror had great success, they acknowledged the fact that the opportunity of online sales is huge and inevitable. Technology taking over in any aspect of human life and the global pandemic is crucial in taking action of transferring into online sales and also solving problems of tons of back inventory pined up through the years.
Creating a responsive website is a great solution where they would be able to sell their products to different people and styles, along with offering good filters especially for size selection, allowing users to easily perform any task.
They would like a brand-new logo, and they are open in any colors and variations, but they are determined into keeping the same name in allowing customers to effortlessly identify the store.
Problem Statement
How might we: Design a responsive e-commerce website that is easy to use and allows customers effortless navigation
How might we: Re-design the current logo into modern and neutral, attractive to all types of people styles
Let's Get Started
At the very beginning, we'll start with identifying the UX Design process and defining each stage individually, then we'll simultaneously dive into all details throughout the case study.
Stage One | Empathize
In this first stage of our UX design process, we started with the UX research where we focused on identifying our users, understand their behaviors, empathize with their problems, learn about their, motivations, thoughts, and needs.
We created a research plan and outlined several types of research methods, which gave us different aspects and a wide amount of data, needed for accomplishing our UX research goals.
Secondary Research
The first and most convenient method was conducting secondary research. We went through some online and offline existing data about the online retail market, read through articles, took notes on statistic reports, and snapshotted some infographics. This helped us get an initial overview of the online retail market, we also gathered some quantitative data, which will supplement our further research process.
Here are some takeaways from our secondary research:
Competitive Analysis
Another important method in our research process was identifying, categorizing, and evaluating the competitors to clearly understand their strengths and weaknesses. This data is of essential value in improving companies' efforts and take advantage. In our journey, we gathered data from several retail competitors which findings can be incorporated into our own company.
1 on 1 interview ( primary research)
The primary research is the method where we learn directly from the users themselves. We started with creating an interview script and recruiting participants for the interview.
The interview involved 8 participants within the age group of 27-45 and here is the detailed report of the research findings. The interviews helped provide insights into the reasons for users' online shopping habits, decisions, motivations, pains, and frustrations.
Here is the graphic with the characteristics of our interview participants and some quantitative results based on three criteria.
Data gathered from the primary research was helpful in the process of shaping Mirror's website, determining the elements that are going to be used to create a smooth and easy user experience.
Analyzing and synthesizing the interview data led us to create the persona: Someone who shared the characteristics of the interviewees. Creating the persona was one step further in our journey and really helped us to gain perspective and visualize the targeted group type.
And another step further in developing our persona, we created the empathy map, a great asset to map the daily routine and flow of our persona. This is an additional way of understanding the pattern and identifying what the user is thinking, doing, feeling, and hearing, along with the gains and frustrations.
Step two | Define
For the product to be fully successful it's important to have a balance between business and users' goals. We facilitated this by clearly identifying both business and users' goals, and where the goals overlapped we formed the mutual goal to help inform our design. We created this project goals table to help us provide a reference and an overview of how the balance and alignment of the goals can help us create a website and branding that reflects the needs of both the business and the users.
Next, we created the feature roadmap by considering the features and their impact and cost. The feature roadmap served us as a checklist of features Mirror's website will have, ranked in their order of importance. We organized the features in their order of importance along with their property, labeled accordingly as P1, P2, etc.
Additionally, we created the feature matrix for the Mirror's features to provide a granular overview of prioritizing and cost of the features.
Step by step, defining stage evolves into crating our sitemap. Here the art of Information Architecture takes place as the most essential part where we organize a bunch of information and give them some structure. This structure determines the steps in our user's story.
Open card sorting was conducted online by using Optimal Workshop. Eight participants were asked to sort and label 30 cards into categories that make sense for them. Analyzing the sorting pattern helped us learn which ideas of features are most related to the minds of the users and to establish the foundation for the Mirror site. This method was very handy and helpful in the process of creating the sitemap.
Here is a sitemap of Mirror's Purchasing Journey:
Stage three | Ideation
The ideate stage started with sketching out some ideas based on the findings from the research and define stage. Sketches are a very important part of the process for us as it helps visualize our ideas in a concrete shape. We explored different design solutions for various pages, and these pages provided a design framework for addressing ideas and features that meet the mutual needs and goals of the Mirror users. We went through several iterations before choosing the final version of Desktop and Mobile sketches:
Once the sketches were laid out, we started converting them into low-fidelity desktop wireframes where the focus was given on functionality and the overall layout of the pages. We created enough pages for a complete purchase journey. Purchasing woman dress from beginning to end was designed and created in these wireframes below:
As creating a responsive website was one of our high-level design goals, right after creating the low-fidelity desktop wireframes, we continued our journey into creating low-fidelity mobile wireframes.
Another high-level goal was creating a company logo that is modern and neutral to attract all types of people styles. Here is the process of how we developed our logo. We started with exploring and sketching some ideas on paper and then we refine our choices in Figma. Afterward, with doing a few more iterations and touch-ups we created this version and made our final decision, choosing a clean, elegant, simple, and modern solution:
Along with establishing the logo comes the part where we created and developed our UI kit. UI kit contains our logo, brand colors, typeface, and all other UI components and elements that have been used in creating our site, like active and hover buttons, breadcrumbs, icons, etc. Choosing the right design style was an important part of making out site welcoming, friendly and attractive. Our Raleway typeface and Sundown color pink gave Mirror warmth energy and resonate friendliness and welcoming. Here is the design system for our Mirror site:
Stage four | Prototype
Developing the wireframes and UI kit led us to create high-fidelity wireframes for the prototype. We created all screens necessary to complete a purchase journey, with the task of buying a woman's dress.
Here is the high fidelity version of a woman's purchase journey, and the link to our Prototype link
And, here are the mobile high fidelity versions and the prototype link:
Stage five | Testing
After creating the high-fidelity wireframes, we created a usability test plan for testing our product. Usability testing was conducted in person with 7 potential users, regular online shoppers. The goal was to observe how the participants navigate through the site, identify their first impression of the site and the brand, and identify any potential issues users may encounter.
The task was to complete a journey of purchasing a woman's pleated belted dresses.
Here is the affinity map we created after summarizing the findings of the usability testing:
Next step
This was a great experience, I really enjoyed doing every step of it and I did learn a lot of valuable tools of the UX process and gained a lot of skills. The next step in this journey would be updating the prototype, creating more pages, more iterations, conducting more tastings, and improving our product.
Thank you for your time!
