01 · blueground partner portal

A partner portal, designed from a blank page

Property partners run a real business through Blueground: listings, availability, bookings, payouts. I designed the platform they do it on from scratch, from the information architecture down to the last table state.

role
Design lead, hands-on. All core product and UI decisions
scope
IA, navigation, dashboard, listings, bookings, settings
system
shadcn/ui, rebranded with Blueground tokens
stack
Next.js, React, Tailwind
Listings table Listing detail panel open beside the table
the core ideaOpen any listing without leaving the list
detailStep through listings: 12 of 30
the problem

Partners are operators, not consumers

Blueground's partner network was growing, and partners were running dozens of listings through tooling that wasn't built for them. Key information about a listing or a booking was scattered, hard to find, or missing entirely.

Treating partners as operators and suppliers changed the brief. They don't need delight first; they need density, speed, confidence in the numbers, and a clear signal when something needs their attention.

key decision

Build on shadcn, make it ours

Instead of extending a legacy UI, I chose to start the portal on shadcn/ui: accessible, composable primitives that engineering could own in code. Then I branded it with our own typography, colour and component styling so it felt unmistakably Blueground.

That let a small team move fast without forking a design system, and gave us a foundation we could extend screen by screen.

Availability calendar with bookings, rates and discounts inline Channel integration card with toggle
same primitivesCalendar, cards and toggles are shadcn components with our type, colour and radius
densityRates, bookings and discounts in one calendar view
structure

Navigation that scales with the business

I started with the IA. I mapped every job a partner does, then designed a sidebar, breadcrumbs and scroll behaviour so the navigation that works for five listings still works for five hundred. Scroll through the exploration:

Navigation exploration board
1 / 4scroll ↓

interaction model

Stay in the list, go deep in the panel

Partners work across many listings at once. So instead of sending them to a new page for every record, a side panel opens next to the table. They can scan, open and step through listings without losing their place, and expand to a full page when they need room.

Listings table with detail panel
1 / 4scroll ↓

trust in the numbers

A booking page that explains every euro

The most common partner questions were about money: what was charged, what Blueground keeps, and when they get paid. The booking page answers all three in one read.

Line-by-line payment breakdown ending in total payout value Payout schedule with status per instalment Version history of the booking
1 · what was chargedFrom accommodation price to total payout value, line by line
2 · when I get paidEvery instalment with its date and status
3 · what changedEach edit to a booking is versioned
getting buy-in

Selling the redesign internally

A redesign of a revenue-critical tool needs more than a Figma link. I produced a short motion walkthrough for stakeholders across the business that tells the story in six chapters, from navigation to settings, and closes with what comes next.

The 2.5-minute stakeholder walkthrough I designed and produced.
where it's going

A foundation, not a finish line

The portal now carries the roadmap: partner-facing engagement metrics on the dashboard, bulk actions and status insights for large portfolios, and migrating all partners from Nestpick into one platform.

To add: adoption / support-ticket / partner NPS outcomes