The idealo travel app had took on many new features since it’s establishment in 2009 and grown into a powerful travel companion for comparing the prices of flights and hotels all in one app.
Below are screens of the current app in light mode
Start
Search
Below are screens of the current app in dark mode
Start
Search
The app had developed without a consistent and effective design system in both iOS and Android. This became particularly evident with the introduction of ‘Dark Mode’ where the colour selection for the different surfaces were just plain false and desperately needed attention.
The idealo shopping department had already began to utilise a very effective design system that included theme aware colours which already contain their dark mode counterpart when switched in Figma. We wanted to use solely these library colours so that we could bridge the gap between our travel app and the shopping app.
An example of a theme aware colour from the idealo shopping design system
I along with the app product owner, agreed that we need to create a vision for how we can adapt the main app user flow from start page to search page so that it fully uses the shopping colour library along with a defined set of text styles, fitting to the iOS (San Francisco) and Android (Roboto) framework accordingly.
With this vision of a consistent product across android and iOS, integrating theme aware colours, we could cut the project down into much more manageable smaller chunks that could be implemented step-by-step into the current app.
I was the sole UX designer working with a product owner and a team of 3 developers from the app team. I had many exchanges with idealo shopping’s app UX team to ensure that I correctly utilised their design system before communicating it to our developers in the travel team and the product owner.
