Work  /  Flight Centre · Design system Case study
Flight Centre · Melon · Design system

More than just rows and columns.

When feedback pointed to poor readability and cramped layouts, the objective was clear: rebuild our table component so data is simple, accessible, and visually consistent.

The table component
The rebuilt Melon user-profiles table: alternating row shading, bold column headers, per-column search, and a Show columns control
Role
Product Designer (DS contribution)
Team
Design System · Eng
Product
Melon · Flight Centre
Users
Arrangers · travellers · admins
Remit
Audit → component → rollout
01 · Exploring the issue

It started with patterns.

Feedback, complaints, and inconsistencies kept showing up across our tables. To really hone in on the problem, I dug in from a few angles.

  • Audited our own tablesMapped every table across the product to surface patterns, inconsistencies, and pain points.
  • Gathered internal & external feedbackSmall text, tight spacing, and buggy behaviours came up again and again.
  • Reviewed other design systemsStudied how mature systems structure their table components for clarity and reuse.
  • Explored table-heavy productsGoogle, Notion, and Microsoft, to learn the patterns people already expect.
Fig. 01: where it began. Audit, feedback, and a survey of how the best tables are built.

The print is so small and it's hard to read when everything is squished together. I have to go blind trying to figure out which data is missing.

One of our table haters
02 · The fun stuff

Simple on purpose.

Just enough variants to handle any scenario, without making designers overthink or engineers overbuild. One flexible table-cell component covers every style, text, link, button, badge, payment, avatar, action menu, icon-only, with default, hover, selected, and disabled states behind each.

Fig. 02: one component, every scenario. Styles and states wired into clean Figma properties.
03 · Building for real use

Built for real use.

I replaced the buggy checkbox actions with a clean, connected action bar. Single or bulk, it just works, fast, consistent, and familiar.

Fig. 03: the action bar. Select one or many, the same clear actions appear.
04 · Refining the experience

Readable beats minimal.

Alternating rows, bold headers, and balanced spacing make for clarity at a glance. And I kept the quirky per-column search, because people love it.

Fig. 04: clarity at a glance. Alternating rows and bold headers do the heavy lifting.
05 · Flexibility, unlocked

Hide what you don't need. Move what you do.

Personal, flexible, and built for any data load. Columns can be shown, hidden, reordered, and searched, so every team can shape the table around the way they actually work.

Fig. 05: made personal. Show, hide, and reorder columns for any data load.
06 · A better table

A better table, plain & simple.

A table that's actually enjoyable to use. Cleaner, smarter, and accessible, the backbone of our data just got a glow-up, and our users now describe it as intuitive to use.

1Flexible component covering every table scenario
A11yContrast, spacing, and legibility built in from the start
“Intuitive”How users now describe a table they used to dread

The backbone of our data just got a glow-up.

Note to self
Next case ✦

Agents that don't think for you, they make you think.

Read next →