My Role

My Role

Sole UX designer: Initial Research, UI & Interaction design, Prototyping, Usability testing

Sole UX designer: Initial Research, UI & Interaction design, Prototyping, Usability testing

Client

Client

CodeGen: A subsidiary product developed in-house by the company.

CodeGen: A subsidiary product developed in-house by the company.

About the project

Codegen, along with their, large range of TravelBox product line, were focused on providing travel exploring and planning capability through their TravelBox™ SURF B2C platform. Along with the web application, there was this need to build a mobile app also. So this marks the application design solution.

Starting with discussions

To begin, several brainstorming sessions were conducted, primarily involving product owners & stakeholders. Given the simultaneous designing of a web portal, it was essential to establish clear distinctions of few things. So with the Classic Brainstorm approach I focused on

  • How different it is from the web portal & determining the key areas requiring emphasis in the mobile app.

  • What is the impact to the business

Requirement for an app to function as a simplified version of the web portal which can access on the go, focusing primarily on enhancing discovery and planning features.

Impact to the business,

Defining the problem & my assignment

With all the points after discussions, I just stated the problem that we need to solve from the design.

Lack of the necessary flexibility and freedom in planning and scheduling and absence of resources (tickets access, maps etc) results in travellers feeling stranded and frustrated during their journey planning process.

As the result of all these discussions and findings, I just marked down what I should complete as the UX designer.

I was given the responsibility to design a new application enabling users to explore, plan, and book their travel itineraries directly within the app.

Conducting stakeholders workshops

The next step was, conducting Stakeholder workshops to gather insights. This choice was driven by our tight schedule, which didn't allow for extensive user interviews with a large number of users. I chose 2 approaches,

I conducted cross functional workshops to capture diverse perspectives on user needs and challenges, and to gather informations from the domain specific perspective I held few domain expert workshop rounds.

So the focus areas were,

Key entry points

that can guide trip planning from exploration

Primary features

that should be included in a itinerary planner

Essential resources

that should be integrated into a travel planner

In this step, we mostly used the Traditional brainstorming method, because it allows to freely share thoughts, in a wide range of ideas.

So in this approach our team members could verbally contribute, which led to quantity over quality insights.

Talking to users

Even with a tight time frame, as the next step I chose to have a quick round of user interviews for better collection of insights. So I had few user interviews covering different type of user profiles.

Based on the insights gathered from the interviews, I could re-evaluate our assumptions and reconsider the points identified in previous workshops.

Key take-aways are,

↑ Major key points, found from interviews

Refining, personas & Journey maps

While creating personas and journey maps before interviews is a common practice, my goal was to create highly detailed personas and journey maps grounded in real-world insights.

While creating personas and journey maps before interviews is a common practice, my goal was to create highly detailed personas and journey maps grounded in real-world insights.

Solo Backpacker

Group

Traveller

Family Travel Planner

Experience Seeker

Cultural Explorer, Adventure Enthusiast

Nature Lover, Travel Blogger/ Photographer

I combined the personas and journey maps to better represent the user group.

Additionally, I curated a list of features corresponding to each stage within every journey map.

↑ An initial paper sketch

↑ On UI annotation sample

Checking out competitor’s apps

Then, the next step was having a look at various travel planning apps focusing how they handle the exploration part and the planning part. I also looked for feature areas where they were lacking.

For this stage, I got the essential stakeholder: the Business Analyst involved.

Highlights: Exploration

  • Most of the apps provide various discovery and exploration options, but less related contents.

  • The apps allow users to create wish-lists or save items, but there's no direct access from the saved options.

  • While all the apps provide multiple recommendation features, some overwhelm users with excessive content, leading to frustration.

Highlights: Itinerary Building

  • Most of the apps lacked entry points to itinerary

  • Some apps offered, itinerary builder but they didn't have enough options or customisation options.

I checked some reviews as well.

As a follow-up task I started looking for reviews on the Appstore & Play Store for similar kinds of apps as a way of gathering more insights.

Highlights: Reviews


  • People are having problems with handling large itinerary


  • More people wanted to bring their manually searched items in to itinerary


  • Most of the people were fed up with unrelated recommendations

Refining the Information architecture to kickstart ideation

Based on these insights, the business analyst and I developed the information architecture and conducted brainstorming sessions with the stakeholders.

Structuring the information for the Itinerary planner was a bit challenging.

Therefore, we chose to implement crucial changes after a few design iterations of the itinerary planner rather than completing it immediately.

Paper sketching & Wire-framing

Next, I just started to ideate with pen and paper addressing every part of the user flow. I sketched flow wise designs first and then I converted them in to low fidelity wireframes.

↑ An initial paper sketch

↑ A low-fidelity wire-flow

↑ On UI annotation sample

I transformed the wireframes into a wire-flow and shared it with the team for clarification and feedback. The wire-flow helped illustrate interactions between screens and components, making it easier for the team to understand and provide more insightful feedback.

Some of the finalized designs

Explore Tab/Page - Search identified as the main component here, and organised all the recommendations and suggestions under different categories which act as entry points allowing the user to explore more.

↑ Explore tab design

↑ Main search option

Scroll through the design to see the content ↓

↑ Explore tab design

Items Listing Pages (Activities & Hotels) - As a starting point for exploration, users can view hotels, activities, and other items in this view, enabling them to search based on their preferred destination.

↑ Activities listing page

↑ Hotel listing page and map view

Scroll through the design to see the content ↓

↑ Activity Detail Page design

Add to trip from saved list or item detail page - Enabling users to add activities, places, or items to the itinerary by specifying the exact day and indicating the day's activity count simplifies the decision-making process regarding which date to add them to.

↑ Itinerary selection view

↑ Day selection view

Itinerary Planner iterations

↑ Design iterations of itinerary planner

I did few iterations to ensure it's simple, clutter-free, and flexible, catering to all user planning needs.

  • Restructured the information architecture for the itinerary section.

  • Re-evaluated which options to display immediately and which ones to reconsider for inclusion.

to minimise the Cognitive burden on the user .

Itinerary Planner - Finalised Design

Presenting essential activity details and consolidating secondary editing options under one button transformed the view into a summarized format, providing the freedom to make changes while reducing clutter.

↑ Itinerary planner view

↑ Itinerary planner scrolled view

Ticket Selection - Here's how users are presented with the ticket options within itinerary

↑ Ticket selection view

Re-Ordering - This is how users can rearrange the order of items within the days.

↑ Item re-order view

Prototyping and testing, parallelly

So in the mean time of designing , I started converting some of the flows to high fidelity prototypes in order to user test with the in-house team.


We tried the Cognitive Walkthrough method to test the selected flows needed for the optimum design. Running prototyping and testing simultaneously proved effective, especially given the project's tight timeline, allowing us to identify necessary changes promptly.

What I've learned

  • Importance of feature prioritisation - While it's possible to incorporate numerous features into a design solution, I learned that meticulously identifying features directly impacts the user experience.


  • Recognition rather than recall is very impactful to design solution- I've learnt that users expect familiar behaviours and patterns from the app based on their daily interactions with other applications and it is highly impactful to our design solution

That's a wrap. Thank you for reading!

All designs, images & logos featured in these case studies are protected by copyright and are the intellectual property of CodeGen International (Pvt) Ltd.

Copy Email

Email Copied

© 2023 All rights reserved by Ashan Ginige
All designs, images & logos featured in these case studies are protected by copyright and are the intellectual property of their respective companies.

Copy Email

Email Copied

© 2023 All rights reserved by Ashan Ginige
All designs, images & logos featured in these case studies are protected by copyright and are the intellectual property of their respective companies.