Mirror
Responsive E-Commerce Website
ROLE
UX researcher + designer
DELIVERABLES
User Research
User Testing
Branding + UI kit
Responsive Design
TOOLS
Figma
Miro
Whimsical
TIMELINE
8 weeks
CONTEXT
BACKGROUND
Mirror is a hypothetical, longstanding clothing store that offers timeless and great quality clothing at an affordable price. Operating as a multinational business with over 400 storefronts globally, Mirror strives to make clothing accessible for all.
PROBLEM
While Mirror is very successful offline, it's prioritization of in-person services is costing the business profit opportunities and in the growing digital space.
Build a clean, user-friendly digital storefront that offers users a seamless experience, with an updated brand identity that reflects Mirror's simplicity and modernity.
RESEARCH
COMPETITIVE ANALYSIS
To start, I analyzed direct and indirect competitors to gauge industry standards and referenced Baymard Institute studies to gain some insight on brands in the digital space.
*Italicized are per Baymard Institute evaluations
strengths
Competitive pricing and variety of promotions
Homepage + Cart & Checkout
strengths
Durable, timeless products and personalized marketing
Cart & Checkout + Order Tracking & Returns
strengths
Free delivery subscription and positive brand image
Homepage + Product Page
weaknesses
Uninspired style and low inventory
Customer Accounts & Order Tracking & returns
weaknesses
Low product variety, poor online transition
Product Lists & Filters + Customer Accounts
weaknesses
High cost of free delivery and worker exploitation allegations
Onsite Search + Order Tracking and Returns
USER INTERVIEWS
I interviewed 3 target users to identify user needs, frustrations, and motivations, that would narrow the scope of design choices to focus on.
needs
Sizing reference points
Accessible product filtering options
Customer accounts to organize experience
frustrations
Returns are a hassle
Ethical consumerism
Inaccurate sizing
motivations
Social media ads
Routine activities or upcoming events
Sales or other cost-efficient services
USER PERSONA
Based on interview insights and research, I developed a persona that helped me further empathize with users.
INFORMATION ARCHITECTURE
With business and user goals in mind, I mapped out the browse-to-checkout process using task and user flows for both a general understanding of functions as well as a deeper understanding of how users would potentially navigate an e-commerce site.
TASK FLOW
USER FLOW
SITE MAP
IDEATE
With the foundation of the site laid out, I shifted to building the interface, starting with sketches and translating them into mid-fidelity wireframes. I also refined the brand identity in the UI kit to reflect Mirror’s modernity and simplicity.
SKETCHES
MID-FI WIREFRAMES
UI KIT
PROTOTYPE
Using the framework I set up previously, I built a prototype to be used for usability testing. Users previously noted that clean navigation, filtering options, and size guidance were crucial to their shopping experiences, so those were the areas I focused my attention towards.
USABILITY TESTING
I conducted testing with 5 participants in the target demographic, then created an affinity map to organize and prioritize my findings.
TEST OBJECTIVES
1. Test what pathways users take to find a product.
2. Test how easily users can narrow down products and navigate product selection.
3. Test whether design includes enough information to make a purchasing decision.
AFFINITY MAP
Usability testing went smoothly and testers offered a lot of insights around overlooked features. I also utilized the affinity map to prioritize improvements for iteration.
KEY INSIGHTS
successes
1. Design is minimal, neutral, and not overwhelming
2. Filter options in search results function as expected
3. Product details page includes all necessary information to make a purchasing decision
pain points
1. Homepage banner UI feels disruptive
2. The navigation for the main gender category can be confusing
3. Reviews or ratings would be helpful on the search results page
ITERATIONS
PROBLEM: NAVIGATION HIERARCHY
Main (Gender) Navigation gets lost in the other categories, results in user confusion on whether it is selected
SOLUTION
Main (Gender) Navigation text is larger and takes priority over subcategory navigation
PROBLEM: BLURRY CTA
Landing banner UI feels cramped and distracts from the CTA (Shop Now Button)
SOLUTION
Landing banner copy has no background, CTA button stands out (requires banner imagery guidelines)
PROBLEM: LACK OF CUSTOMER INSIGHT
Users can see product information, but missing helpful feedback from fellow users
SOLUTION
Star rating was added to each product thumbnail so users can gauge whether an item is worth clicking on
REFLECTION
NEXT STEPS
Given the limitations of this project, I did my best to implement the most helpful yet feasible revisions. If I were to continue working on this site, my next steps would be to build out the next prototype to test my revisions and make a few more features interactive so it doesn't disrupt the users' testing experience.
Customer accounts was also an insight from my initial user research that I would love to further build and test.
FINAL THOUGHTS
Building an e-commerce site from scratch pushed me through each phase of the design process. My greatest lesson throughout this project has been to have foresight. Moving forward, I believe having foresight and thinking ahead can help me design more efficiently and conduct more meaningful research.