Hotel check-in web app

Mobile web app for online check-in, upselling and frictionless experience in small and medium-sized hotels.

Figma prototype

KPI's

Data:

At least 11% of clients did not contract due to lack of the tool

Company:

+7% new clients due to specific functionality
Higher retention in sales calls and creation of Webinars to showcase the tool

Client:

+19% improvement in customer ratings towards the hotel
Average ticket increased between +9% and +15% thanks to upselling
Reduction of on-site waiting time by approximately 5 minutes per guest

Role:
Product designer

Team:
1 Product designer (Figma)
1 Frontend developer (Java)
1 Backend developer (PHP)
1 QA tester (Automation)

Tools:
Figma, Illustrator, Photoshop, Zeplin

Duration:
12 weeks
February - May 2024

Context and Problem

The independent and medium-sized hotel sector (80% of PMS clients) had a digital gap compared to large chains:

They did not have an online check-in prior to arrival.
Long reception queues and revenue loss due to lack of advance sales of extras.
In sales processes, the absence of this functionality meant the loss of 11% of potential clients who compared with more complete PMS.

Objective: Create a mobile-first web solution for online check-in, integrated into Avirato's SaaS PMS, that also allowed upselling (rooms, extras, premium services) and reduced friction upon arrival.

Research

Key stakeholders: owners and managers of independent hotels, sales team, PMS technical support.

Methods:

Exploratory interviews with pilot clients (n=7).
Feedback from demos in Webinars.
Quantitative data obtained directly from the central PMS (reservations, ratings, upselling, waiting times).

Findings:

Owners with few employees sought operational time savings and a tool easy to use without technical training.
Guests valued quick check-in and transparency in extra services.
Cross-selling should be clear but not intrusive.

Buyer Persona

Isabel, 44 years old

Boutique hotel owner

Hotel: 25 rooms, managed with 3 employees.
Objective: simplify processes to not depend on so much staff.
Pain points: reception queues, constant employee training, unintuitive tools.
Motivation: increase average ticket with extras (breakfasts, late check-out) without pressuring the client.
Digital behavior: uses PMS daily, mobile and laptop interchangeably, values speed and "plug & play".

Javier, 52 years old

Medium-sized beach hotel manager

Hotel: 80 rooms, 15 employees in high season.
Objective: differentiate from large chains with modern digital services.
Pain points: international guests who demand agile processes, complaints in reviews about long waits.
Motivation: show innovative image and attract repeat customers with good digital experience.
Digital behavior: open to demos and webinars, seeks scalable solutions, concerned about integration with payment systems.

Architecture & Flows

A complete user flow was designed (attached image), from the start of check-in to final confirmation:

Start check-in → Select room.
Complete data and documents → Sign digitally.
Upselling options (superior rooms, extras).
Confirm payment.
Finish check-in → Receive confirmation.

Iterations: 4 rounds of adjustments on copy, step order and upselling screens.

Wireframes and Explorations

Low-fi wireframes: exploration of 3 alternatives for step order.
Mid-fi and prototypes in Figma: tested with users.
Key decision: upselling should be shown before final confirmation, not at the beginning (improved conversion +9%).

UI & Design System

Design system created ad hoc for Avirato's SaaS.
Design tokens in Figma: typography, color, spacing and reusable components.
Accessibility: AA contrast, wide inputs, clear CTAs, "step by step" process.
UX Microcopy: direct and simple copy → "Finish check-in", "Confirm room", "Upload document".