Case study:

The Table Component.

Leading the design of a flexible, accessible table system for a regulated financial platform.

3b317f_0ddd008272644735a2b70bc125c1c893~mv2.avif

The Challenge.

Nationwide’s existing design system included only a basic table pattern that failed to scale across:

different data densities,
comparison and summary of use cases,
accessibility requirements,
varying member needs and device contexts.

As my first project as UI Lead, I was responsible for defining a single, cohesive table system that could be safely reused across teams without fragmentation. A high-risk component in a financial environment where accuracy and accessibility are non-negotiable.

Design Strategy.

Rather than jumping to solutions, I framed the work as a system-definition problem.

Tables are not just UI elements; they encode financial information, comparisons, and decisions.

Getting them wrong introduces:

comprehension risk,
accessibility failures,
inconsistent interpretations of data,
long-term design and technical debt.

I therefore led a deliberate discovery-first process to ensure the final design was grounded in evidence and organisational alignment.

Discovery & Problem Framing.

The discovery phase focused on identifying:

all current and future table use cases,
shared constraints across teams,
known pitfalls and accessibility risks,
technical feasibility.

This phase intentionally avoided solution design, allowing space to clearly define what problem we were solving and for whom.

Discovery Activities.

Kick-off & research framing.

I worked closely with a researcher to define guiding questions that clarified:

what we already knew,
what we needed to learn,
where would the evidence come from.

This created a clear research contract and ensured discovery would lead to actionable design decisions.

Collating shared learnings.

I engaged designers across Nationwide to surface:

previously solved challenges,
failed or abandoned approaches,
edge cases and constraints,
teams most impacted by the change.

This avoided duplication of effort and ensured the new component reflected real organisational needs rather than theoretical ones.

Accessibility alignment.

I partnered with the accessibility team from the outset to ensure:

WCAG considerations were built in from first principles,
keyboard navigation, screen reader behaviour, and focus management were core design constraints.

Accessibility was not treated as a downstream validation step. This reduced risk and prevented costly rework later.

Communication & behavioural audit.

I reviewed Nationwide’s wider communication landscape, including in-branch materials and digital channels, to identify patterns members were already familiar with.

This ensured the table designs aligned with established mental models, reducing cognitive load for members interacting with financial data.

Literature, competitor & visual audits.

I conducted:

a review of internal guidance and system documentation,
a competitor analysis to identify best practices and anti-patterns,
a visual audit of all existing table implementations across the Nationwide ecosystem.

This surfaced fragmentation and opportunities for consolidation.

Synthesis & feasibility alignment.

Using infinity mapping, I grouped insights into themes and prioritised areas of focus.

I then ran early check-ins with engineering to validate:

technical feasibility,
implementation complexity,
risks and constraints.

This ensured the design direction was realistic and scalable.

Designing the Table System.

Based on discovery, I designed a family of table variants, including:

simple reference tables,
comparison tables,
totals and summary tables.

Each variant shared a consistent foundation while supporting different data and interaction needs.

System principles.

The table system was designed around:

clear hierarchy and alignment,
predictable interaction patterns,
configurable density and structure,
strong accessibility defaults,
responsiveness across devices,

Rather than designing bespoke tables, I defined rules and variants, allowing teams to safely compose tables without breaking consistency.

Accessibility by default.

Accessibility requirements were encoded directly into the component:

clear focus states,
logical reading order,
support for assistive technologies,
sufficient contrast and spacing.

This ensured that accessibility scaled with reuse, rather than relying on individual teams to re-implement it correctly.

The Solution.

The final outcome was a scalable, governed table component that could be confidently reused across Nationwide’s digital estate.

Its main impact:

reduced design and engineering duplication across teams,
fewer accessibility defects in downstream implementations,
faster delivery of data-heavy financial journeys,
improved consistency and comprehension of tabular financial information.

Most importantly, the system reduced risk in a high-stakes domain by ensuring data was presented consistently.

View Prototype