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
- Need Identification
- Brand-Aligned Design
- 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.
