CHAPTER 06 / 07
6 MIN READ

Reservation Flow

A conference-room booking flow for cove's Web Dashboard: six surfaces end to end, one built to production fidelity.

CLIENT
cove
YEAR
2024
ROLE
Design Lead
DURATION
2024
TEAM
Designer (me) · cove product partner
STACK
Adobe XD
Status · Delivered to cove
SCREENS01 / 06
Dashboard: upcoming events + side navFIG. 01
Reservations landing: Create CTA + upcoming listFIG. 02
Six meeting rooms · this week’s availabilityFIG. 03
Persistent upcoming-bookings sidebarFIG. 04
Booking form + side-by-side calendarFIG. 05
Review modal: single commit pointFIG. 06
01CONTEXT
01 / 06

The Situation We Walked Into

cove is the platform behind shared-amenity bookings, work orders, and tenant communication across office, residential, and retail properties. Reservations is where a tenant books a shared resource: a conference room, a gym slot, the rooftop.

The engagement was to design the room-booking flow on the Web Dashboard, anchored on one concrete scenario: a tenant in a 50-story office booking one of six conference rooms for a two-hour meeting of about fifty people, sometime in the next three weeks. The surface had to generalize beyond that, and it had to read as the same product as the rest of cove's dashboard without inventing a new information architecture.

¶ FLOWCLICK A STEP TO WALK THROUGH
02CONSTRAINTS
02 / 06

The Box We Had to Work Inside

  1. 01FIT THE PLATFORM'S GRAMMAR

    cove's Work Orders dashboard set the tone: tabular data, a left rail of object types, status pills, a side-panel detail view. Reservations had to read as the same product, not a redesign.

  2. 02DESKTOP WEB DASHBOARD ONLY

    cove ships native and web apps for the same product. This engagement was scoped to the desktop Web Dashboard. Mobile and native were not in the deliverable.

  3. 03ONE ANCHOR SCENARIO FIRST

    Nail one goal before generalizing: a two-hour meeting, about fifty attendees, within three weeks, user already signed in, no payment involved. That scenario drove every decision.

  4. 04SIX ROOMS, ALL VISIBLE

    The building has six conference rooms, and the picker had to show all six at once, no pagination, no progressive disclosure, so the tenant could choose by availability rather than by name.

  5. 05ONE COMMIT POINT

    In a shared building an accidental booking blocks the room for another team. The flow had to end on a deliberate review, not a one-click submit.

03DECISIONS
03 / 06

The Calls We Made, with Rationale

  1. 01
    Reservations as a first-class object in the left rail

    cove's dashboard treats Work Orders as a top-level object alongside People, Guests, and Communication. Reservations belongs in that list, not under settings and not in a modal. Putting it in the rail matches the platform's existing model and makes the entry point obvious from anywhere.

  2. 02
    A landing surface with one primary action

    The Reservations landing is deliberately small: a Create Reservation button and the tenant's upcoming bookings. No filter chrome, no menus. People come here to book a room, not to browse.

  3. 03
    Six rooms with this week's availability inline

    Picking a room is the first real decision. Rather than make the tenant open each room to check times, the picker shows all six as cards with the current week's availability on the surface. Which rooms are free Wednesday at two is answered without a click.

  4. 04
    A persistent upcoming-bookings sidebar

    A narrow column beside the room grid shows the tenant's own next bookings. It removes the “did I already book this slot for the other meeting?” check that otherwise breaks the flow.

  5. 05
    Form and calendar side by side

    The high-fidelity build pairs the reservation form on the left with a two-month calendar on the right. Choosing an available slot fills the form in place. The tenant never has to hold a date in their head while scrolling.

  6. 06
    A single hard commit point

    Confirm is a review surface: title, time, location, attendees, room. The tenant either commits or goes back to the form. One-click create with no review was too risky where the wrong booking costs someone else two hours.

04PROCESS
04 / 06

Artifacts and the Path

  1. 01MAP COVE'S EXISTING IA

    Started from the Work Orders dashboard and worked outward: the left-rail object types, the header pattern, the status-pill conventions, the side-panel detail view. Reservations had to live inside that grammar, so the audit set the constraints before any new pixels.

  2. 02SKETCH THE FLOW BEFORE OPENING XD

    Six boxes on paper: Dashboard, Reservations, Room, Upcoming, Form, Confirm. The information architecture settled before the layout did, and the flow stayed at six steps for the whole engagement.

  3. 03DESIGN ALL SIX SURFACES

    Took the work past the minimum. Landing, picker, the sidebar variant, form with calendar, and confirm were each designed end to end so the engagement showed a complete booking experience rather than one hero screen.

  4. 04GO HIGH-FIDELITY ON THE DENSEST SURFACE

    Form + Calendar was built to production spec: type, spacing, field rhythm, calendar density, the slot interaction. Craft is cheap to show on an empty landing page. It has to be earned on the busy one.

  5. 05MIRROR COVE'S VISUAL LANGUAGE

    Same left-rail structure, same header strip, same paper-card surfaces, same density as the rest of the dashboard.

  6. 06DELIVER THE RATIONALE WITH THE SCREENS

    Delivered a walkthrough alongside the screens: the IA call, each surface's decision, the tie back to cove's product anchors, and the open items for a next cycle.

¶ WALKTHROUGHSTEP 01 OF 06
01 · Dashboard: upcoming events + side nav
Dashboard·01 · Dashboard: upcoming events + side navFIG. 01
05OUTCOME
05 / 06

What Shipped and What It Moved.

  1. FIG. 01THE FLOW, IN ORDER
    6

    surfaces in the flow: Dashboard, Reservations, Room, Sidebar, Form, Confirm

  2. FIG. 021 OF 6 AT PRODUCTION FIDELITY
    1

    surface built to production fidelity: Form + Calendar

  3. FIG. 03BESIDE THE FORM
    2

    months of calendar visible beside the form, so a slot is chosen in context

  4. FIG. 04ALWAYS IN VIEW
    1

    persistent upcoming-bookings sidebar, the pattern that removed the double-booking check

Delivered the six-surface flow, the high-fidelity Form + Calendar build, and a walkthrough of every decision. The engagement ended at delivery. cove owned what happened next, and this study makes no claim about usage.

The scope went past the minimum on purpose. The easier deliverable was one hero screen with a sketch of the flow around it. The strongest decisions here, the persistent bookings sidebar, the form beside the calendar, the single-action landing, only show their value when the sequence is visible end to end.

06REFLECTION
06 / 06

What I'd Do Again, What I Wouldn't

  1. The small detail paid the most

    The persistent upcoming-bookings sidebar looked like an ergonomic footnote next to the bigger IA calls. It is the move that removed a whole class of “did I already book that?” friction. If I started over it would arrive at the start of the design, not as a refinement.

  2. What I would test next

    Usability on the inline-availability room picker, which is opinionated and worth checking against real cognitive load. A mobile companion on the same IA. An explicit error state for the booking-conflict case. And a treatment for recurring bookings beyond the single meeting this engagement anchored to.