UX & UI Case Study · Hotel Calm
Returning to an early project with more experience to make it stronger, and more honest.
Hotel Calm is a design-conscious boutique hotel chain with locations across Europe: Stockholm, Athens, Barcelona, Lisbon, Marseille and Paris. The mobile app is the primary booking channel for guests who already know the brand.
This case study is a return. When I first designed Hotel Calm, I was early in my UX education, focused on visual structure and getting a complete flow in place. I produced both a UX version (research, flows, wireframes) and a UI version (design system, screens, prototype).
Looking back now, I can see that the thinking was surface-level. The research was thin, the copy was placeholder, and the design decisions weren't clearly connected to real user problems. Returning to this project with more experience, I wanted to do it properly. Originally designed in 2023 during the UX Design Institute course, revisited in 2026.
The original UX process, as I did it the first time.
A
Usability tests with six users across two existing hotel booking sites, three users per site, plus benchmarking of Airbnb, Trivago, Agoda, Kayak, Design Hotels and others. Key finding: bookings are driven by preset dates and destinations, but calendar experiences vary widely.
TWO BOOKING SITES, A HANDFUL OF USERS, SIX SESSIONS LOGGED
B
Feedback clustered into filter, calendar, info & rating, pictures, map, add-ons and booking. The clearest signals: users missed the breakfast option, lacked room information and wanted to double-check the total before paying.
THIS IS WHERE THE BREAKFAST PROBLEM FIRST APPEARS
C
Seven stages from Ready to Booking. Confidence dropped during search and filtering, then rose sharply once users saw strong imagery.
CONFIDENCE DROPS HERE, DURING SEARCH AND FILTERING
D
The happy path for two guests booking a room with breakfast, in three stages: search, room and add-ons, checkout.
NINE STEPS FROM START SCREEN TO CONFIRMATION
STAGE 1Location, dates, guests
STAGE 2Room and add-ons
STAGE 3Checkout and confirmation
KEY · ROUNDED RECTANGLE = SCREEN · CIRCLE = USER INTERACTION
E
Start screen, location picker, content pages and the booking flow, connected as a clickable prototype.
THE FULL FLOW, CONNECTED AS A CLICKABLE PROTOTYPE
Colour
A warm, muted palette inspired by Field Notes notebooks. Tactile and editorial, it allows imagery to remain the primary focus.
Black
#121212
Dark brown
#442211
Beige
#DCD6C5
Light beige
#E8E6DB
Dark yellow
#B58C24
Yellow
#E9B420
Red
#9B2B15
Light red
#DC6243
Gray
#D5D5D5
White
#FFFFFF
Typography
Inter. Minimalistic, clean, and works at display sizes. Often centered and placed directly on imagery, creating a strong visual connection without compromising clarity.
Photography
Front-facing perspective, centered composition, warm colour treatment. Images shape the overall tone of the app and inspire users.
The idea of a persistent, real-time confirmation panel is genuinely strong. It addresses a real problem: users losing track of their choices mid-flow. The weakness was in the execution. The panel confirmed location, dates and guests, but not the room or the total price.
The original research had already found most of these problems. The first design noticed them, but didn't fully solve them.
Same segment · Boutique, multi-city
Brand-first approach
Aggregator · The opposite of boutique
"Shoebox" communicates size, feel and use in one word. "Small room" communicates nothing.
Showing the total cost including tax eliminates the most common moment of doubt before payment.
"Step 2 of 3" is one line of text that removes uncertainty at exactly the moment it matters most.
A price and a sentence change the decision. "Breakfast · served 7 to 10am · €15/night" is a different offer than a plain dropdown.
Five design decisions, each traced back to what the original research found.
01
"User lacking information on the different room options, despite different pricing"
New names (The Calm, The Still, The Suite), a spec row with icons (size, bed type, capacity), a short description with a "See more" expand, and the price below the image, per night including tax.
02
"User wants to double check the total booking before final purchase"
Shows hotel, dates, nights, guests, room name, add-ons with prices and a running total, updating in real time from the moment a room is selected. Prices are shown in euros in the redesign, since Hotel Calm operates across six European cities.
03
"User misses to book breakfast, did not see call to action button"
After room selection: Breakfast €15/night, Laundry €20, Wake-up service complimentary. Each comes with a price and a description. This adds a step to the flow. The original research showed users missing breakfast entirely, so a step that gets noticed is worth more than a step saved.
04
Three steps: 1 Payment method · 2 Your details · 3 Confirm.
FROM AFFINITY DIAGRAM: "Too many or too detailed choices at the last part of booking journey"
05
"Welcome, Oliver. See you soon!" together with a full Your Stay summary and email confirmation.
Self-initiated project without live data. This is what I would track.
Booking completion rate
A clearer flow and progress indicator reduce abandonment.
Drop-off in checkout
A persistent Your Stay summary reduces doubt before payment.
Error rate
Clearer room info and CTA hierarchy reduce wrong choices.
Add-on adoption rate
Contextual presentation with price and description increases selection.
The complete redesigned booking flow is available as an interactive Figma prototype, from start screen to booking confirmation.
OPEN PROTOTYPE →The first version of Hotel Calm was designed from the outside in. I started with how it should look, then filled in the flow. Revisiting it showed me that the order should be reversed: understand the problem, decide what the user needs to know at each step, and let the visual design support that.
Three lessons stand out.
Copy is part of the design. "Small room / info" wasn't a placeholder problem, it was a thinking problem. Writing real room names and descriptions forced me to decide what actually matters to a guest.
Good ideas need complete execution. The confirmation panel was the strongest idea in the original, but it only confirmed half the booking. An idea that's 70% implemented can create more doubt than no idea at all.
Competitors are a design resource, not just a benchmark. The Hoxton showed me what good looks like in the same segment. Booking.com showed me what to avoid. Both were equally useful.