Redesigning TravelTriangle travellers’ dashboard — a UX case study
We, at TravelTriangle, are dedicated to solving the holiday industry. The experience of our travellers is of utmost importance, and to make their journey smooth we revamped our traveller dashboard to achieve a utopian stage.
What is product utopia?
It is a mobile-first personalised interface that helps us understand each traveller at a deeper level (subconscious) and meets their immediate needs first, to help serve the end goal of selling packages.
TravelTriangle as an organisation has three levers to act on travellers -
1. Travel Agent Network
2. Internal Operations team
3. Product
Given that travel agents and operations teams can’t be scaled infinitely, we need to leverage the product to derive as much value as we can. This is possible only when we understand our travellers better.
Utopia’s end goal is to identify the exact stage (lead + subconscious) in which an individual user is, and help them overcome the immediate hurdle (mental-blocker).
Mapping the Journey
To understand the traveller’s needs and pain points in the existing system, we started with mapping the journey. The journey helped us in understanding the gaps which travellers experience during the entire life cycle from landing on our homepage to generating a lead and finally going on a trip. We came across issues like
- No explicit communication once the traveller lands on the dashboard
- Too many notifications sent to the traveller
- Most of the information discoverable via email instead of the dashboard
Once all the pain points were listed, we created the ideal flow of the entire journey to figure out what improvements can be made via product, to give an excellent experience to the traveller.
The Philosophy
To make the interface dynamic as per various lead stages, we decided to follow the atomic design methodology. This is a self-contained distinct UI module or organisms that are capable of serving complex business use cases and are reusable from one page/template to another.
To define the UI modules, we started with listing the various modules needed for each lead stage
Structuring the Dashboard
To have dynamic organisms, we started by creating multiple dashboard variations. We also explored asymmetric as well as symmetric styles to understand the feasibility of organisms.
We finally concluded on the below dashboard structure in which each organism can have three sizes.
- Full card
- Half card
- 3/4 card
Defining Organisms
Every lead stage has distinct organisms. We bucketed all organisms as per various lead stages and listed down all the elements which go into individual organisms.
The above table helped us in understanding the hierarchy of elements within each organism, which further helped us in keeping the information crisp and consumable for the user.
Building the Story
For every lead stage, we defined the goal which the product wants the user to achieve. This objective helps us in identifying the story, which will help the user to navigate through the page. Once the story was clear, we had a better understanding of which all organisms go in what stage and in which order. To justify the placement of organisms, we even defined the purpose of each organism. All this mapping helped us in structuring our dashboard.
Old vs New Dashboard
Once the stories were closed, we started with making wireframes for each stage and then doing the visual design for all. Below are the references for the old and new dashboard.
The new dashboard not only helps travellers identify the next steps of their journey but also provide them with information on their destination, which also helps in engaging them on the dashboard.
Learning
Working on this project helped me to understand that if we first define the story we want to convey via our product it is easier to determine the navigation of the page and every element will have a logic behind its existence and placement.
