Turning fragmented video journeys into reusable, accessible patterns.

Video appeared across Bupa’s web estate in several forms, from editorial stories and conversion-led calls to action to selectable collections and third-party players. Teams were choosing solutions by appearance rather than user intent, creating duplicated patterns, inconsistent behaviour and uneven accessibility.

I led the product design work to turn this complexity into a clear decision model and a documented set of reusable patterns within Anatomy.

The challenge

• Similar journeys used different components and interaction rules.
• Inline, modal and third-party players behaved differently across responsive layouts.
• Captions, focus, keyboard behaviour and error recovery were not consistently defined.
• Design, CMS guidance and production code lacked a shared handover contract.

Start with user intent, not the player

I audited existing journeys in production, mapped every video-related component in Figma and compared how teams used them. The key insight was that the right pattern depended on the job the video needed to do:

• Editorial video: video and text work together to explain a story.
• Video CTA: video supports a clear conversion action while the CTA remains primary.
• Navigational thumbnail collection: display a collection of video listing.
• Embedded player: inline, modal or third-party behaviour is chosen by context—not preference.

Designing the full experience

For each pattern, I defined responsive behaviour and the complete interaction model: default, focus, playing, captions and error states across desktop and mobile. The handover covered logical keyboard order, visible focus, programmatic control names, captions and transcripts, loading behaviour and recoverable errors.

One release contract across design and code

Need → proposal → accessibility review → engineering build → QA → release → adoption

Figma remained the design source of truth. Zeroheight documented when and how each journey pattern should be used. Storybook remained the development source of truth for implemented component behaviour. Together, they created a clearer contract between product design, engineering and content teams.

Governance and adoption

The work moved through Anatomy’s contribution model: a need entered the design radar, was tested against existing patterns, reviewed with accessibility and engineering, and released with product-ready guidance. Documentation, versioning, QA and office hours helped squads adopt the pattern without creating another local variation.

Outcome

The result was not simply a redesigned player. It became a reusable journey pattern with explicit intent, behaviour and accessibility requirements. Teams gained a shared way to choose the right video experience, while designers, CMS authors and engineers worked from aligned sources of truth.

• Reusable video journey logic instead of one-off page solutions
• Accessibility requirements embedded before engineering handoff
• Clear ownership across Figma, Zeroheight and Storybook
• A pattern model that supported the wider Anatomy migration

Read the wider Anatomy Design System case study →