The conceptualization and implementation of the book and checkout workflows in the Casai app.
Role:
UI/UX Designer
Industry:
Hospitality
Duration:
8 weeks
Introduction
Casai is a company that focuses on providing their guests the best customizable experience for short to mid-term stays. By owning all the apartments and designing them with different styles based on city lifestyles, Casai aims to create a digital-first experience for users from booking through check-in and check-out.
Project Context
Casai developed a mobile app to enhance convenience for their hosts after booking. Initially, the decision was made not to include search and checkout features in the app. However, after the app was launched, Casai discovered that almost 90% of their guests were actively downloading it. This insight led them to realize that integrating checkout features into the app could significantly improve the user experience by making the app the primary touchpoint for guests from their initial contact through to the booking process.
Success Metrics
In the first quarter after the launch, 30% of users utilized the app end-to-end, from searching for a place to stay to managing their bookings.
Project Specifications
Create a checkout experience on the app, focusing on:
1. Quick and simple way to pay for a booking.
2. Simple way to manage your payments.
3. Useful and enjoyable way to pay for extra services.
User Stories
As a user:
1. I want to pay for my booking using different payment methods.
2. I want to manage my payment methods.
3. I want to pay for extra services now and later.
01 - Discover
[inside the app] Users cannot perform both search and reservation in the app; they are redirected to the website for the booking process.
[during checkout on web] They are informed that they will not be charged during the redirection but are not notified when the actual charge will occur.
[during checkout on web] The only available payment method is credit cards. Additionally, there is no option to add extra services; this can only be arranged with the concierge after booking.
User Testing
01 - Check-in & Check-out requests: The possibility of changing the check-out was really good. However they could not find where and how to request this change as an extra service.
02 - Language: Some pages of the app are not translated [as default we should have three options: English, Spanish and Portuguese, for all pages], but in some specific pages, the translation did not work or didn’t keep the prior selected language.
03 - Currency:
If they don't change the currency before choosing their property, they need to go back and change it or move to the payment and change on the menu.
On the Product Page > The user can change the currency on the menu, when they looking for a specific property > On the Resume Page > The user can’t change the currency but wants to because it is where he sees the final value of the booking and decides if wants to make any changes > On the Checkout Page > The user can’t change the currency but wants to because it is where he sees the final value of the booking and decides if wants to make any changes
02 - Define
Problem Hypotheses
After analyzing the research, we created a CSD Matrix to better understand the information we had, classify it, and develop hypotheses.
01 - If the booking process becomes simpler within the app and provides more information about the checkout process, users will gain more confidence and complete their bookings faster.
02 - Offering extra options and new payment methods during the reservation process can help make users “fall in love” with the app and complete their bookings.
03 - Allowing users the flexibility to change extra items and payment methods in the app, even after their booking is confirmed, will set Casai apart from competitors.
First image - What was working in the process in green and what we could add in purple.
Second image - New user flow following the new proposal.
03 - Development
Book Manager
The first step in the checkout process after finding and selecting a stay is the booking manager. Here, users will decide their dates, number of guests, currency, and extra services.
They will also see all fees and the total cost of the selected services, displayed in their chosen currency.
Our main goal was to make very customizable, with real time results, so the guests could select what they want and see the final price, but at the same time be able to make changes if they want, until they decided with what options they want to follow with.
Confirm & Pay
To streamline the process and keep it efficient, the second step is “Confirm & Pay.” In this step, the guest can choose their preferred payment method while still seeing a summary of their booking at the top.
Pay Now - they will be charged immediately, as indicated in the description below the toggle. Users can select from different payment methods at this time and can either save existing cards or add a new one.
Pay at Check-In - they will be charged only after completing the check-in process. This option allows users to change the credit card to be charged up to 72 hours after check-in.
Manage
The summary screen serves as the feedback screen, allowing users to confirm that everything is functioning correctly and providing important links for the next steps.
Results
As expected, the adoption of the in-app checkout feature was a success. During the quarter following the launch, 48% of users who started a search completed their booking through the app.
Further improvements
After the launch, we took time to gather user feedback and create minor tickets to improve the user journey. We also redesigned the final step, the Manage screen, making it more useful for users by adding additional information and redirecting them to the “My Account” section to view and manage all their bookings.