Hopper Case Study · Mimi Newman

Client: Hopper
Role: Senior Product Designer
Duration: September 2022 to October 2023
Products: Hopper Hotels and Hopper Homes partner tooling, consumer mobile features
Surfaces: Listings CRUD, reservations, roles-groups-permissions, promotions, consumer home booking flow
Users: Hopper admins, hotel partner group admins, front desk, tax managers, caseworkers, consumer travelers
Scope: Research across consumer and partner products, UX, UI, design system interaction states, cross-functional design critique
Outcome: Partner surface shipped with granular RBAC, redesigned listing CRUD, documented interaction states, consumer home booking flow.

01 · Situation

A margin play blocked by engineering-first UX.

The unknowns

New business model. Shift from aggregated OTA inventory to direct listings for margin.
An MVP in engineer-ese. Exposed Lodging IDs, flat admin-vs-user roles, dense developer-oriented tables.
Enterprise hierarchies the data model didn't handle: brands, sub-brands, regions, front desk, tax, finance.
No documented interaction states for tables, filters, and sorts the partner surface reuses everywhere.

The risk

Supply partners churn before onboarding completes, starving the margin thesis.
Enterprise hotel groups won't sign without role granularity.
Direct-list margin expansion stalls waiting on engineering to custom-build each partner's permissions.

02 · Task

Blueprint the partner surface, not just redesign screens.

Rebuild listing CRUD and reservations, design a role-group-permission model that scales, and leave behind documented interaction states the team reuses everywhere.

03 · Action

The strategic blueprint.

Pillar A

De-risking via proxy patterns and rapid prototyping.

Enterprise RBAC is a solved problem. Proxy patterns from mature tools, tested against real hotel-group workflows in weekly prototype reviews.

What we needed	Precedent I studied	What I kept
Role & permission model	AWS IAM, Google Workspace, Shopify Plus	Role belongs to Group, Role has Permissions. Plain-English descriptions, not permission strings.
Listing CRUD	Mews, Cloudbeds, Airbnb Host	Sectioned detail view with per-section Edit, not one giant form.
Data tables & filters	Linear, Stripe, Retool	Sortable columns with explicit cycle, status chips, strikethrough for cancelled.
Destructive confirmations	Stripe, Vercel	Plain-English summary modal before the action commits.
Partner onboarding	Shopify Plus, Figma Org admin	Admin-vs-end-user wizard entry points, same flow, different scope.

Pillar B

UX and system architecture.

A roles-groups-permissions model that scales

Three atoms: Groups (brands, sub-brands, regions), Roles bundling permissions scoped to a group, Permissions as plain-English capabilities. Eight shipped in V1, extensible without touching the UI.

Roles table showing two existing roles (Front Desk, Group Admin) with Group label chips, permission chips (Payout, User), and per-row Actions menu. A New Role primary CTA sits in the top right. — Roles table, before the Tax Manager role is added. Clear columns, label-chip groups, and permission chips readable at a glance.

A two-step role wizard non-admins can actually complete

Group scope, then role name plus permission cards in plain English, with a confirmation modal that reads out what the role will do before committing.

Role wizard step one for Hopper admins, with a search field and a list of recent and all hotel partner groups to assign the role to. — Step 1, admin flow. Hopper admins can scope a new role to any hotel partner group.

Role wizard step one for end users, pre-scoped to Flamingo Hotel Group - South, with a disabled search for additional groups. — Step 1, end-user flow. Hotel partner admins get the same wizard, pre-scoped to their own group.

Role wizard step two in empty state, with Role Name field empty, 8 permission cards unchecked (Manage Groups, Manage Admins, Manage Users, Manage Roles, Manage Promotions, Manage Reservations, Read Reservations and Payment Details, Debug Details), and the Next button disabled. — Step 2, empty. Eight permission cards with plain-English descriptions. Next stays disabled until a selection is made.

Role wizard step two filled in, with Role Name set to Tax Manager and three permission cards selected (Manage Admins, Manage Users, Manage Reservations), with the Next button active. — Step 2, filled. Tax Manager scoped to three permissions. Selection state is visible, Next activates on the first valid pick.

Confirmation modal reading New role: Tax Manager, with a plain-English summary that the role can apply promotions to hotels in the user's group, add or delete admins to the user's group, and create sub-groups of properties. Primary action is Confirm; secondary is Go back. — Confirmation reads out what the role actually does, in plain English, before committing. The non-technical hotel GM leaves this screen sure of what they just created.

Roles table after Tax Manager was added, now showing three roles with a success toast reading Role successfully added. — Back on the roles table. Toast confirms the save; the new Tax Manager row with its Admin and Promotions permissions is live.

Listing CRUD a hotel GM can actually scan

Sectioned detail with per-section Edit, so a GM updates amenities without opening a form that scrolls three pages.

Listing details page for The James Hotel, with a left column of listings, Listing basics card showing Hopper App Listing, Hopper Listing ID, Location, and Status fields, Property Specifics, About this hotel, Photos (three room images with captions), All Amenities as an icon grid, Highlights, Check-in/Check-out times, Pet Policy, and Important Information. Each section has an Edit button. — Listing detail. Sectioned content with per-section Edit, so a hotel GM edits amenities without seeing the pet policy form.

A reservations table that works at 3,500+ rows

Inline filters, explicit sort state, status as color plus text, strikethrough on cancelled payouts.

Reservations table showing 3,573 rows, inline filter chips (Arriving Today, Departing Today, Upcoming, Checked In, Cancelled, Completed), columns for Room Type, Hotel, Booking date sorted descending, Checkin, Checkout, Main Guest, Hopper Reservation ID, Total Payout, and Status with chips including Checked In, Upcoming, and Cancelled. Cancelled rows have strikethrough on Total Payout. — Reservations. Inline filters, explicit sort, status as color plus text, strikethrough payouts for cancellations.

Consumer side: the Hopper Homes booking flow

Designed consumer mobile features for Hopper Homes and ran research across both consumer and partner products so the two sides stayed coherent.

Interaction states, documented

Shared sort cycle and checkbox states across every table in the partner surface, documented so no one has to guess.

Design system spec sheet showing Column Label States across seven states (Default Enabled, Hover, Selected descending, Selected Hover, Selected ascending, Selected Hover, Reverts to default) and Column Checkbox States across five states (Default Enabled, Hover, Checked, Checked Hover, Default Enabled Unchecked). — Column label and checkbox state matrix. The small design system artifact that stops interaction debt from compounding.

Pillar C

Managing ambiguity and cross-functional alignment.

Three distinct audiences, one surface

Audience	What they need	How the surface serves them
Hopper admins	Scope roles and groups across any partner	Admin wizard with cross-group browse
Hotel partner group admin	Create roles for their own staff without IT help	End-user wizard pre-scoped to their group
Front desk, tax, finance	Do their job, see only what they should	Permission-scoped views on listings and reservations

Sequence by business risk, not by screen count

Permissions shipped before promotions, because hotel groups wouldn't adopt a tool where front desk could see payouts. Everything else slotted on top.

Decide at 70 percent, revisit at 90

Shipped eight well-chosen permission types and left the UI extendable so adding a ninth is a config, not a redesign.

04 · Result

Scalable guardrails, not just screens.

Quantitative impact

8Granular permission types shipped

2-stepRole wizard replacing engineering-managed RBAC

3,500+Row reservations table, usable without filtering

8+Independently-editable listing sections

12+Documented interaction states for tables and filters

0IAM-style permission strings shown to a hotel GM

“Excellent at collaborating with engineers and delivering beautiful, thoughtful UX. She takes feedback well, delivers with high output, and leads with a hypothesis-driven approach.” Susan Ho · Hopper (now Head of New Travel Verticals, Capital One Travel)

Scalable legacy

Roles-groups-permissions model. Scales to any new permission the business invents without a redesign. Adding a ninth permission is a card, not a new UI.

Listing CRUD pattern. Sectioned detail with per-section Edit. Works for hotels today, extends to Hopper Homes and any future supply vertical.

Partner-surface interaction states. Column label and checkbox state matrices documented and shared across every table in the partner surface.

Plain-English confirmation pattern. Reused for any destructive admin action across the product.

Brand surface

The Hopper partner surface anchors on the Hopper coral mark on a near-black sidebar, with a cyan primary action across tables, forms, and modals.

Coral#F0565C

Navy#0B1222

Action Cyan#1BC5E0