TravelBird was a leading online travel agency (OTA) that offered personalized travel deals to 15K+ users daily.
The TravelBird team in Germany was getting feedback and requests from users who wanted a way to browse travel deals near them. Specifically, users wanted offers for places they could travel to by car within a few hours. By designing this feature for the German market, we hoped to increase the number of daily bookings.
I mapped out the scope with the Head of Design and Product Owner. The requirements were: pragmatic design to ship without additional back-end efforts, responsive web design so pages render well on different devices and screen sizes, a page for search and results, and clear entry points on the homepage and search bar.
I considered different ways to design the search results user interface. For example, showing places you can drive to within 2 or 3 hours. But German users are very precise. They prefer to know the number of kilometers. They are also sensitive to privacy and sharing personal information.
With all this in mind, I designed the interface with 3 radio buttons to search within 300 km, 500 km or 700 km – the most common travel distances. I decided not to automatically populate the user’s location or require this data to perform a search.
A ‘nearby’ concept is not easy to visualize. So I created wireframes to explore and compare multiple design options. For example, we could present the map as a circle, donut, or filled circle.
We debated features and functionality. Should the search results include the user’s city? How interactive should the map be?
This was a tough decision, but in the end we went with a simple visualization to ensure ease of use. I used a flat design style for the map, with a radius and pins to represent points of interest. Next to the map, I placed photos of German cities to help users connect with areas of interest.
Color plays an important role in UX/UI design. A consistent color scheme builds trust and familiarity. Furthermore, use of specific colors for specific content types gives each color a meaning.
TravelBird had three colors in their logo. I reserved the TravelBird yellow for call-to-action buttons, the blue for search box elements, and the orange for deal labels. In this way, users learned to associate orange with travel deals.
Saw a 10% increase in conversion rates, which amounted to approximately 65,000 euros in revenue in the first two weeks.
A simple, clean design gave users an easy way to search for deals near them.
Saw a 10% increase in conversion rates, which amounted to approximately 65,000 euros in revenue in the first two weeks.
The final result covered all use cases, entry points, and worked well on desktop and mobile web.
Improved the aesthetics and usability of the product including the order confirmation page, payment page, success and error handling pages. Improved communication of prices and availability with an easy-to-read visual calendar.
Mapped out the user flow to identify user pain points and opportunities to simplify the purchasing process.
Designed blog to be used by editors in 10+ countries and languages. Ensured design template and code accommodated various needs and scenarios to prevent brand inconsistency.
Increased conversion rate by 2.9% by tweaking the room selection feature.
