My Role
UX Designer/Researcher
Practices
UI Design
Design Systems
Accessible Design
Tools
Figma
MIRO
Date
September 2021
Project Overview
I designed a responsive retail website with a 3D product configurator, built to be accessible from the ground up. The goal was to create a shopping experience that works well for users with physical, visual, auditory, and cognitive impairments – not just meet compliance, but genuinely reduce barriers.
Research and User Understanding
The project began with developing four detailed personas, each representing a different type of impairment:
Phoebe, a doctor who experiences photophobia during migraines
Arthur, who has Parkinson’s and relies on keyboard navigation
Audrey, a musician with mild hearing loss
Dylan, an artist with dyslexia
These personas shaped both design priorities and evaluation scenarios. I referred to academic sources and accessibility guidelines (like WCAG 2.1) to inform inclusive decisions from the start.
Paper Prototypes
I began with low-fidelity sketches focusing on navigation clarity, contrast, and modular layouts. Special attention was given to keyboard focus order and screen reader compatibility.
High-Fidelity Design
The UI was refined in Figma with a neutral color palette, high contrast, readable typography, and alternative navigation options. Each page addressed specific accessibility needs:
The final prototype included:
Adjustable font size, spacing, and typeface (including OpenDyslexic)
Closed captions for video content
Dark mode for users with light sensitivity
Keyboard-accessible 3D configurator controls
Forms with correct labels for screen reader support
Button sizing to meet dexterity needs
Design decisions were backed by WCAG guidelines and dyslexia-friendly research. All animations could be paused, and contrast ratios were AAA-compliant.
Physical impairments: Full keyboard navigation and enlarged clickable elements.
Visual impairments: Screen-reader compatibility, ARIA landmarks, and strong contrast ratios.
Auditory impairments: Visual cues for all sound-based elements.
Cognitive impairments: Reduced complexity, simplified language, and consistent page structures.
Multi-Platform Design
Recognizing that over 80% of users access websites on mobile, I created responsive tablet and mobile layouts. Key changes included:
Button-based 3D controls (to replace drag gestures)
Simplified menus via hamburger navigation
Touch-friendly targets and layout adjustments for zoom
Evaluation
I conducted usability testing with five participants (varying accessibility needs) using a think-aloud protocol, SUS questionnaire, and follow-up interviews. Tasks included using accessibility features, configuring a product, and checking out.
SUS Score: 79.5 (above average usability)
Participants found features intuitive but noted unclear terminology and room to improve feedback on selections.
Iteration and Final Updates
Post-evaluation, I made key changes:
Replaced jargon in the configurator with visual hints
Added a reset view button for the 3D model
Removed unnecessary complexity (e.g. Z-axis rotation)
