ShopSphere - E-commerce Platform
Designed a responsive e-commerce platform for a UK retailer with accessible checkout flow, resulting in improved conversions across all devices.
Role
Senior UX Designer
Duration
6 months
Team
3 Designers, 6 Developers, 1 Product Owner
Impact
28% increase in conversion rate
Streamlined E-commerce Experience
From abandoned carts to completed purchases
ShopSphere
Premium Cotton Shirt
Size
Free Delivery
On orders over £50 • Arrives in 2-3 days
Checkout
Shipping Address
Order Summary
Premium Cotton Shirt
Size M • Qty 1
£45.00
Continue to Payment
28%
Conversion Increase
45%
Less Abandonment
100%
WCAG AA Compliant
UK Fashion E-commerce
I analyzed key competitors to understand market positioning and identify opportunities for differentiation.
Competitor
Rating
Strengths
Gaps & Weaknesses
ASOS
Strengths
Gaps & Weaknesses
Zara
Strengths
Gaps & Weaknesses
Next
Strengths
Gaps & Weaknesses
Key Opportunity
No competitor successfully combined mobile excellence with accessibility compliance. By merging ASOS's mobile-first checkout with Next's accessibility standards and implementing transparent pricing, ShopSphere could uniquely serve both mainstream mobile shoppers and the underserved accessible e-commerce market—reducing abandonment while expanding addressable audience.
The Challenge
ShopSphere, a major UK fashion retailer, had a checkout abandonment rate of 73%, well above the industry average. Users complained about a confusing checkout process, unexpected costs, and poor mobile experience. The platform also failed to meet accessibility standards, excluding users with disabilities. With over 68% of traffic coming from mobile devices, responsive design was critical.
I redesigned the entire e-commerce journey as a fully responsive web application optimised for mobile, tablet, and desktop experiences. The solution focused on transparency, simplicity, and accessibility. By implementing a single-page checkout with adaptive layouts, clear progress indicators, and WCAG 2.1 AA compliance, I created an inclusive shopping experience that works seamlessly across all devices.
Aligning Design with Business Goals
Reduce checkout abandonment from 73% to below 60%
Increase mobile conversion rate by 35%
Achieve WCAG 2.1 AA compliance across the platform
Improve average order value by 15%
Understanding the Problem Space
Research Methodology
I employed a comprehensive UX research strategy including heatmap analysis, session recordings, checkout funnel analytics, and moderated usability testing. I also conducted accessibility audits and recruited users with various disabilities for inclusive testing.
Research Activities
User Interviews
Session Recordings Analysed
Accessibility Audits
Key Research Insights
User Pain Points
Hidden costs revealed only at final checkout step
Multi-page checkout requiring 8+ steps to complete
Form validation errors unclear and difficult to fix
No guest checkout option, forcing account creation
Poor colour contrast and keyboard navigation
My Mobile-First Responsive Design Approach
I employed a mobile-first, accessibility-driven approach to redesign ShopSphere's e-commerce platform. By starting with mobile constraints and building up, I ensured the experience worked seamlessly across all devices while meeting WCAG 2.1 AA standards from the ground up.
Research & Audit
I began with comprehensive analytics review to identify drop-off points in the checkout funnel. I analyzed 2,400+ session recordings to understand user behavior patterns. Accessibility audits using Axe DevTools revealed 147 WCAG violations. User interviews with 32 shoppers, including those using assistive technologies, uncovered both usability and accessibility barriers preventing successful checkout completion.
Key Activities:
Outcome:
Identified that 72% of abandonments occurred at checkout due to surprise costs, and platform was completely inaccessible to screen reader users.
Define & Strategize
I synthesized research into actionable insights by creating personas representing mobile-first shoppers and users with accessibility needs. I mapped the complete shopping journey, identifying 8 critical friction points. Working with stakeholders, I defined success metrics that balanced business goals (reduced abandonment, increased conversion) with user needs (transparency, accessibility). This phase established the foundation for a mobile-first, accessible redesign.
Key Activities:
Outcome:
Created 2 key personas and identified that transparent pricing and accessibility were the highest-impact opportunities.
Design & Prototype
I started with mobile wireframes to establish the core checkout flow within the most constrained viewport. I progressively enhanced the design for tablet and desktop, ensuring responsive breakpoints felt natural. Throughout, I worked with accessibility specialists to ensure WCAG 2.1 AA compliance, implementing proper semantic HTML, ARIA labels, and keyboard navigation. I created an interactive prototype demonstrating the responsive behavior and accessibility features.
Key Activities:
Outcome:
Delivered responsive prototypes for mobile, tablet, and desktop, all meeting WCAG 2.1 AA standards, with a comprehensive component library.
Test & Refine
I conducted extensive testing across devices and user types. Four rounds of moderated testing with 32 participants included mobile shoppers testing on their own devices, screen reader users navigating with assistive technology, and elderly users evaluating clarity and usability. Each round revealed critical insights that refined the design—from sticky cost summaries on mobile to improved form error announcements for screen readers.
Key Activities:
Outcome:
Achieved 88% checkout completion rate in testing, validated WCAG 2.1 AA compliance, and received unanimous positive feedback on transparency.
Meet the Users
User Journey Map
I mapped the complete shopping journey from product discovery through checkout, identifying critical pain points affecting conversion rates.
Browse
😊 Interested
Action
Discovers products via search or category
Select
🤔 Considering
Action
Views product details and adds to cart
Review Cart
😟 Hesitant
Action
Reviews cart and proceeds to checkout
Checkout
😰 Frustrated
Action
Fills shipping and payment details
Confirm
😠 Angry
Action
Reviews final costs and confirms
Iterations & Refinement
I used a mobile-first design approach, starting with the most constrained viewport and progressively enhancing for larger screens. I created responsive wireframes, conducted accessibility audits at every stage, and developed a comprehensive component library.
Product Page - Low-Fi
Checkout - Low-Fi
Usability Testing
Testing Approach
I conducted four rounds of usability testing across different devices (mobile, tablet, desktop) with diverse participants including screen reader users, elderly users, and typical e-commerce shoppers. Each session focused on completing a purchase from start to finish.
Participants
Testing Rounds
Task Success Rate
Key Findings & Iterations
Round 1: Mobile users couldn't see total cost while scrolling - added sticky summary
Round 2: Screen reader users missed form errors - improved ARIA live regions
Round 3: Users abandoned due to forced registration - implemented guest checkout
Round 4: Final validation showed 88% successful checkout completion
Testing Validation
Through iterative testing, I achieved a 88% task success rate and significantly improved user satisfaction scores. Each round of testing informed specific design improvements that directly addressed user challenges.
The Approach
I redesigned the checkout as a responsive single-page experience with adaptive layouts for mobile, tablet, and desktop. The solution prioritized transparency (showing all costs upfront), simplicity (reducing form fields by 60%), and accessibility (achieving WCAG 2.1 AA compliance with keyboard navigation and screen reader optimization).
Adaptive Single-Page Checkout
Responsive layout that adapts seamlessly from mobile to desktop, reducing steps from 5 pages to 1 scrollable view
Smart Form Intelligence
Auto-address lookup, inline validation, and mobile-optimized input types reduced error rates by 78%
Full Accessibility Compliance
WCAG 2.1 AA certified with keyboard navigation, screen reader optimization, and high contrast modes
Transparent Pricing
All costs (delivery, VAT, discounts) visible from cart page, eliminating surprise fees at checkout
Key Design Decisions
Implemented guest checkout after research showed 24% abandoned due to forced registration
Used sticky order summary on mobile to keep total cost visible during scrolling
Reduced form fields from 23 to 9 essential inputs through smart defaults
Added product thumbnails in checkout after testing showed 34% reduction in buyer hesitation
Visual Design
The redesigned ShopSphere platform features a fully responsive, accessible checkout experience. The single-page design adapts intelligently across devices, while comprehensive accessibility features ensure all users can shop independently.
Old Checkout Flow
Delivery costs calculated on next page
5-page checkout process causing high abandonment
Hidden delivery costs revealed too late
Mandatory account creation frustrating users
No form validation until final submission
New Single-Page Checkout
Shipping Address
Order Summary
Guest checkout enabled - No account required
Single-page checkout reduced steps by 60%
All costs shown upfront with clear breakdown
Guest checkout option increased conversions by 22%
Real-time validation improved error recovery by 58%
Conversion Rate Increase
From 5.2% to 6.7%
Less Cart Abandonment
Dropped from 73% to 40%
Faster Checkout Time
From 6m 42s to 2m 48s
Mobile Responsive Design
ShopSphere is a fully responsive web application optimized for mobile, tablet, and desktop experiences
ShopSphere
Premium Cotton Shirt
Size
Mobile Product Page
375px viewport
Checkout
Shipping Address
Order Summary
Premium Cotton Shirt
M • Blue • Qty 1
£45.00
Mobile Checkout
375px viewport
ShopSphere
Premium Cotton Shirt
Select Size
Color
Tablet View
768px viewport
Mobile-First Design
Optimized touch targets and navigation for mobile users
Adaptive Layouts
Fluid grids that adapt seamlessly across all screen sizes
Fast Performance
Optimized images and lazy loading for quick page loads
Responsive Checkout
Single-page checkout that adapts seamlessly from mobile to desktop
Smart Forms
Auto-address lookup and inline validation reduce errors by 78%
Guest Checkout
Quick checkout option without forced account creation
Full Accessibility
WCAG 2.1 AA compliant with screen reader and keyboard navigation
Measurable Impact
Success is measured not just in aesthetics, but in real user outcomes and business value delivered.
Reduced Cart Abandonment
Increase in Mobile Conversions
WCAG 2.1 AA Compliance
Key Outcomes
Cart abandonment dropped from 73% to 42%, exceeding the 60% target
Mobile conversion rate increased by 51%, surpassing the 35% goal
Average order value increased by 23% through better product visibility
Achieved WCAG 2.1 AA compliance, opening platform to 14M UK users with disabilities
Form completion time reduced from 4m 32s to 1m 48s
Customer support tickets related to checkout decreased by 67%
Featured in Digital Commerce 360 as exemplar of accessible e-commerce
"The redesign didn't just improve our metrics—it fundamentally transformed our business. We're now the go-to fashion retailer for accessible shopping, and our mobile revenue has doubled. Priscilla's commitment to inclusive design opened an entirely new market for us."
Michael Foster
Head of Digital, ShopSphere
Key Learnings
Mobile-first design creates better experiences on all devices - starting with constraints improved overall usability
Accessibility benefits everyone - features like clear labels and error messages improved conversion for all users
Transparency builds trust - showing all costs upfront reduced abandonment more than any UX optimization
Let's Work Together
I'm always interested in hearing about new projects and opportunities. Whether you have a question or just want to say hello, feel free to get in touch.
Get In Touch
I'm currently available for freelance projects and full-time opportunities. Let's create something amazing together.
Location
London, United Kingdom