Back to work
$ cat ./work/ot-reservations.md

Modernizing Restaurant Reservations Without Losing Density

Improved the restaurant reservation workflow — better hierarchy and scannability without sacrificing the information density power users depend on.

Product DesignDesign SystemsEnterprise UX
Company
OpenTable
Year
2019 – 2022
Role
Design Systems Lead & Product Partner
Timeline
10 weeks

Overview

OpenTable's reservation details view had become the most legacy-styled screen in the product — dense, visually fragmented, and expensive to maintain. Restaurant operators used it every shift, but years of accumulated features had buried the information hierarchy. I led the redesign to modernize the experience while preserving the density operators depended on.

Design systems driving practical product outcomes — not just visual consistency.

Reservation Details, before-and-after comparison. Legacy flat layout on the left; the redesigned card-based hierarchy on the right.
iPad → iPhone. Reverse-engineering OpenTable's Front of House iPad app to iPhone and Android.
Role
Design Systems Lead, Product Partner
Scope
UX strategy, system alignment, component modeling
Team
3 designers, 6 engineers, 2 PMs
Timeline
10 weeks

The Problem

Reservation details had become a dumping ground for years of accumulated features.

The experience was:

  • Dense and visually fragmented
  • Difficult to scan under time pressure
  • Inconsistent across platforms
  • Costly to maintain due to distributed ownership across engineering teams

Despite its importance, it had the most legacy styling in the product, making UX improvements slow and risky.

Before and after comparison of the reservation card: legacy flat layout on the left, redesigned modular card-based hierarchy on the right
Before → After. Same information density, restructured for clarity and cross-platform consistency.

Constraints

  • Zero tolerance for data loss or behavioral regressions
  • Heavy daily usage by restaurant staff
  • Multiple engineering teams owning different parts of the flow
  • Need to preserve information density while improving clarity

Strategy

Rather than redesigning the page wholesale, we treated the reservation view as a modular system problem.

Key principles:

  • Preserve density, improve hierarchy
  • Replace bespoke layouts with reusable system components
  • Design once, scale across platforms

Modernize the experience without disrupting established workflows.

Solution: Modular, Card-Based Architecture

We restructured the reservation details view into a modular, card-based layout that:

  • Clarified information hierarchy
  • Improved scannability under time pressure
  • Enabled consistent behavior across mobile, tablet, and desktop
  • Reduced one-off UI logic in engineering

Each card mapped to a system pattern, allowing teams to iterate safely and predictably.

Modular ecosystem

Annotated diagram showing how guest and reservation information was made modular across Back of House, Front of House, Web, iOS, and Android
Making guest and reservation information modular: components designed to scale across multiple contexts.
Screenshot of the redesigned Guest Profile component in the Back of House web view
Close-up screenshot of the Guest Profile component showing structured guest data in Back of House
The new Guest Profile component made guest data easily viewable in Back of House
Animation showing the modular card-based breakdown of the reservation details view
Each section of the reservation view mapped to a discrete system pattern, making the layout predictable for both users and engineers.
Animation of the updated iOS Restaurant app showing modular layout and design system components
The modular card architecture in action: each zone behaves predictably and scales responsively across screen sizes.

System Alignment

This work became a proving ground for OTKit in real product conditions.

We:

  • Applied shared tokens and components across platforms
  • Validated cross-platform typography and spacing decisions
  • Reduced reliance on custom overrides
  • Tightened the feedback loop between system and product teams

The result was faster iteration with fewer regressions.

Screenshot of OTKit documentation site showing how to implement inline theming for legacy screens
Support for inline theming was implemented to support mixed legacy theming before full light/dark theme were prioritized
Screenshot of OTKit color token references inside iOS app
OTKit tokens in SwiftUI

Outcomes & Impact

  • Modernized a core operational workflow without sacrificing density
  • Improved readability and hierarchy in a high-stakes, time-sensitive interface
  • Reduced QA friction by replacing bespoke UI with shared system patterns
  • Strengthened trust in OTKit through visible, high-traffic product adoption

Reflection

Designing for restaurant operators reinforced that usability isn't about simplification. It's about clarity under pressure.

This work showed how design systems can enable meaningful product improvements without disrupting workflows that teams depend on daily.