I helped a booming startup in the hotel industry switch to a mobile-first approach of their product. Check how hotels can make custom mobile apps for their guests.
DigitalGuest enhances hotel-guest journeys and needed a total redesign of their product. They sell software to hotels, who can build custom web-apps (known as “Digital Guestbooks”) for their guests. The old design was focused on desktop, but it was clear that hotel guests only viewed the ‘Guestbook’ on their phones; so I pushed for a new version of the product focused on mobile. The challenge was to constrain the hotels in a way that the app always looks nice, while still giving them freedom to customise.
The outcome is a (desktop) editor for hotels – in which they can build a customized web-app (mobile) for their guests. Every hotel can make a custom looking app that fits their own visual style.
This is the desktop editor in which hotels can build their own app for their guests. We call it a ‘digital guestbook’, but as you can see in the following designs, it can do much more than just a guestbook…
.png)
.png)
On the left you can find the old design when I started working at DigitalGuest. After a few months of setting up a design systems and applying it to the old design, you can see the outcomes of the new design on the right.
One of the features that Hotels can offer, is a voucher for their guests. They can specify what the voucher contains and how it looks. Guests can redeem the voucher by swiping it in front of bar of restaurant personnel.
Another feature is ‘digital room-service’, which allows guests to order whatever they like from their phone. Think about lunch being ready in your room right before you arrive, or a late-night snack when you are too tired to go to a store.
In the guestbook, guests can find all the information from the hotel, like check-out times, information about the area, events etc.
Many hotels have beautiful interior or nature around they want to show in their app. With carousels, they can show any kind of image that fits their visual brand and style.
Another feature is the quick navigation, which allows guests to quickly access certain handy features; like calling the taxi service or checking the weather on the location of the hotel.
To show all these features in the highest level of fidelity, several clickable prototypes were made that helped in communicating the features to stakeholders and developers.
My role in this design process was the UX/UI designer. I led the design, from structuring the information architecture, improving the user flow to the final user interface design. Below is an overview of the steps that I was responsible for in the process; after that, the developers took over to realize the designs in code.
The project consisted of two different software: a desktop ‘Editor’ for hotels, in which they can make a mobile ‘Guestbook’ for their guests. Both the hotels and guests have different jobs to be done, needs and goals that need to be taken into consideration.
After scoping the project, I often start with a Customer Journey to understand the chronological steps a user might go through. Starting like this helps to empathize with the user and staying focused on their needs. This customer journey is zoomed-in on the phase where a hotel starts with ‘building’ – part of making a guestbook. The initial payment and sign-up are already handled beforehand.
Making a sitemap with the different screens and menu items helps to understand the flow of the application. It also helps to check if the hierarchy of the menu items makes sense, if the features are grouped properly and are easy to navigate through.
Drafting a UX Flow helps to show the different states of certain features and different routes a user can take to go through the application.
Alongside the redesign of the platform, we decided to build a Design System that would align the visual quality and speed up thedevelopment process for the future. As this is a parallel project, I present the steps in this process separately.
View Project
As we just finished a design system, there was no benefit to start designing with wireframes; it would take more time to start with wireframes and converting them to real UI components than just starting with the UI components immediately.
The old design was made for guests to view on a desktop, while the new design should be mainly for mobile. In this stage, the challenge was to design for mobile-first, while also keeping a relatively good view experience for desktop.
The existing design system was built for the hotel’s ‘desktop editor’, so the design system needed to be tweaked to be usable on mobile devices as well. This led to a ‘sub – design system’ for the mobile-first guest’s app.
It was difficult to get feedback from our customers as they are often big hotel chains. Therefore, we used a user testing tool called Maze to build different user tests that helped to get quick feedback from our internal team of 13 people. Although this is not an ideal situation, as we would prefer to get feedback from our actual users, this feedback did help to test the usability of the new features to a certain extend.
The final UI design is a desktop editor for hotels that enables them to make mobile web-apps for guests. Below are several screenshots of what different features could look like. Note that hotels are able to customize and tweak the appearance of most elements, so this is an example of what a potential design would look like if the hotel chooses to use the same images, colors and fonts.
To communicate the final designs with stakeholders and developers, several interactive prototypes were built in Figma. This helped to communicate the flow of several features and the micro-interactions that are not visible in static designs exports.
Although a developer was present in a weekly update meeting to discuss the technical validity of the designs, I left extensive developer notes to help him during the development process. Each component contained each own “Devnote”, with a description of the design.
A selection of Service Design, UX and UI projects.
