UX Design

A mobile-first redesign of a digital guestbook for hotel guests

Lead Designer
2021 - 5 Months
Responsive Design
UI Design


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.

Editor for Hotels to make a mobile-first ‘Guestbook’ for Guests

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…

Voucher Card

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.

Digital Room-service

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.

Hotel Information

In the guestbook, guests can find all the information from the hotel, like check-out times, information about the area, events etc.

Image Carousels

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.

Quick Navigation

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.

Interactive Clickable Prototypes in Figma

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.

Design Process

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.

1. Scoping + Setting Requirements

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.

2. Customer Journey

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.

3. Sitemap with hierarchy and navigation

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.

4. UX Flow

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.

Parallel 'Design System' Project

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

5. Responsive Designs

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.

6. System for Mobile Cards

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.

7. Usertesting with Maze

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.

8. Final UI Design

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.

9. Interactive Prototypes

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.

10. Development Handoff

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.

“Pieter set the visual direction of the product to a next level  so it’s ready for scaling up and adding new features!”

Christian Markedal

CEO, DigitalGuest

Explore Other Work

A selection of Service Design, UX and UI projects.

A mobile-first redesign of a digital guestbook for hotel guests

Responsive Design
UI Design
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.
View Case

Prototyping for a personalized Volvo car-sharing service

Service Design
Personalized Prototyping
Academic Research
Through 4 rounds of prototyping and testing, a new car-sharing service was developed with Volvo. The focus was on personalization and resulted in integrating existing mobility services.
View Case

Harnessing the power of IoT in the marine industry

Digital Prototyping
UI Design
Using sensor data enables a range of new possibilities. One of them is this IoT dashboard to track and tune engine perfomance of big container ships.
View Case

Establishing a flexible design system

Design System
UI Design
A crowded user interface needed a new approach to be more aligned, better looking and ready for scaling up with new features in the future.
View Case

Visualizing Italian elections through social media activity

Visual Identity
Data Visualization
Responsive Design
Is it possible to predict the results of a political election by analyzing posts on social media? I helped visualizing an innovative research that examines the relationship between Twitter activity and election results in an Italian region.
View Case

Branding a freshly founded design studio

Visual Identity
Brand Design
Responsive Development
Logic Moon is a design studio of which I’m a founding partner. This project focuses on the branding and building of the company’s visual identity.
View Case

Digital prototyping for a financial Robo-Advisor

Design Sprint Facilitation
During my employment at Nordea Bank I was involved in several projects, of which one was prototyping parts of their Robo-Advisor called ‘Nora’.
View Case

Interactive storytelling on cultural diversity

Workshop Facilitation
Interaction Design
How is migration in Italy’s most culturally diverse city perceived by the youth who grows up there? Youth in the City results in an interactive story after a co-creative workshop with 48 local high school students.
View Case