interactive tour guide

To win loyal customers, a company should think of something special to give back to them. Combining a niche aspect of a company with an interactive experience can change the way the customers feel about a company forever.

the project

This was a group project in the third semester. I planned and implemented the landing page, the tour detail page and the tour history page. Additionally, I came up with the style guide for the entire page, which defined color schemes, typeface and interaction elements.
We started of with research about competition in the tour guide field, proposed ideas for an innovative alternative and finally turned the prototype into reality.

Our group focused on a company that offers their boulder-halls to their customers. So we came up with an interactive website that small groups could use dynamically to get to know the city, whilest gathering cultural information as well as new spots for their favorite hobby.
A tour is usually done on a mobile device, that is why we prepared the tour view itself to be optimised for smartphones, but it also works on tablets. Desktops will automatically display a cutout of a smartphone.

the result

Landing page

The landing page shows short overviews of the tours. A caroussel on the right will slowly go through multiple tours until in the end the customer is asked if they want to refer to the tour finder to get more suitable suggestions.


The tour finder asks the customer a couple of questions. Once answered, the tour suggestions on the landing page will refresh and hopefully a tour will be purchased.

Tour detail-view

When the customer selects a tour from the landing page by clicking on the button labeled Details, they will be redirected to this similar looking page. It displays more information about the selected tour, paired with more images to get an impression. The button labeled Buchen will lead to the booking process.

User area

When clicking on the user-image in the top-right corner, the customer will be redirected to this area. Personal information can be updated here. There are also links to different community areas. Finally there is a button to reach the previously purchased tours, which will remain in the account. This area is also the tour-history, where the pictures and other memories of this tour will be.


This page is one of the few that is scrollable. This top area shows a selection of all owned tours.

Scrolling reveales the memories. They are structured in tour stops.

Active Tour

Here are all of the different tour views. They range from challenges, over a map view, to information cards.

The action menu

This is the navigation during an active tour. It leads back to the home page, as well as to other aspects of the experience.

Tour stop and information

Every tour stop has an overview with a short explanation of the sight.

If interested, the stop can inform about different aspects of the sight. A drop-down menu helps to navigate through the sight's topics. Additionaly the topics can be read out loud via the listening-icon.

Active map using mapbox

Using a plug-in called mapbox, we were able to use real tracking data provided by the device's GPS to display the current position on the map.


The end of a tour

This screen marks the end of a tour. By tapping anywhere on the screen, the customer will return to the home page.


Dieses Projekt ist im Wintesemester 2020/2021 im Studiengang Digital Media im Fach Interaction Design an der Technischen Hochschule Ulm entstanden.
Projektinitiator, Projektleiter und fachlicher Betreuer: Prof. Damian Gerbaulet.
Autoren und inhaltlich Verantwortliche: Delix Dedek, Marc Fischer, Markus Leukel, Kasimir Polivka.
Das Projekt ist urheberrechtlich gesch├╝tzt. Alle Rechte liegen bei dem Autor bzw. bei der Technischen Hochschule Ulm.