Lan Airlines rental car process

Redesign a section of the rental car process for a travel website.

UX/UI, Product design
Vanessa's photoby Vanessa Yévenes6 mins read

All information in this case study is based on my own experience and does not necessarily reflect Lan's point of view. I avoided to included confidential content and names. Also, I edited Lan's branding only for presentational purposes.

Overview

When I worked as a web designer in the design team at Lan.com (aka LATAM airlines), my role included making wireframes, improving user interactions, and implementing design mock-ups of different sections of Lan.com. One of the projects assigned to me was to redesign a part of the rental car booking process, precisely the search results page.

At that time, I learned too late to keep an updated work journal to help me write case studies. That is why I decided to work on a concept exploration by recreating an old project I worked on Lan.com and write this case study by considering part of the insights I found for the new proposal and using some experiences of the process of my previous work.

If I explain my journey with this project, it was my first time working on an online booking platform. As this topic was new to me, it was challenging at first, but I took it as a personal opportunity to learn & work on something that would add a positive experience to my career as a designer. To accomplish this, I remember reading about best UI practices from Nielsen's group and Smashing's Magazine articles to acquire more knowledge.

My process and the problem

My design process followed Discovery > Design > Development as steps. One of the first things I did as part of my discovery process was to meet internal stakeholders to have a concept or idea I wanted to explore, then discuss the problem, map any assumptions or biases, write down everything about the work to come, and look through past research or designs. Also, it was important to me to understand and learn about the big picture.

  • What do and don't we know about the problem?
  • What are the main users' pains while using the result page of the booking rental car process?
  • Why do we need to make changes to this search results page?
  • How are the users solving the problem today?
  • How are our competitors doing it?
Then, I used these insights and complimented them with sources of the travel industry, such as reports, and analyzed our competitors and how they are doing in terms of UX.

The image shows the main reasons why 81% of people abandon a booking process, being these listed as: Users are just looking or want to do more research; Technical issues or loss of connection; Payments issues or lack of options; Need to check with other travelers; Price is too high or want to compare; the Booking process is too long or complicated checkout.
Insights into why users abandon a booking process.
The image shows the old design experience of the search results, which has a stepper process bar of five steps in the header. The content section contains a non-editable section for search summary details. It also has a price comparison table that includes the type of cars and some rental car companies, and lastly, the list of search results items and pagination to the right, the filter section on the left, and the footer at the bottom.
Learning from the past, a recreation of the old design of the search results page.

So, after gathering all the information, I refined and defined the problem hypothesis into a problem statement for users and the business problem to find a balance to accomplish both parties.

For users:
The purpose of this page is to help Lan's users to find the car they need for their upcoming travel. And the problem I'm trying to solve is to reduce frustrations while renting a car in the booking process on Lan.com.
For business:
The problem is that I'm trying to decrease user abandonment while users are trying to rent a car in the booking process on Lan.com.

Then, I began sketching solutions as a brainstorming, choosing some ideas based on solving the problem defined.

After this, I make low-fi wireframes to align stakeholders on the direction of my design. I chose low fidelity wireframe as the level of fidelity because the main idea was to communicate clearly the concepts in the workflow and get some feedback to iterate again.

Then, I worked on the mock-ups of the main features to work with the idea of running a hand-off with engineers to show the mock-ups and get more viable feedback.

Also, I did some prototypes to show the complexity of interactions with filters for the mobile web. These prototypes could show the value of this practice to the stakeholders, especially in the early stages, and support engineers in understanding the prototype's features.

The image shows my first explorations of design brainstorming with possible solutions for the design problem. This image is considered some sketches for desktop and mobile web.The image shows a desktop wireframe that details the interactions a user will do to edit the search summary details consisting of a list of fields for pick-up and drop-off location, date and time fields, a primary CTA button for edit and updating, and a secondary link to cancel the changes made.The image shows a desktop wireframe with a proposal that would replace the current price comparison table. This proposal will show starting prices with the type of cars offered to users. Also, it shows an example of a result item with microcopy details included in the price, a referential car image, car capacity, car provider ranking, and a CTA button.The image shows a mobile wireframe that details the interactions a user will do to edit the search summary details, which is a list of pick-up and drop-off location fields, date and time fields using Android native controls, and a primary CTA button for edit and updating. A secondary link to cancel the changes made.The image shows a wireframe for mobile web or small screens, with a proposal to replace the current price comparison table. Also, it offers an example of the result item with microcopy details included in the price, a referential car image, car capacity, car provider ranking, and a CTA button. Also, I added collapsable interactions for the content that will help to show and manage the space to display information on mobile devices.This image shows a wireframe with the content and elements displayed in the mailing proposal to re-engage those users who abandon the booking rental car process that consists of a greeting message remembering a rental car choice of past users' searches on Lan's website.
Sketches with possible solutions for desktop and mobile web at the beginning of the project. Next to them are the low-fi wireframes that define the content and show the main interactions developed in this case study.

The solution

After writing about my process, this section will show the final proposal, which consists of a flat design as an approach to Lan’s brand style guides, and these are the list of features considered as a solution.

Provide users with a mobile version of the booking rental car process to help to browse car options from any device.
Responsive design is a primary approach of the mobile web.
Improve filters for mobile by prioritizing users' filter preferences.
Organize information and hierarchy content.
Increase accessibility, more contrast, ensure that interactive elements are easy to identify, etc.
Highlight product value, and use microcopy to create trust in users.
Show users an editable itinerary section to change search summary details (web and mobile web)
Give users control over when they want to edit or update their search results.
Give them cues of what is happening while they change search results.
Show users another way to compare a car by price, type, and capacity.
Help users to decide by including referential car images so they can understand the type of car options vs. price and capacity.
Consider the "price from" option instead to overwhelm users with information.
Highlight the selected choices, and define the interactive status for each case.
Provide users with more descriptive result items.
Use microcopy to increase trust in users by adding what does price includes.
Minimize the user's choosing time by adding a label when a result item is previously visited.

Mock-ups

This image shows mock-ups for desktop and mobile web design. The desktop design has a purple header with the LAN logo to the left and the stepper process bar to the right. Overlapping this header is the search summary details with the previously prefilled pick-up and drop-off location, date and time fields, and an edit button. Below is a title that says 12 cars are available at the chosen location. After the title, to the left is the filters section, and on the right is the list of result items. On the mobile web is a more compact design for the header, keeping the brand colors, a collapse/extended search summary details section, a title, and more compacted result items. Also, the main changes for mobile web design are in the filters section because the content appears after tapping the filter button, located after the title on the right side. Then after tapping the button, an overlay will list the same desktop filters mentioned above with a similar look and feel for mobile.
Mock-ups for desktop and mobile web.

Desktop Prototypes

[This video has no audio] Show the desktop interaction after the user clicks the edit button from the search summary details section and how fields are displayed or interact while editing a location, date, or time field.


Mobile Prototypes

[This video has no audio] Show how mobile interactions are when users want to change search summary details. The section consists of a collapsable/extended section that displays an overlay with prefilled fields such as pick-up and drop-off location fields; the dates/times fields use the Android native controls, a CTA button to update the new user’s choices, and a cross icon on top-right side, if the user regrets and wants to cancel.


[This video has no audio] Show how I give cues to users when they refine their search by using filters or editing the search summary details. For this, I used skeleton screens because they will provide the idea of the content loading. It will appear in the same spot where skeletons loadings are displayed. Also, It will indicate to users that something is happening on the page and will create a perception of reducing waiting time.


[This video has no audio] Show mobile web interactions with the filters section, which consists of an overlay that appears after tapping the filter's button on the previous page. The main change in this design is that I replaced the old price comparison table and personalized the type of car section. Each type of card has a referential car photo/type name/starting price/car capacity. All this is put together in the filter section, so users can relate filters in one place without being distracted.

Provide users with a way to re-engage after leaving the selection page.

The image shows a mailing design with a header with the LAN logo and branding colors, following a greeting note to a user named Alex. The message says: "We have noticed that you did not complete your car reservation on a recent visit to the lan.com website. For your convenience, we have displayed the details below. If you want to review and complete the reservation, click on the button Return now" after this message, there is a car reservation details card with a Return now CTA button to complete the process. At the end of the mailing, it is a footer with the logo and fine print copy.
Consider browsing abandonment solutions such as an email to remind users what they are looking for; this solution should work only for users who provide an email.

The Outcome

Many things have changed since I departed from Lan Airlines, starting with the name, now LATAM; The current rental platform also has changed, even though, as a former employee had the chance to work on this project was a great addition to my experience as a designer.

About myself
Because NDAs will make it very hard to show our work, I learned that by keeping notes from every project you worked on in the past. It will be a great practice to track my designer trajectory even if I cannot have the design screens of the product I worked on. However, I figured out a way to handle this case study.
Another learning is understanding the travel business, OTAs, and how it is to as a designer in an airline company.
My process
I learned that a collaborative process, so it is essential to ask questions to all. Find allies, and show my designs as often and early as possible to get feedback from the beginning/during a project.
Always consider A11Y as a base in every design.
Regarding testing, this was the most significant debt in this project. For cost reasons, I couldn't test on a grand scale in testing platforms or actual users. I assume part of my design does o not perform as wanted, but ideally, I would love to introduce testing at the beginning, between, and at the end of the process. Including testing could help to save time and money in developing and creating more empathy for everyone involved in the process. And the best part is that it could help me defend my design decisions.
My skills
I got more experience working in asynchronous mode and communicating with colleagues who worked remotely. So it was a great opportunity as a designer to practice ways to show/explain my designs.
Learn about management frameworks, such as kanban, to keep the project on track with the developer team.
Communication skills, it was my first project in English. I took English classes after work to complement my learning in a second language.
View more of my work