Spread over three pages
Integrations were all set up in a different part of the product, without clear reasoning or guidance on where to find them.
Helping hotels connect their software without calling support
Before a hotel can use the platform, it has to connect the external softwares it uses. We designed that setup so hotel staff can do it on their own, in one place, and always know what's happening.
The problem
Connecting each integration happened in a different part of the product, and no one knew where to find them. Every integration asked for different details, and nobody could tell what was going on. So hotels kept contacting support.
What we designed
One Integrations page for everything. Each integration has its own section and flow with a clear status that says what's happening and who needs to act next.
Why it works
The same page template and the same four statuses work for all 150+ integrations, so adding a new integration doesn't need a new design every time, and each one has a familiar, unified experience.
1Context
What hotels have to set up
The platform helps hotels with check-in, guest messaging and more. To do that, it needs data from the hotel's other software. Each connection to another system is called an integration.
- Booking system
- Where reservations, rooms and rates live. Also called a PMS.
- Payments
- Card payments and charges.
- Point of sale
- Tills in the hotel's restaurant and bar.
- Messaging
- Channels like WhatsApp and booking sites.
- Door keys
- Digital room keys.
150+Integrations a hotel can connect
5Kinds of integration, from booking to door keys
3Different places in the product to set them up
What staff need
- Know what to do
- Know where to go
- Finish without help
- Fix problems themselves
2The problem
Why setup was hard
Our research found that hotels often needed a support person to finish setup because of four main blockers:
Different details for every integration
Codes, IDs and keys, with instructions that lived outside the product. Staff had to hunt for them.
No way to tell what's happening
Every connection just said "active". You couldn't tell if it was done, waiting or broken.
Long waits with no updates
Some integrations need approval from another company. That can take days, and staff saw nothing but a spinner.
3The hardest part
Waiting on someone else
Some connections work in one click. Others need several people to act, one after another. When nothing says whose turn it is, staff assume it's stuck and contact support.
Who's involved
- YouEnter the details and give access
- The other companyReviews and approves, in its own system
- The platformSwitches it on and checks it works
A universal design that covers any pace
InstantStripe, Cloudbeds, MewsSign in, done
Needs approvalOpera, InforSeveral steps, can take days
The design had to feel effortless for the fast ones and stay clear and calm for the slow ones.
4The approach
One page that works for every integration, instead of a new design for each one.
We tried five layouts. The hub won because it's the only one that puts every integration's status in one list. We kept the best parts of two others.
5How it works
Four simple rules
One page per connection
Setting up, waiting, working or broken, it's always the same page. Only the message at the top changes.
Every status says who acts next
You, the other company or the platform. No guessing.
The form fits the integration
Some integrations need a sign-in, others a code or a few details. Setup shows only what that integration needs.
Hotel groups use the same pages
A group can see all its hotels at once, or pick one hotel.
6Statuses
Four statuses, always clear
Different statuses depending on the stage of the setup.
Why two "your turn" statuses
Action needed means you haven't finished setting up. Fix required means something that was working has broken. Keeping them apart tells staff which situation they're in from the label alone.
7Key decisions
Two choices that keep it simple
Waiting
No separate "waiting" screen
Waiting, working and broken are all statuses of the same integration, so they belong on the same page. Staff can leave and come back, and they're told when it's live.
First ideaA waiting screen and a separate working screen, for every integration.
Final designOne page, with a message at the top that changes.
Hotel groups
Groups and single hotels share one design
Many customers run several hotels. A switcher at the top shows all of them at once, or one hotel on its own. One hotel looks exactly like a standalone hotel's page.
Left out for nowSetting up one integration for every hotel at once. Useful but risky, so it needs real data from hotel groups first.
Final designSwitch between all hotels and one hotel, on the same pages.
8Walkthrough
Step by step: connecting a booking system
Opera Cloud is a popular hotel booking system, and one of the hardest to connect. It needs several details, a step in Oracle's own system, and an approval wait.
9Outcome
Measuring impact
Each change ships with a clear metric, so the model can be proven before it's extended.
- Time to go liveHow long it takes from first visit to connected, for instant and approval-based integrations.
- Support requests during setupHow many each new hotel sends, and how many ask "what's happening?"
- Problems fixed without supportHow often staff clear a Fix required status with Retry or Reconnect.
- How hotel groups set upReal data from groups, before designing setup for many hotels at once.