UX Research & Design
Mirror - Genderless Fashion Responsive Design
Within the world of affordable fashion, genderless clothing is under-represented. In order to bring this company online, I have conducted research to find out how the prospective customer thinks and tailored a site to match their needs. I have also created a logo and brand identity for the company, using them as building blocks to build responsive designs and a working prototype. This entire project took about 7 weeks.
People of ANY GENDER who don’t give a $%*! about traditional gender roles, ages 18-35
Over 200 locations in over 30 countries
Unique, reliable clothes with reasonable prices
In the 1970’s queer culture existed in the shadows, shunned for being different. Mirror was created to provide a wide-scale genderless fashion medium for self-expression
- To create an e-commerce home for Mirror
- Discover user behavior patterns, and their likes and dislikes
- Use findings to create a user-centered platform
- Develop a new brand identity to capture the essence of Mirror’s unique clothing experience
- First large-scale genderless fashion site
- Convey the message of genderless clothing through branding online
- Explore and implement visual thinking strategies to maintain in-person experience online
To uncover user context, learn user likes and dislikes about online shoping, discover motivations for shopping online and determine areas open for market differentiation
- Secondary Research
- Competitive Analysis
- Context Inquiry
- Card Sort
Interviews & Context Inquiry
I interviewed 5 subjects, male and female, who were between the ages of 21-35 and liked to buy clothing online.
I executed one in-person context inquiry. The participant was 23, a musician and a regular online shopper. She most often shopped at fast-fashion places like Nasty Gal and Asos. I watched her go through the task of purchasing an item on Nasty Gal and asked questions about her motivations while doing so.
- Most people shop online at home via their laptop or desktop computer, because it’s convenient and isn’t time consuming
- People view shopping online as a more personalized experience
- The global pandemic has affected people’s shopping habits, making them more likely to shop online
- Companies have merged with social media to make online shopping even easier.
Users were asked to create their own categories (open sort) for items that will be in stock online at Mirror’s store. These results guided the categorization by analyzing how the user would categorize them. I used Optimal Sort to acquire these responses and organize the results
Percent of agreement
Using Optimal Sort's metrics, I was able to categorize items based on real user opinions. Ensuring that the user would have an easier time locating what they needed via the drop down navigation menus.
03| Findings & Implications
Creating this visual aid put me in the mind of the user. Guiding my design decisions based off of empathy for the users pains, goals and needs.
A map of the website that accounts for the user's goals, based on my research findings.Full Sitemap
Paths that the user might take to complete their goals. Click the link to see all flows.All User Flows
- Sales and markdowns should be clearly visible
- Site should be clean, organized and have clear CTA’s
- Brand values and style should be made evident
- Menu categories that are easily understood are vital to navigation and task completion
04| Development & Design
- With pencil, I drew multiple options for the layout of each page
- I then laid out my final choices with annotations describing my design decision
- Each design decision was based off of observations derived from the aforementioned research methods
Full Set of Wireframes
- I then designed wireframes based on the research
- Offered personalization right off the bat in the hero image
- Sales code is within viewport to show users they can get items at a lower price
- The user is able to purchase directly from browsing pages which saves time
- Trendy new items to display brand values
High-Fidelity Designs & Prototype
05| Testing & Iteration
Once the prototype was completed, I used it to conduct remote usability tests with users via Zoom. They shared their screens while I asked them about their motivations and choices. Then I organized the findings and decided what changes were to be prioritized.
High Priority Revisions
- Make sure there are different models and perspectives on product page
- Move guest checkout into viewport
- Keep reviews in a prominent area
Low Priority Revisions
- Make CTA more prominent
- Add a hover-zoom function on the product page
- Make promo codes easier to find
What went wrong and why?
- Prototypes should be as similar to the actual experience of completing the desired task. This led to some confusion during the usability test that could have been avoided
What did I learn?
- How to create and use a design system and would prioritize that in the future
- Cultivated skills to organize and visually communicate research and my thoughts pertaining to it
- To be overprepared for any interview allows for more flexibility during the process
What I could have done better?
- I took each process as a separate thing. Looking at the process as a whole, rather than the parts would have created a better, more illuminated picture
- To define and prototype all interactions for the site
- A/B testing will further validate what works and doesn’t work
- Further iteration based off of findings