Customizable Hotel Booking Widget
Industry Context
Consumer expectations around services and experiences are at an all-time high. In a post-pandemic, tech-accelerated world, consumers demand immediacy and precision in the fulfillment of their requests.
The hotel industry’s evolution of the guest experience has been encumbered by expensive, legacy software its dependent upon to manage reservations and property operations (i.e. Synxis, Oracle).
Skipper is a reservation and payment processing alternative that allows guests to book directly through a hotel’s website.
Challenge
Though the feature set for Skipper’s MVP was minimal —
1. Reservation Creation and 2. Payment Processing — our team’s underlying existential challenge (as a pre-series A start-up) impacted our product strategy:
With limited time and resources to prove out product-market fit, we needed a design approach that would be a low-lift for developers, while still offering enough product differentiation to appeal to hotels seeking a booking alternative.
Design Strategy Highlights
1. Design Consolidation
We utilized a drawer element on desktop as a way to leverage one design across mobile and desktop interfaces (with a prioritization of mobile UI since that was our largest share of users)
2. Information & Content Hierarchy
In addition to organizing the various types of information we received from the hotel’s CRS systems, we sought to understand key drivers that contributed to a potential guest completing a hotel reservation. What do potential guests want to see (or what should they see) to increase the likelihood of booking their stay?
In response to this question we created a simplified booking flow with a greater emphasis on the hotel imagery. We relegated long descriptions and policy details to linked overlays, to reduce the amount of content a user would have to digest on any given step of the booking process. (As an added benefit, it minimized our need to build more complex drawer or accordion components, which was a welcome scope reduction for our small team).
3. Flexible Design System
With brand customization being a core aspect of our product’s differentiation, we needed to be extremely intentional with the building of our design system so that we could support this type of feature at scale.
We determined the minimum set of variables that would allow us to convincingly approximate a brand’s visual aesthetic. (Color & Font Type).
We then identified the minimum set of components that would be required to complete a reservation flow (i.e. headers, footers, overlays, buttons, containers, modals, etc).
From these requirements, we built a compact design system that named the fixed and customizable UI variables for all components. A hotel brand would simply need to provide their brand color, a primary and secondary font type — to achieve an almost instantaneous transformation of our booking widget.
Improvements
-
Iterating on the sequence of a traditional “booking flow” — or abandoning it altogether — could create more opportunities for engagement (read: transactions) with potential guests. Hotel sites could better leverage the “non-linear” experience of e-commerce sites which place an emphasis on imagery, up-selling, and optionality to build user interest.
-
Build out booking experience and customizable design system for Desktop screens.