Jaguar Land Rover, Global Digital Experience
Jaguar Land Rover: an accessible system for two global brands
Lead UI designer auditing every UI component across Jaguar and Land Rover’s global digital experience, pairing an external UX agency’s research with in-house accessibility work and a rebuilt design system.
- Scope
- UI + accessibility audit
- Role
- Lead UI designer
- Client
- Jaguar Land Rover
- Year
- Add year
- Status
- Shipped
Background
One global estate, no shared standard
Jaguar and Land Rover’s digital experience spanned markets and components with no consistent standard for contrast, tab order, shadows or navigation. An external agency ran UX reviews across the estate; my job was to take those findings, run our own internal UX and accessibility work alongside them, and rebuild the UI properly, then get it into engineering’s hands.
Process
How the work was phased
Discover
Add timing
Reviewed the agency’s UX findings and interviewed designers about the existing system.
Define
Add timing
Identified accessibility gaps and what the design system actually needed to serve.
Design
Add timing
Rebuilt the design system and components, prototyping real transitions and hover states.
Deliver
Add timing
Handed off an accessible system to engineering across two global brands.
Research
Filling in what the agency review couldn’t
An external UX agency had already reviewed the estate. My research had to cover what a UX-only review misses: real accessibility standards, and what the designers who’d live in this system actually needed from it.
Add count
Designer retrospective interviews
Add count
Components audited
2
Global brands covered (Jaguar, Land Rover)
Problems identified
What was actually going wrong
No shared accessibility standard
Colour contrast, tab order and shadows varied across the estate, with no consistent rule set behind any of it.
Agency flows without a working UI
The external agency’s UX flows were solid on paper, but nothing existed yet in transitions, hover states, or real imagery sizing.
A design system nobody had asked the designers about
Earlier versions of the system had been built without checking what the designers actually using it day to day needed from it.
Representative of feedback patterns described in research and retrospectives, written to reflect the theme, not verbatim quotes from named individuals.
“I never know if this component follows our contrast rules or not.”
Internal designer feedback, paraphrased
“Every market seems to have its own version of this component.”
Engineering feedback, paraphrased
Who this was for
Two different users, two different needs
In-house designers
Live in the system daily
- A design system built around what they actually reach for, not assumptions
- Consistent, accessible components across every market
- A shared source of truth instead of drift between regions
Engineering team
Builds from the handoff
- Real interaction detail, transitions and hover states, not static comps
- Clear specs that don’t require guesswork during implementation
- A single design language across both brands to build against
Key decisions
Problem, decision, outcome
Final design
What I designed
Accessibility
A fully accessible brand system
Led brand guidelines built around colour contrast, tab order and shadow rules checked against real accessibility standards, not treated as a checklist afterwards.
Design systems
A rebuilt design system
Audited and enhanced every single component, talking to product management about each one’s actual purpose before updating it to current UX practice.
Component design
New core components
Designed newer, more complex pieces of the system from scratch, including a reworked navigation component.
Dev handoff
UI built to be built
Passed every redesign to developers with detail specs, then worked with them directly through implementation rather than handing off and disappearing.
Edge cases
Constraints that shaped the decisions
Constraint
The UX research came from an external agency, not from us directly
Response: ran an internal accessibility pass in parallel rather than accepting the agency’s flows at face value.
Constraint
Two global brands need to share one system without losing their own identity
Response: built one design system with enough flexibility for each brand to still feel distinct.
Constraint
The system had to hand off to an existing engineering team, not a blank slate
Response: built working prototypes with real transitions and hover states before handoff, not static mockups.
Trade-offs
What I chose not to do
We didn’t rebuild every component from day one
Focused first on the pieces with the worst accessibility gaps, since a full rebuild across two global brands wasn’t realistic in one pass.
We didn’t run a from-scratch UX research programme
Treated the agency’s review as the foundation, filling specific gaps internally rather than duplicating their work.
Outcome
What the audit left behind
Coverage
2 brands
Jaguar and Land Rover, one shared system
Accessibility
Full audit
Colour contrast, tab order and shadows reviewed
Scope
Add count
Components rebuilt across the system
Global rollout across Jaguar & Land Rover.
Testimonials
“Add a quote here from a colleague or client about working with you on this project.”
Name, Title, Jaguar Land Rover
“Add a second quote here, if you have one.”
Name, Title, Jaguar Land Rover
Reflection
What I learned
Accessibility works best built in, not bolted on
Treating contrast and tab order as core design decisions, not a final QA pass, changed how the whole system held together.
Translation is its own skill
Turning an agency’s flows into a working system taught me as much as designing from scratch would have.
Skills demonstrated
More work