Mirror is a Global Clothing Chain started back in 1994, now with over 400 stores in 32 different countries. The particular focus of the brand is providing affordable clothing for any occasion.
Despite being very successful offline, Mirror does not have any presence online, therefore Mirror has contracted us to expand their reach through the medium of a online e-Commerce site and updated branding.
Responsive Website Design, Logo Design, Branding
Affinity Designer, Affinity Publisher, Figma, Zeplin
UX Designer (Research, Visual Design, Interaction Design, User Testing)
In order to remain consistent in the later phases, the Research Plan is crucial in laying the foundations of how I plan to proceed as well as defining the assumptions
In our competitive analysis, we identified key competitors, taking note of their main strengths and weaknesses particularly in reference to their User Experience and Interface.
Based off of our market research, we determined three provisional personas that will help us in empathizing with the general users, as well as determining the demographic of key participants in our User Interviews.
One of our key methods of research is user interviews. By interviewing potential users on their experiences regarding shopping both online and offline, we’re able to further discover critical pieces of information that we might not have considered.
After completing the interview plan, we looked for willing participants that fit our provisional personas to interview. Overall, we found 6 participants with a range of 21-49 years of age.
After conducting the user interviews, we created an empathy map in order to best identify patterns and tendencies of the participants. Through this exercise, we discovered a total of 6 main patterns:
Using the results and information retrieved from our empathy map, we’re able to create a persona that roughly represents the overall goals, needs, frustrations and motivations. This provides a reference for our future design choices.
Referencing the brief provided to us by Mirror, along with the goals and needs of our persona, we created a venn diagram of our project goals. Through listing both the User and Business Goals, we are able to find points that align to both goals, thereby establishing priority.
In order to better define categories and the patterns that users were used to, we ran an open-card sorting using OptimalSort in order to discover those patterns. What we found in our analysis is that for the most part, things were grouped as to be expected with a few variations depending on how people defined certain cards.
The Feature Roadmap is great in laying out a path forward. Using the research data as well as the Project Goals, we are able to better flesh out our priorities when it comes to features presented.
After the open-card sort, we were able to determine the categories generally required for our site. Using that information, we created a site map in order to create a high-level overview of the e-Commerce website.
To determine exactly what we’re designing, we created a task flow that follows three tasks that succeed each other based off of our Persona’s goals and needs. These task flows will determine the pages I need to design in order to complete the tasks written out. Down below, I’ve provided one of the tasks of my persona, Hana, which is to find a dress for a night out that won’t break the bank.
Following the Task Flows, we expanded the flow by adding in potential points of deviation based on choice such as whether the user will filter or continue shopping, etc.
Taking the information from my UI Requirements and other deliverables, we first created rough sketches of our Home Page in order to start the process of laying out the design as well as create the pathing for our low-fidelity wireframes.
.jpg)
.jpg)
.jpg)
.jpg)
In the prototyping phase, we created a high-fidelity prototype through the use of Figma and their built-in prototyping functions. Our goal was to place the prototype in front of potential users for in order to further refine our prototype based off of analyzing their actions and feedback during the testing. In order to do so, we created a usability testing plan that laid out the details of the test. The tasks that we had the participants proceed with are as follow:
Taking the notes from our usability test, we created an Affinity Map to make sense of, and organize the data into patterns observed.
From our findings, we discovered that there were three crucial pain points:
These pain points led themselves to potential solutions that led to the final revisions for our prototype.
These are the potential solutions that we ended up suggesting, in accordance with the feedback received from the usability test participants. Here, we arranged them in order of priority, based off of impact and cost:
Based off of the potential solutions in response to the discovered pain points, as well as other further feedback, we made our final revisions in order to provide a better user experience as well as modernize many outdated aspects of the design.
This project was definitely a thorough learning process. Prior to working on this, my understanding of what design was and what it entailed was extremely shallow and more so focused on the aspect of Graphic Design. Throughout this project, I learned of the importance of research and user-centered design as well as coming to the understanding of making decisions based off of research. Overall, it was definitely an enjoyable process and I definitely learned more than I bargained for when it comes to UX Design.
This project was definitely a thorough learning process. Prior to working on this, my understanding of what design was and what it entailed was extremely shallow and more so focused on the aspect of Graphic Design. Throughout this project, I learned of the importance of research and user-centered design as well as coming to the understanding of making decisions based off of research. Overall, it was definitely an enjoyable process and I definitely learned more than I bargained for when it comes to UX Design.
