About the project

OneCard is a Spanish-language mobile app for subscription-based hotel booking. The user signs up for an annual plan and gets access to bookings and accommodation discounts. We designed the app's key screens: the hotel page, booking payment, the bookings list and plan selection.

The challenge

A subscription service has to sell two products at once: a specific booking and the plan itself. The interface needed to make the path from the hotel page to payment as short as possible, and the subscription terms transparent, so users understand what they are paying for.

Hotel page

The page opens with a full-width photo gallery. Over the photo are a 4.9 rating, a popularity badge and a save-to-favorites button. Below are the star rating, the name, a short description with an “Expandir descripción” button, a block with the “Excelente” score and the number of reviews, and the address. The price for the selected period and the guest details (2 adults, 7 nights, VAT included) are pinned to the bottom along with the green “Reservar” button — it's always within reach, no matter how far the user scrolls.

Booking payment

The “Pago de la reserva” screen first reminds the user exactly what is being booked: the hotel, the address, check-in and check-out dates and times, and expandable details. Next come the amount due and an info block saying the confirmation will arrive right after payment. Above the card form, the available payment methods are shown — Apple Pay, Google Pay, Visa, Mastercard, PayPal — and the card number field has a camera icon for scanning. At the bottom are consents for newsletters and data processing, and a button with the total amount, “Pagar 200€”.

My bookings

Completed bookings are collected in the “Mis reservas” tab. Each booking is a card in the same visual language as the hotel page: photo, rating, name, address, check-in and check-out dates, expandable details and the total cost. The user doesn't need to dig for a confirmation in their inbox — everything is in one place.

Subscription

Plans are shown as cards with a list of features. “Élite” is highlighted in green: unlimited bookings, discounts on hotels, cruises and flights, exclusive deals and priority support — €99 per year. “Explorador” is a simpler plan: one booking per month, hotel discounts and standard support for €49 per year. After sign-up, a notification about plan activation with the subscription end date appears over the screen.

Result

We designed a dark, restrained interface with a single green accent color that guides the user through the key actions: book, pay, subscribe. The path from the hotel page to a paid booking fits into two screens, and plans can be compared at a glance.