Livelo Travel: Flights, Hotels & Car Rentals Search
Updated: 3 days ago
At Livelo, users earn points that can be redeemed for products and experiences, including travel. I was responsible for designing the travel search experience across mobile and desktop, including flights, hotels, and car rentals.
The Challenge
When searching for a flight using points, users need to compare prices in both points and cash, understand fare conditions, and make a decision without getting lost in a long list of options. The experience needed to be clear and easy to scan, especially on mobile.
The Flight Search Page
Easy-to-compare results. Each flight is displayed in a card showing the outbound and return flights, departure and arrival times, airports, duration, and number of stops. Labels such as “Most economical” and “Best flight” help users quickly identify the best options.
Points and cash prices side by side. The points price is highlighted, with the equivalent price in Brazilian reais shown below, along with the Livelo Club benefit.
Filters focused on key decision factors. Users can filter by number of stops, departure and arrival times, baggage, refundable fares, and points price range. A simple sorting option is also available, including best flights, lowest price, highest price, and fastest flights.
Details without leaving the search. “Flight details” expands to show the complete itinerary, including each flight segment and layover duration. “Other times” allows users to change the flight time without starting the search again.
Checked baggage with points. Users can add checked baggage directly from the search results, paying with points or cash, with clear confirmation that the selection was successfully added.
New components and Design System Handoff
At Livelo, the company already had a dedicated Design System team, but our product team was creating a new experience that required many new components. Since the Design System team already had a high volume of work, I took ownership of documenting and preparing many of these components for development, following the existing Design System guidelines.
I worked on details such as desktop, tablet and mobile breakpoints, accessibility, click areas, states, interactions and animations. I documented the components and worked closely with developers through weekly meetings to make sure the implementation was aligned with the design and to help resolve any issues during development.
Comments