Guiding users through their global travels with the contextual itinerary card.
Kiwi.com offers their users unique itineraries, mixing different airlines, train-, and bus providers to get them from A to B. Kiwi’s ‘travel hacks’ helps them find the best and cheapest itineraries, but these complex itineraries can also cause complexities during travel.
With the ‘Contextual Itinerary Card’ feature, we aimed to give our users step by step guidance throughout every step of their global journey, so they could reach their destinations with confidence and peace of mind.
With the ‘Contextual Itinerary Card’ feature, we aimed to give our users step by step guidance throughout every step of their global journey, so they could reach their destinations with confidence and peace of mind.
Mapping the customer journey
After we created the concept and the first sketches of the design were there, we had to think about which information to display to the user and in which point in time to do so. To decide this, I organised a workshop with the team in which we collaboratively mapped ideas (what to show), to the the customer journey (when to show it). The workshop brought us some valuable ideas, which directly correlated with the pain points we mapped before the workshop. It also lead to us to having alignment across the team: everybody now knew the problems we were trying to solve, and gave input from their unique viewpoint on how to solve these problems.
Designing the user interface
With the concept and the input from the workshop in mind, I created the first designs. After multiple iterations and feedback rounds, we’ve ended up on a ‘drawer’ that’s always present, but never blocks the screen, making the most essential information not more than a tap or swipe away.
The contents of the drawer is constantly adapted to the situation of the user. Is (s)he about to check-in at the airport? Here’s the boarding pass. Is (s)he just leaving the house? Here’s a here are the directions to the train station you’re departing from.
The design was build with components from Orbit, the open-source design system build by Kiwi.com. It allowed me to design with all the freedom I need, while making sure I was aligned with the rest of the product.
The contents of the drawer is constantly adapted to the situation of the user. Is (s)he about to check-in at the airport? Here’s the boarding pass. Is (s)he just leaving the house? Here’s a here are the directions to the train station you’re departing from.
The design was build with components from Orbit, the open-source design system build by Kiwi.com. It allowed me to design with all the freedom I need, while making sure I was aligned with the rest of the product.
Covering the edge cases
When designing a feature like this, for a complex digital product like Kiwi.com, you’ll be sure to bump into some edge cases to design for. For example: what if the boarding pass is ready for one of the passengers, but not for the other? Or: what if online check-in is not available for the upcoming flight (and we’ll tell users to check-in at the airport), but it is available for the flight after this one?
I thought of all important edge cases and designed for all of them, so the developers wouldn’t run into any surprises during development.
I thought of all important edge cases and designed for all of them, so the developers wouldn’t run into any surprises during development.
Improved engagement
With the first iteration of the feature Kiwi.com reached an improved ‘engagement’ with our app of 6%. It is also became one of the new primary spots we use to communicate anything we think is of importance to the user at a certain point in time.
Did you like this project?
let’s get to know each other and chat about doing a similar project of our own.
Phone
+31 6 48 66 18 00Email
Send an email
