Prototype
A responsive e-commerce website for a clothing company
MIRROR
Timeline:
- March- April 2022
My Role:
- UX Designer, UX Researcher
Tools used:
- Figma, Miro, Adobe
Background
Mirror is a clothing company started back in 1994 with other 300 stores in 32 countries worldwide. They target an audience looking for cheap yet good quality clothing for any occasion. Their competitors are similar to Old Navy, Zara, Hm, etc.
Project Goals
Their main goal for now is to expand their business online with a fresh new logo and build a responsive and inituitive website that is easily accessbile to the users.
Problem
- The company Logo needs to be updated to something modern and fresh.
- Overflow of inventory that needs to be sold.
- Requires an online presence that is responsive and accessible.
RESEARCH
DEFINE & STRATEGY
DESIGN
ITERATE &REVISIONS
RESEARCH
I aim to determine and understand user’s POV of what user usability and accessibility
refers to, to understand the e-commerce online market and competitors, to determine
what steps are mostly used to complete a purchasing process and to gain the loyalty
the users.
refers to, to understand the e-commerce online market and competitors, to determine
what steps are mostly used to complete a purchasing process and to gain the loyalty
the users.
COMPETITIVE ANALYSIS
I analyzed the strength and weakness of 3 other competitors and studied the current
design and market trends of other e-commerce platforms. for my competitive analysis I used two research methodologies:
Competitive Analysis
User Interviews.
I analyzed the strength and weakness of 3 other competitors and studied the current
design and market trends of other e-commerce platforms. for my competitive analysis I used two research methodologies:
Competitive Analysis
User Interviews.
USER INTERVIEW
I interviewed 3 participants via phone call, zoom and social media platforms. I prepared aN interview script for them and a question sheet for myself before starting the interview. After briefing the process of the participation, we continued with the interview.
Participant 1: 24-28 years old, Bartender, Female, New york
Participant 2: 32-25 years old, Accountant, Female, Los Angeles.
Participant 3: 28-32 years old, Recruiter, Male, New york
Key Findings from the user interview:
I then concluded my research by brainstorming business, user and technical goals for Mirror’s e-commerce responsive website.
I interviewed 3 participants via phone call, zoom and social media platforms. I prepared aN interview script for them and a question sheet for myself before starting the interview. After briefing the process of the participation, we continued with the interview.
Participant 1: 24-28 years old, Bartender, Female, New york
Participant 2: 32-25 years old, Accountant, Female, Los Angeles.
Participant 3: 28-32 years old, Recruiter, Male, New york
Key Findings from the user interview:
- All users prefer the filter option to narrow down their choice of products.
- Users look at reviews from other customers and pays attention to product details.
- All users prefers a easy and simple checkout process
- videos of models wearing the products were also a plus point for the users.
I then concluded my research by brainstorming business, user and technical goals for Mirror’s e-commerce responsive website.
DEFINE & IDEATE
PERSONA
After the research process, and the data I gathered, I was able to build a persona that suited well with Mirror’s user type. Bella loves a good filtering option and prefers quality over quantity while shopping. She also has an eye for aesthetics.
After the research process, and the data I gathered, I was able to build a persona that suited well with Mirror’s user type. Bella loves a good filtering option and prefers quality over quantity while shopping. She also has an eye for aesthetics.
FLOWS
I created my User and Task flow keeping my persona in mind.
I created my User and Task flow keeping my persona in mind.
CARD SORTING AND SITE MAP
The next process moving forward was to structure information and content within the product. I acquainted some participants to help me complete an online card sorting exercise. Card sorting was essential in the ideate process because it allowed me to gain an idea on how users would categorize information presented to them.
The next process moving forward was to structure information and content within the product. I acquainted some participants to help me complete an online card sorting exercise. Card sorting was essential in the ideate process because it allowed me to gain an idea on how users would categorize information presented to them.
I further formulated a site map for Mirror’s website which is simple and easy to follow.
STYLE TILE
Aesthetic was key in terms of visuals both for the participants and the company. I
created a style tile that would represent not just the brand but also the users who will be accessing them. The vision was to create an overall clean, modern, minimal, gender neutral tone and easy on the eyes website. I used the style tile in conceptualizing visuals for my high fidelity designs.
Aesthetic was key in terms of visuals both for the participants and the company. I
created a style tile that would represent not just the brand but also the users who will be accessing them. The vision was to create an overall clean, modern, minimal, gender neutral tone and easy on the eyes website. I used the style tile in conceptualizing visuals for my high fidelity designs.
DESIGN & PROTOTYPE
WIREFRAMES & HI-FI PROTOTYPE
I sketched few sketches of low fidelity wireframes and digitilizied the ones I liked the
best. I create wireframes for desktop, tablet and a mobile.
I sketched few sketches of low fidelity wireframes and digitilizied the ones I liked the
best. I create wireframes for desktop, tablet and a mobile.
VIEW PROTOTYPE
USABILITY TESTING
For my usability testing, I asked some of my friends and family if they would be willing to participate in a 20 mins usability test using my high-fidelity prototype that I had created. I conducted it via zoom and Figma. There were some initial problems but i guided them through it all. Some of the test objectives are as below:
For my usability testing, I asked some of my friends and family if they would be willing to participate in a 20 mins usability test using my high-fidelity prototype that I had created. I conducted it via zoom and Figma. There were some initial problems but i guided them through it all. Some of the test objectives are as below:
- Test users\participants first impression of the website.
- Observe how users perform while navigating through mirror's website to get their desired product\purpose.
- Test if the content on the homepage is sufficient and accessible to the users
- To discover any pain points users may face during the task.
- Test and evaluate the overall usability of the site and identify areas of improvements.
AFFINITY MAP
After conducting usability testing, I then created an Affinity Map to formulate my
findings from the testings.
After conducting usability testing, I then created an Affinity Map to formulate my
findings from the testings.
ITERATION
PRIORITY REVISIONS
For my priority revisions, I made some changes according tot he feedback I received from my users regarding my website.
Product page:
For my priority revisions, I made some changes according tot he feedback I received from my users regarding my website.
Product page:
- added a simple fav icon on all the products.
- added "true to size fav icon on all the products.
- added similar products to the reference stand compared to the selected product.
- changed the live chat icon to a simpler one
- added social media references in the footer.
For the checkout page, the changes I made according to my test were:
- adding more advanced payments options like klarna, paypal etc.
- remove review button on the bottom of the page to avoid confusion.
REFLECTION
The next step include making adjustments to the designs and wording according to the feedback. Try to include more high fidelity prototype options like showing hover effect on buttons and would like it to be tested again. If I could do it again, I would also include more participants in my research and testing.
Finally completing my first product design project build from scratch was fulfilling yet awakening. There was so much to learn from research, design, testing to prototype and still am learning as I go on to my next project. I learned that in order to be a skilled UX designer, one must be very intentional about their process and have to focus on the core of its problem to generate the best results. A shoutout to my mentor for being guiding light throughout my journey and to my fellow designlab community.
The next step include making adjustments to the designs and wording according to the feedback. Try to include more high fidelity prototype options like showing hover effect on buttons and would like it to be tested again. If I could do it again, I would also include more participants in my research and testing.
Finally completing my first product design project build from scratch was fulfilling yet awakening. There was so much to learn from research, design, testing to prototype and still am learning as I go on to my next project. I learned that in order to be a skilled UX designer, one must be very intentional about their process and have to focus on the core of its problem to generate the best results. A shoutout to my mentor for being guiding light throughout my journey and to my fellow designlab community.
