Case Study: Design Journey of Retail Store Going Online-UX Way
Project Background
Clothing store Mirror established their 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,
clothes 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 having 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 a crucial point in taking action of transferring into online sales and also solving the problem of tons of back inventory piled 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 allow 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
We’ll start with identifying the UX Design process and define each stage then we’ll organically dive into all the details throughout the case study.
Stage one, Empathize
An essential part of our journey is identifying the potential users, empathize with their problems, learn about their thoughts, and understand their needs. In this stage, research takes the leading part in accomplishing our goals, hence we conducted several research types, including 1 on 1 user interviews, competitive analysis, and secondary research.
Secondary Research
Going through some of the online and offline existing data regarding the online retail market, we synthesized useful information beneficial in our design journey. Conducting the secondary research helped us in gathering the data and congregate some takeaways important for our further reference.
Competitive Analysis
Another important aspect in our research process was identifying, categorizing, and evaluating 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)
For the primary research, I conducted 1 on 1 interview asking the participants several questions related to their online clothing shopping experience. Interview findings helped to determine users' needs, frustrations, goals, and motivations related to their overall retail shopping experience.
Here is a graphic with the characteristics of my interview participants.
Data gathered from the primary research was helpful in the process of shaping the 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 to gain perspective and visualize the targeted group type.
And another step further, 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, feeling, doing, and hearing, along with the gains and frustrations.
Stage two, Define
Analyzing and synthesizing all the available data from the empathy stage allowed us to understand the user's needs and frustrations, and now we can start building the website's foundation and structure. Our journey continues into the next stage by defining the project goals along with creating the feature roadmap.
For the project to become successful its importanat to consider and identify both business and users’ goals, as well as identifying the mutual goals, which had been given us a clear head to move ahead.
Now we were able to create the feature roadmap by considering the features and their impact and cost, together for giving insights easily. The feature roadmap served us as a checklist of features Mirror’s website will have, ranked in their order of importance. We organize the features in their order of importance along with their priority, labeled accordingly as P1, P2, etc.
Additionally, we added the feature matrix for the Mirror features to provide a granular overview of the prioritizing and cost of features.
Step by step, Defining stage evolves into creating our sitemap. Here an 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 or features are most related to the minds of the users and to establish the foundation for the structure of the Mirror site. This method was very handy and helpful in creating the sitemap.
Here is a sitemap of a Purchasing Journey:
Stage three, Ideation
Here, based on my sitemap I started sketching my ideas on paper for both desktop and mobile versions. I went through a few iterations before having the final sketches, which will be used as a blueprint further in the journey.
From here, I created low-fidelity responsive wireframes. I created enough pages for a complete purchase journey. Purchasing women dress from beginning to end was designed and created in these wireframes below:
Right after creating the low-fidelity desktop wireframes, we continued our journey into creating low-fidelity mobile wireframes. Creating a responsive website was one of our high-level design goals.
Another high-level goal was to create a company logo that is modern and neutral enough to attract all types of people styles. Here is the process of how we developed our logo. I started with sketching some ideas on paper and then I refine my choices in Figma.
Afterward, with doing a few more iterations and touch-ups I created this version and made my final decision, choosing a clean elegant, simple and modern solution:
Along with establishing the logo comes the part where we create and developed our UI kit. UI kit contains our logo, brand colors, typeface, and all UI components that had been used in creating our site. Active and hover buttons, breadcrumbs, icons, etc. Choosing the right design style is an important part of making the site welcoming, friendly and attractive. 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. I created all the screens necessary to complete a purchase journey, with the task of buying a woman’s dress.
Here is the high fidelity version of womens’ purchase journey, desktop :
And, here are the mobile high fidelity versions:
Stage five, Testing
After creating high-fidelity wireframes, finally, it’s time to test our product. Usability testing was conducted in person with 7 potential users, regular online shoppers. The goal was to observe how participants navigate through the site, identify their first impression of the site and brand, and identify any issues users may encounter.
The task was to complete a journey of purchasing womens’ pleated belted dress.
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, conduct more testing, and all in order to improve our product.
Thank you for your time!
