Mirror eCommerce Website — full case study
Designed a responsive ecommerce website and new wordmark logo for an established clothing brand with 400+ physical stores expanding into online retail.
Client: Mirror
Category: Concept
Designed a responsive ecommerce website and new wordmark logo for an established clothing brand with 400+ physical stores expanding into online retail.
Logo & full responsive website, validated in usability testing
Role: UX and UI Designer
Duration: Concept project
Personal project
Mirror, an established clothing retailer with 400+ physical stores worldwide, had no online presence. They needed a brand identity extension (a new wordmark logo) and a fully responsive ecommerce website to launch their digital retail channel.
Online clothing shoppers needed accurate size information to avoid returns, high-definition imagery to assess fabric and fit, intuitive category navigation over reliance on search, and full pricing transparency with no hidden charges at checkout.
- Established offline retailer with 400+ stores entering ecommerce for the first time.
- Required both a new wordmark logo and a full responsive website design.
- Target users were online shoppers with high expectations set by leading fashion ecommerce sites.
- Concept project following a full 5-phase UX methodology from empathy research to usability testing.
Conducted market research and competitive analysis of leading fashion ecommerce platforms, followed by user interviews to identify key online shopper behaviours and pain points.
- Users want detailed size information prominently displayed to reduce return anxiety.
- High-definition product imagery is a primary purchase driver. Low-res images cause abandonment.
- Shoppers prefer clear navigational categories over relying on a search bar.
- Hidden charges discovered at checkout are the leading cause of cart abandonment.
Explored three wordmark directions before selecting a clean, modern approach that balanced the brand's retail heritage with a fresh digital identity. For the website, tested grid-based and editorial product layouts before settling on an image-led design that kept navigation frictionless.
Designed a new wordmark logo and a fully responsive ecommerce website. The site features intuitive category navigation, high-definition product pages with detailed size guides, a streamlined checkout with full pricing transparency, and consistent layouts across desktop and mobile.
- Full wordmark logo and responsive ecommerce website designed end-to-end.
- 5-phase UX process: Empathy, Define, Ideate, Prototype, and Test.
- All key user tasks completed successfully in moderated usability testing.
- Responsive layouts covering desktop, tablet, and mobile breakpoints.
- Usability testing validated the design with positive feedback across all core shopping tasks.
- Navigation and checkout flow confirmed as intuitive and trustworthy by test participants.
Designing for ecommerce requires balancing visual richness (photography, brand identity) with functional clarity in navigation and checkout. The research phase was critical for identifying that size information and pricing transparency were the top user needs.
I would have engaged a broader and more diverse group of users in testing, and explored more colour palette variations to find one with stronger brand distinctiveness for the digital context.
Overview
Category: Concept
Discipline: Ecommerce and brand design
A wordmark logo and a responsive ecommerce website for an established clothing store.
Target Users: Online shoppers seeking quality, affordable clothing.
Role: UX and UI Designer
Tools: Pen and paper, Sketch, InVision
Empathise
- Market research
- Competitive analysis
- User interviews
- Contextual enquiries
Define
- Personas
- Empathy maps
- Problem statements
Ideate
- Ideation
- Sitemap
- User flows
- Wireframes
Prototype
- Lo-fi prototypes
- Hi-fi prototypes
Test
- Usability testing
- Affinity maps
Process, phase by phase
Empathise
Market Research
Competitive analysis of leading fashion ecommerce platforms established baseline expectations for online clothing shoppers. Research revealed that size information, imagery quality, and checkout transparency were the primary drivers of purchase confidence, and the biggest sources of abandonment when missing.
- Mirror market research and competitive analysis
User Interviews
I interviewed shoppers to learn why and how they buy clothing online, then observed each participant make a purchase on their favourite retail site. Four findings shaped everything that followed: shoppers want better size information, they expect high definition imagery, they prefer browsing by navigation over search, and they dislike hidden charges appearing at checkout.
User Persona
User interviews found the primary persona: Sam, a business analyst who shops online for both convenience and quality. Sam values accurate size guides, clear product imagery, and a checkout with no surprise charges, and will abandon a site the moment trust breaks down.
- Mirror user persona: Sam, online clothing shopper
Empathy Map
The empathy map captured Sam's frustrations with existing fashion sites: unclear sizing led to unwanted returns, low-resolution images made it impossible to assess fabric quality, and discovering hidden fees at checkout caused immediate abandonment regardless of how good the browsing experience had been.
- Mirror empathy map: online shopper frustrations
User Story
I mapped two contrasting shopping journeys: the frustrated shopper who abandons due to poor product information and surprise charges, and the confident shopper who completes a purchase because the site is clear, trustworthy, and easy to navigate. The contrast made the design priorities concrete.
- Mirror user story: contrasting shopping journeys
Define
Card Sort
A card sort exercise helped define how users mentally grouped clothing categories and expected to navigate a fashion site. Results showed users preferred broad gender and category navigation (Women, Men, New Arrivals) over style-based filtering, which directly shaped the site's information architecture.
- Mirror card sort: clothing navigation categories
Ideate
Sitemap
The sitemap organised the site around clear top-level categories (Women, Men, and New Arrivals) with logical subcategories for clothing types. The checkout flow was designed as a separate streamlined path with persistent basket visibility throughout.
- Mirror sitemap: ecommerce navigation structure
User Flow
I designed three key flows: the product discovery flow (browse → filter → product page), the purchase flow (product → basket → checkout → confirmation), and the size guide flow. Each was designed to minimise decision points and reduce friction at every step.
- Mirror user flow: product discovery and purchase
Wireframes
Wireframes covered five key page types: homepage with hero and featured collections, category listing page with filters, product detail page with size guide, basket, and checkout. Desktop, tablet and mobile layouts were designed in parallel to ensure a consistent experience across all three breakpoints.
- Mirror wireframes: homepage, product, checkout
Prototype
Brand & Logo
Mirror's customers know the store by its name, so the brief was to keep the full name in the logo. Multiple wordmark directions were explored before settling on a clean, contemporary approach that balanced Mirror's heritage as an established retailer with a modern digital identity, supported by a monogram that works as a favicon and on small screens.
- Mirror wordmark logo explorations and final design
UI Kit
The design system was built on a neutral palette that lets product photography lead, with a clean typographic hierarchy and purposeful use of white space. Components were designed for clarity and speed, from quick-add interactions to an accessible, friction-free checkout form.
- Mirror UI kit: colours, typography, components
High-fidelity Screens
The final high-fidelity screens delivered a fully responsive ecommerce website with a clear homepage, intuitive category navigation, product pages featuring detailed size guides and high-definition imagery, and a transparent checkout, designed across desktop, tablet and mobile breakpoints.
- Mirror hi-fi: homepage with hero and featured collections
- Mirror hi-fi: category listing page with filters
- Mirror hi-fi: product detail page with size guide
- Mirror hi-fi: basket and checkout flow
- Mirror hi-fi: mobile responsive layouts
Test
Usability Testing
The high-fidelity screens were built into an interactive InVision prototype, a working model of the website that participants could click through. Usability sessions checked how easily people could find an item, judge its size and fit, and complete a purchase, and feedback was positive across all key tasks.
Affinity Map
Post-usability testing, affinity mapping clustered feedback into four themes: the need for clear size guidance, the importance of high-quality imagery, a preference for navigational browsing over search, and a strong expectation of pricing transparency at checkout.
- Mirror affinity map: usability testing themes
Reflection
This project was a genuine learning experience. Talking to users during research, card sorting and usability testing shaped how I think about information architecture, and watching participants sort cards showed me how to turn raw data into structure. Looking back, I would have recruited more participants to build a wider set of personas, and pushed the colour palette and interactions further. The positive feedback from usability testing of the hi-fi prototype was the reward, and working closely with users is what I want to carry into every project.