Making travel a rewarding experience. A look into how we designed the Travel section of a superapp ecosystem
MY ROLE
User Research, User Interviews, Journey Mapping, Sketching, Wireframing, Screen Flows, Visual Design, Interaction Design
YEAR
2022 - 2023
PLATFORM
Android, iOS
What is TATA Neu?
In 2023, Tata Group conceived the ambitious idea of TATA Neu, a super app designed to provide seamless access to their extensive ecosystem of brands. In a fiercely competitive landscape, marked by the entry of numerous major players, time was of the essence. To realize this vision, Tata Digital underwent a transformational journey, bolstering its ranks with fresh design teams, visionary leaders, and dedicated researchers. Guided Design & Development (GDD) was enlisted to craft the Travel section, encompassing flights, hotels, and holiday packages. For the purposes of this article, we'll delve into the Flight section exclusively.
The Challenge
TATA boasts ownership of three airlines: Air Asia, Vistara, and the recently acquired Air India. TATA Digital strategically initiated the Flight section by prioritizing offerings from its own airlines, thereby leveraging the advantage of providing competitively priced flight tickets—an edge lacking among other aggregators.
Their goal was to "rethink travel." They challenged us to address several key points:
Integrating Neu Pass: How do we seamlessly incorporate Neu Pass into the flight journey?
Designing the Travel Category: How do we craft the Travel Category to be contextually relevant for the TATA Neu App?
Offering More in Travel: How do we provide additional travel-related services and features that cater specifically to the Indian market?
Getting Started
Having worked on travel platforms before, we had access to previously acquired design challenges. Leveraging this experience, we approached the TATA Digital team with a preliminary set of questions. We engaged in extensive conversations, workshops, and exercises. One recurring question was: "What does travel mean in the Indian context?"While many projects rely on a logical design approach, we were encouraged to also take a more creative route.
Based on our research, we divided the users into three categories:
Mr. & Mrs. Das (Couple Travelers): Representing couples who seek memorable travel experiences together.
Ria Khanna (The Luxury Traveler): Catering to individuals who prefer high-end, luxurious travel experiences.
Sharma’s Family (Family Travelers): Focused on families who travel together and seek family-friendly travel solutions.
From Wireframes to Moodboards
Once the wireframes were finalized, we used the previously established themes to create moodboards. These moodboards served as the foundation for developing initial UI concepts. We aimed to incorporate design cues that were contextual to travel, ensuring the visual elements resonated with the app's purpose. Through discussions and iterations, we refined our ideas until we achieved the desired result.
Look and Feel
The homepage was crucial for us, as it not only formed the first impression for our customers about the travel section but also served as a culmination of all our ideas.There were three key considerations in designing the flow:Ensuring users could easily search for flights.Highlighting the loyalty program, NeuPass.Showcasing flight and other offers to our users.
Additionally, we had to design the UI in alignment with the TATA Neu design system. The Panda style design system was particularly interesting because it allowed us to highlight and differentiate various sections effectively.We explored many different iterations to find the perfect balance that enhanced the user experience and introduced something new without causing confusion. One of the ideas we considered but later dropped was a 'Map approach' that showed the user's current location and desired destination on a map.
Streamlining Flight Search
We made flight search effortless by dedicating a prominent search bar at the top of the travel homepage. When clicked, it would directly take the user to the search experience, where they could enter their desired destination. The user's current location is automatically captured as the starting point, but it can be easily changed if needed.
Enhancing Search Results
We aimed to make the search results both user-friendly and highly informative. To achieve this, we introduced filters such as 'Fastest' and 'Cheapest,' allowing users to quickly find flights that meet specific criteria. Additionally, we implemented a NeuCoin Switch feature, which applied discounts to ticket prices based on the NeuCoins users had accumulated from previous purchases.
Designing the Booking Flow
We designed the booking flow with the goal of making flight reservations straightforward while emphasizing NeuCoin and NeuPass as unique selling points. Our focus was on showcasing their cost-saving benefits compared to other operators in the market. We ensured that key screens, such as flight summaries and reviews, were concise and visually organized, with a clear hierarchy of information to prevent users from missing important details. Additionally, we avoided employing dark UX patterns to maintain a transparent and user-friendly experience.
Understanding Long-Term Goals
We also sat down with the TATA Digital team to understand the long-term goals of the brand. We delved into their initial vision for the design system they were developing, explored brand guidelines, and reviewed other research documents. This comprehensive understanding allowed us to align our design approach with their strategic objectives
Research and Analysis
We conducted extensive competitor analysis and secondary research to determine the optimal user flow. Combined with previously acquired data, this research helped us map out the user journey, which was later translated into detailed flows. During this phase, we focused on two key aspects:Providing Value: Identifying where we can deliver the most value to our customers.Optimizing the Flow: Making the flow faster and simpler for an enhanced user experience.
Ideation and Theme Development
We conducted workshops where we brainstormed and voted on design themes. The best ideas were selected for further development, translating these themes into features and integrating them into the visual framework of the app.Feature ideas like Travel Gullak, Travel Calendar, and Group Planning were proposed based on these themes. After extensive discussions and iterations, we finalized the user flow and translated these flows into initial wireframes.
Simplifying Rest of the Booking Flow
We designed the booking flow with a focus on ease of use while emphasizing NeuCoin and NeuPass as unique selling points, particularly their ability to offer lower prices compared to other operators. We ensured that key screens, such as flight summaries and reviews, were concise and featured a clear visual hierarchy, making it easy for users to find and understand essential information. Importantly, we avoided dark UX patterns, prioritizing transparency and user-friendliness throughout the process.