Show me

all projects

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hargreaves Lansdown

UX Design

Hargreaves Lansdown recognised significant accessibility gaps in their digital financial platforms, with existing interfaces creating barriers for users with diverse abilities. The technology team needed a comprehensive solution that would address usability challenges while maintaining brand consistency and development efficiency.

Designing an Inclusive Digital Experience: The HL Tech Design System

Challenge

Financial services platforms traditionally prioritize functionality over accessibility, often creating barriers for users with diverse needs. At Hargreaves Lansdown, we recognized the critical importance of creating a design system that serves all users, regardless of their physical abilities or technological constraints.

Our Approach: Accessibility as a Fundamental Design Principle

Shared Responsibility Model

Our design system development was built on a collaborative approach, breaking down silos between design, development, and product teams. We understood that accessibility is not a single department's responsibility, but a collective commitment.

Key Design System Objectives

  • Create a user-friendly interface
  • Simplify development processes
  • Maintain consistent brand experience
  • Ensure comprehensive accessibility

Design Process

Three-Stage Component Development

  1. Need Identification
  2. Brand-Aligned Design
  3. Rigorous Code Review

Accessibility Considerations

  • WCAG guideline compliance
  • Screen reader compatibility
  • Keyboard navigation support
  • Contrast and text size optimization
  • Comprehensive ARIA implementation

Innovative Solutions

Field Text Component

A standout example of our approach was the Field Text component, which allows visual label hiding while ensuring screen reader accessibility. This small but significant feature demonstrates our commitment to inclusive design.

Impact

  • Reduced development friction
  • Consistent user experience
  • Expanded platform usability
  • Lowered barriers for users with diverse abilities

Key Learnings

Accessibility is not a checklist but a continuous journey of empathy, collaboration, and user-centered design.

SITUATION
TASK
ACTION
RESULT

S

Situation

Hargreaves Lansdown recognised significant accessibility gaps in their digital financial platforms, with existing interfaces creating barriers for users with diverse abilities. The technology team needed a comprehensive solution that would address usability challenges while maintaining brand consistency and development efficiency.

T

Task

Develop a design system that: • Ensures full WCAG accessibility compliance • Creates a unified design language across web and mobile platforms • Reduces development complexity • Improves user experience for all users, including those with temporary or permanent disabilities • Enables rapid, consistent component development

A

Action

• Implemented a cross-functional approach involving design, development, and UX teams • Created a React-based component library with built-in accessibility features • Developed a three-stage review process: design, brand alignment, and technical validation • Introduced specialized components like the Field Text input with screen reader support • Established team-wide accessibility training and workshops • Integrated ARIA attributes and semantic HTML into core components • Conducted extensive user testing across different ability spectrums

R

Result

• Reduced component development time by 40% • Achieved WCAG 2.1 compliance across all digital platforms • Increased user engagement across diverse user groups • Created a reusable, scalable design system that became a benchmark for inclusive design in financial technology • Improved overall user satisfaction and platform usability • Positioned Hargreaves Lansdown as a leader in accessible digital financial services
hdx
I collaborate with awesome leaders working to restore. Let's build.
‍
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

SOCIAL