Deep — Design Systems || Hamish Duncan || Design Systems Architect || Next-generation innovation in UX/UI design, product and research

Deep

Design Systems

1

PROCESS

• Reviewed project brief and accessibility compliance goals
• Audited existing UI for accessibility and design consistency
• Held kickoff meeting with design, dev, and compliance teams
• Researched inclusive design patterns and WCAG 2.1 standards
• Analysed competitor design systems for accessibility integration
• Sketched component ideas and mapped UI inconsistencies
• Collaborated with engineering to assess feasibility and semantic structure
• Created initial component wireframes and flows
• Presented to stakeholders for feedback
• Built mid-fidelity interactive prototypes using accessible markup
• Conducted usability testing with users of varying abilitiesIterated based on testing insights and technical constraints
• Developed high-fidelity UI aligned with brand and accessibility standards
• Finalised components in Zeroheight with accessibility documentation
• Delivered to engineering with coded guidelines and dev pair sessions

2

Discovery

RESEARCH ACCESSIBLE DESIGN SYSTEM PATTERNS

To understand how large organisations successfully embed accessibility into their design systems, I analysed mature systems such as the BBC GEL and IBM Carbon. Both place accessibility at the core — not as an afterthought, but as a design foundation.

I was especially interested in how they combine semantic structure, ARIA attributes, and clear documentation to support consistent, accessible component implementation across teams.

WHAT I TOOK AWAY

From BBC GEL:
‍
• Prioritise clear guidance over visual flourish
• Build for lowest common denominator tech (screen readers, keyboard nav)
• Accessibility is enforced at the principle level, not just the component level

From IBM Carbon:
‍
• Robust, component-level accessibility checklists
• Built-in keyboard interaction guidance
• Code examples with live ARIA behaviour baked in

‍These systems informed my direction for Hargreaves Lansdown — particularly in how we could structure documentation, support devs, and scale inclusive design without duplicating effort.

COMPETITOR AUDIT: FINANCIAL SERVICES

I also looked at digital products from key financial competitors. Despite modern branding, many fell short on:
‍
• Focus indicators and tab navigation
• Form field accessibility (labels, error messaging)
• Colour contrast compliance

This confirmed an opportunity: Hargreaves Lansdown could differentiate through accessibility leadership.

3

DESIGN

This is some text inside of a div block.

4

PROTOTYPE

This is some text inside of a div block.

5

TEST

This is some text inside of a div block.

6

ACCESSIBLITY

This is some text inside of a div block.