TUI Highlights
Highlights is one of the key pages in the TUI app. It’s a place where TUI surfaces information to users at relevant times about their holiday. It also is a place for promotions and up-selling extra products. It is comprised of cards in a list format.
The original highlights UI was described by some key stakeholders as looking more like an accounting app than a holiday app. The challenge was to take the original UI and create more of a desirable holiday feeling and excitement about the customer’s upcoming holiday.
Updating Highlights UI.
From user research and app store reviews we knew that the holiday countdown was very important to our customers. We wanted to create excitement by making more of a feature of the countdown. This meant doing competitor analysis to see how other countdowns are displayed and trying out lots of different options to get feedback on.
We brought the feeling of going on holiday more to life by removing the countdown from the one static card and making it the background for the whole screen.
We looked into animation and focused on an old fashioned countdown style, which is very similar to old flight departure boards. This was to help garner a feeling of nostalgia about holidays and excitement for a user’s upcoming holiday.
We made sure that users could share their countdown on social media, as in our research we found many wanted the ability to share their excitement with their friends and family.
Highlights live TUI German app video.
This is a quick clip of the live TUI German app Highlights screen in full action. This shows the flipping countdown animation and also the transition of the screen when you begin to scroll. We worked closely as a team to get a frosting effect that helps the cards stand out once the user begins to explore the screen after the countdown.
Examples of different upcoming holiday bookings.
Introducing new home cards.
We were tasked to introduce new styles of cards for the highlights screen as the current card design meant we could only show limited information. We investigated different ways we could display information on a card.
Home card templates.
Each home card had a template created to show how it could flex and change depending on different information. These templates were handed over to the developers to help aid development.
Highlights home card evolution.
The 3 images below highlight the evolution of home cards. The first 2 screens show the content displayed within the current card templates. The last screen shows how the new home card templates will help to break up the content and display it in new ways to engage the user.