Mirror
Responsive E-Commerce Clothing Site
Timeframe
2021 - 4 Weeks (80 hours)
Role
Research, Ideating, Information Architecture, Designing, Prototyping
Summary:
Mirror is a clothing store providing affordable clothing to all ages and sexes, as well as fitting any occasion. Mirror has been operating since 1994 with over 400 stores in 32 different countries. Mirror has seen a large demand from their customers for an online platform and has decided to finally make that adjustment.
Goal:
Identify users needs for a shopping website
Discover users expected experience when online shopping
Find the pain points involved with online shopping
Create a Brand Indentity
Research + Discovery
Secondary Research
To determine best how to help Mirror create a stronger brand and user experience, I started with doing some secondary research to determine current trends, threats, and competitor analysis. Currently the top four desires of online shoppers include easy payment, affordable products, high quality products, and a quick website. As for clothing business trends this includes user personalization, shopping on a mobile device or through social media, subscription models, technological innovation, and more. There are also of course growing threats with online clothing brands such as high return rates, decreasing brand loyalty, fast fashion, and the pressure to use ethically sourced materials.
Interviews
The secondary research helped to build a script for moving into interviews and making sure to focus on key issues around online clothing shops with users. Through the interviews it was determined that 75% of the users shop for clothes online at least once a month, as well as use filters when shopping (ie. gender, price, color). All users interviewed admitted that they prefer online shopping rather than in store, and that they prefer to shop from their phone for added convenience. One of the last major points gained from the interviews was that users considered a purchase good if there was a quick and easy checkout process, this also tied into the point made about enjoying loyalty programs (personalization, saved checkout information, and rewards).
Pain Points
Long and Confusing Checkout Processes
The inconvenience of returns when online shopping
Paying for returns
Hard to unsubscribe from shop membership programs
Hard time tracking orders
Persona
From the data collected through interviews, I was able to create one main persona that would be able to represent an average user for Mirror. This is Jackie!
Planning
Card Sorting
Tool: Optimal Workshop
Type: Open Sory
Participants: 6
Cards: 20
Summary:
Based on the categories received I narrowed it down to some more general descriptions that are able to encompass a larger variety of options. Majority of the participants chose very similar categories making it a somewhat easier decision. One participant had an interesting way of categorizing the items by when/where you would wear them ie; casual, dress-up, winter. This was an interesting idea as it has been done on clothing sites before, yet would be something to focus on more at a later time.
User Flow
A user flow chart was created to determine what steps would be taken by the average user to make one simple purchase. This also helped to determine all the pages that would need to be designed and created for the prototype.
Designing
Low-Fidelity Wireframes
With a basic user flow set out I was able to move onto Lo-Fi wireframes to ensure a solid base for the design as well as to make sure that the flow incorporated the pieces that were found to be of importance form the interviews and secondary research.
UI Kit
Once the Lo-Fi wireframes had been laid out I moved out to creating a logo and UI kit. For this branding I went for a modern but also more relaxed and bohemian feel. I wanted to keep it simple and elegant with the word mark along with the calmer color palette.
Usability Testing
After designing and creating a prototype, I wanted to be able to observe how easily a user could get through the checkout process so I conducted a Usability test. This also helped identify any pain points as well as any features that were missing or needed adjustment. For this I had four participants use remote screen sharing to walk me through their purchasing process with the user flow that I had created. This allowed me to determine if the pages were understandable and easy to navigate, as well as find out what a users first instincts are when entering an e-commerce site.
Pain Points
Filters on the category page do not have a strong enough hierarchy. It was hard for one participant to choose their options.
Categories were not specific enough/ they wanted to use filters that were not available.
Natural first choice when shopping online would be to favorite the item and then come back to it.
Top navigation menu is not always the first choice.
Prefer to check availability on product page
High Fidelity Wireframes
After the usability test I was able to take the feedback and UI kit in order to create the Hi-Fi wireframes, as well a creating a couple of responsive mobile pages with the time provided.
Reflection
Overall I am happy with this project and the final product. I would have wanted to go into more details in certain sections, although due to time constraints I had to prioritize some more important pieces. Being able to look back over this case study has given me the opportunity learn and make adjustments in order to have a stronger project in my next case study. One of the major adjustments I would make would be to the different research and interview processes I conducted. In future interviews I would ask more questions to better understand the users process and how I can best make adjustments based off of their feedback. This first case study has helped me to develop a process on creating a case study in the future from the research, planning, prototyping, and testing.