TUI mobile app home screen


The goal is to improve the user experience having more dynamic elements.
The User should be able to find everything he needs here, his travel documents, information about the journey, the hotel booked and many other features; but while using the app the User should also feel super excited about the upcoming holiday!

Home screen: Countdown


The app doesn’t currently have much design interaction and dynamic content, except for the “Countdown card” in the home screen.

From the User testing sessions emerged that this feature is particularly loved by Users and they are happy that it is immediately at the top when loading their booking.

Although the current countdown includes “Seconds” and sometimes it gets stuck or does not work properly.

Due to its importance for the User we thought that the countdown should be more prominent and why not also include a welcome message in proper TUI style to reinforce the branding.


Countdown interaction


The first step is making the current one a little bit more dynamic without changing too much the screen layout.


This will leave much more space to the image, also it will not need the colour overlay.
The countdown is just below and the share button sits in the middle to allow the User to share the whole content (image and countdown).

By tapping the Card the image will expand throughout the screen and the countdown will appear at the bottom of the screen.
Tapping the back arrow the countdown and the share button will dissolve, the image will shrink down back into the card.

Home screen tryouts

The current countdown includes “Seconds” and sometimes it gets stuck or does not work properly.

Due to its importance we thought that the countdown should be more prominent and why not also include a welcome message in proper TUI style to reinforce the branding.

Cinemagraph

We created a layout where the Welcome message, according to the brand guidelines, sits at the top, leave a bit of space in the centre to make the background image stand out and placed the countdown right in the middle of the screen excluding the
“seconds”.

You can still see the cards below so it is pretty clear that scrolling down you will access further content.

The first visual effect I wanted to experiment is the Cinemagraph, consisting in one or multiple image subtly moving/sliding/fading so that the image is king but does not distract too much from the content.

Countdown animation

The background image along the whole screen might be a issue especially when scrolling down the cards appear and the User should be focused on the cards’ content.

Also the “countdown” might not be visibly clear depending on the background image (eg. white text on light blue sky) and also using shadows and overlays might not work all the times.

This thoughts lead me to split the home screen in 2 parts, respectively emotional on the top (warm welcome message and dreamy landscape) and informational below.

To keep the Countdown linked to the main image I decided to use a graphic animation that slowly floats and kind of unify them.
In this case when scrolling down the image will disappear at the top and the user can fully focus on the content.

Header effects


Quite a few screens throughout the app have a header image followed by content, the fixed header sits on top of the image.


This interaction allows the image to take over the top of the screen and only the “back arrow” remains visible, while on scroll the header will appear and then disappear when scrolling back to the top.


Content hierarchy


While redesigning the home screen we realised that the content is often not relevant for the user. In fact there’s no point showing “flight check in” when it is not available yet or “weather” if you are still far away from the departure day.

This is a content hierarchy scheme referring to 6 different scenarios.


There isn’t yet a way to “control” those cards, for this reason would be a safer option to create a “Climate Card” which simply reports information about the general climate of the location at the time of the year the User is going.

Climate cards


Current weekly and daily weather cards

Rethinking Weather Cards: Climate Card

The Climate card shows general information about the weather conditions in a certain time of the year, when the user is going on holiday.
It’s a quick way to display all in one go on the home screen further details such as water temperature, precipitations and wind speed.

This is very useful especially if the user check the app way before the departure date.


You are on holiday! Back to daily forecast


Current Weather card redesign

In case there’s no chance to implement the “Climate Card” idea I designed a new concept for the current weather card, introducing visual elements related to the holiday destination.