​​Travelstart App
Search Experience
iOS & Android.

From analysing Appsee recordings, researching competitor apps and referencing general usability guidelines, some of the following (summarised) problems were identified:

USABILITY
Users didn’t immediately know how to interact with the origin/destination tabs.
Users struggled with date selection, understanding the formatting and editing their dates.
The traveller selection add and remove controls on Android were too far apart and uncomfortable to use on larger screens. While iOS used a native spinner, the visual emphasis was on the lesser-used middle spinner for children, while the most used spinner for Adults was difficult to interact with.
Traveller and cabin class selection was split into separate screens which lengthened the selection process.  
The existing wizard flow throughout the selection process confused users and caused a lot of back and forth especially between the home and date selection screens to double-check the information.

VISUAL / AESTHETIC
The city, airport code search bar was unclear as it didn’t have a clear CTA or search icon.
The recent and popular searches were not clearly distinguishable.
The overall design was outdated and inconsistent with the brand style, colours and typography

TECHNICAL
Could only search for city and airport (IATA) code, and not for actual airports. The search wasn’t optimised for other languages like Arabic and the existing API was outdated and different from the Web app.
The autocomplete wasn’t very accurate or intuitive.
The codebase was quickly becoming outdated and hard to maintain due to custom-built interactions and outdated patterns, ignoring platform best practices.
Quite a few other technical issues we won’t go into...

CONSTRAINTS / TRADE-OFFS
We decided to implement updated native iOS and Android components for navigation and search bars and various other elements to save time and effort and couldn’t customize them too much, as this would take extra time in the sprint.

Redesigned and cleaned up the overall UI for iOS and Android – utilized existing native patterns for search and date selection for each platform.
‍
Added labels to “nearby airports”, “recent searches”, and “popular locations” on the location selection screen.
Made it clearer to the user that they can search for their origin/destination by activating the keyboard on opening the location selection screens.
‍
Allowed users to search by airport, country, city and IATA (in English and Arabic) and improved the overall autocomplete search.
‍
Separated origin/destination selection into 2 screens so that the user could easily recognize where they were in the selection process.
‍
Enlarged tappable areas on the date selection screen and reformatted the selected date display to be easier to read. Made the selected date easier to spot by using a more common tab pattern.
‍
Added a “Confirm dates” button to the date selection screen (instead of wizarding straight back to the home screen) – this significantly decreased the back and forth between screens as users focussed more on their selection and were able to edit and review before returning to the home screen.  (I had to "fight" the Head of Product to add this "pause" in the flow, and it definitely paid off!)
‍
Combined Traveller and Cabin Class selection on to one screen, so the user can edit both in fewer taps. Based on app search data, pre-selected the most commonly used search query for 1 adult, economy.
Brought the iOS and Android platforms closer together in terms of style and branding, to be more consistent with the Travelstart website.

The project was released in December 2019.
The search rate on iOS and Android increased since releasing new search flow.
The search rate on iOS increased by 14% while on Android there was an 8% increase.
When looking at the search rate on iOS since June 2019, we saw the highest search rate after releasing the new search flow.
Users seemed to complete their location and date selection faster than before, without the previous back and forth to review dates.