Redesigning Al-Attar travel agencies platform to be more convenient, efficient, and easy to use.

Project Overview

Al-Attar has built a platform for travel agencies to handle their reservations, from the initial search to the final payment. At this moment, the portal is targeting B2B, but it will soon grow to B2C, therefore the portal style and design should be appealing, pleasant, and convenient to the end-user in order to provide a seamless experience.
The focus was on the flight booking process: How users can search, find, and select flights on desktop.
Our goal was to improve the UX design process, and heuristics, design a prototype and create a detailed set of accompanying wireframes. Everything needed to start working with our team of developers to get the web app built.
I started by researching the current state of the portal, by conducting a heuristic evaluation, I looked at a variety of different approaches and narrowed my focus to a subset that seemed particularly promising.
Then I did competitive research, an online survey, and usability testing before creating affinity diagrams, a user journey map and a user flow. I created a paper prototype to gain insights into how real people might use the portal. Based on these findings, I designed and built a high-fidelity prototype that we could use for further testing.
Finally, I created a set of detailed wireframes that specify every element on every screen. Throughout this process, I kept the user experience front and centre, making sure that our designs were easy to use and understand. As a result, we were able to create a booking system that is both user-friendly and efficient.

My role

I directed this project and was assisted by a team of five, which included three developers, a QA, a business analyst and a project manager. I was the primary individual responsible for the User Experience and the deliverables of this project.


Attar Travel




Brackets Technology



Project scope

The primary objective was to evaluate and improve the existing flight booking experience, with an emphasis on building a simpler and more intuitive booking process.

Exploring the problem

Understanding the right problem is half the battle. Despite the fact that there are hundreds of travel booking websites available today, flight comparison and booking remain difficult tasks.
It seems that most users abandon their booking process due to difficult and unnecessary stages and a convoluted flow. The user used to spend a lot of their important time completing the procedure, which made the whole process more frustrating.






Research and Discovery

The initial stage in the problem-solving process is research. I used the triangulation method to establish credibility and validity in the study findings. Competitive benchmarking, usability testing and an online survey established a pattern that aided me in gathering data from many sources. This prevented the creation of a factually inaccurate product.

Heuristic evaluation

Since Al-Attar already had a website, we began the research process by evaluating it against industry standards. the following is a summary of the top ten pain points:

Not mobile-friendly

In an era where the majority of web traffic is generated through mobile devices, a website's lack of mobile-friendliness is a significant pain point. Users are increasingly using their smartphones and tablets to access the internet, and if a website is not designed for mobile devices, it will be difficult to navigate and use.

Poorly designed UI

Issues with UI controls such as location picker, date picker, colour contrast, accessibility, and so on: Poorly designed UI controls can frustrate users and lead to abandoned transactions.

Irrelevant requestes

Too much information is being requested that is irrelevant to business: This is a common issue with online forms, and it can result in lost sales and decreased customer satisfaction.

Perplexing process

Different procedures dependent on the number of passengers are extremely perplexing, and business rules must be streamlined: This confusion can cause customers to abandon their purchase altogether.

Unclear search results

The search results are quite muddled, particularly for return flights and multi-destination alternatives: This makes it difficult for customers to find the best flight option for their needs, which can lead to frustration and wasted time.

Bad Navigation

The website navigation is really bad, and the material is organized primarily on business logic rather than the user: This makes it difficult for users to find what they're looking for, leading to frustration and abandoned transactions.


The process from search to payment is time-consuming, taking at least 40 minutes for a new user to complete: A lengthy check-out process can discourage customers from completing a purchase.

Substantial downtime

Due to the ageing infrastructure, website downtime is substantial: This causes lost sales and decreased customer satisfaction.

Wrong support number

The customer support number provided on the website is a wrong number: This makes it difficult for customers to get help if they need it, causing them to lose trust and abandoned transactions.

Confusing pricing

The pricing structure is confusing and difficult to understand: As a result, customers are unable to tell whether they are getting a good deal or not, which can lead to lost sales.

Competitive benchmark

Before analyzing any flight booking website, we kept in mind the objectives of the business. Our objective is to increase bookings, then the website should be designed to funnel users toward the booking process.
In addition, it is important to consider the competition when redesigning the booking experience. What are the other websites in the market doing well? What can be improved? By understanding the competition, we will be able to better understand the market and redesign the website to provide a superior booking experience.
I examined four airlines’ home pages, flight searches, booking procedures, and booking adjustments. Etihad, Air Asia, Emirates, and British Airways. This resulted in a page-by-page list of findings on good practices, pain points to avoid, and ways to improve the experience.
Sample page with the analysis
  • Overall clean design
  • Book option number one
  • Manage option number two
  • Country/Language/Log in at the top right corner + System knows my country and language
  • Search flights – first option, good size and default selection
  • Manage booking-second option, good size and fast to find
  • My nearest airport comes by default
  • Good size of fields
  • Offer more services at a glance
  • “Continue” doesn’t tell me what is going to happen next


Home page

  • Provide a clean design
  • Place Country/Language/ Log in at the top right corner System should know the user’s country and language Search flights should be the first option, with good size and to show the user’s nearest airport
  • Provide only concise information
  • Offer a good size of fields
  • Find the suitable wording for the buttons e.g. “Search flights” button tells me what will happen if I click it
  • Offer more services at a glance

Flights search

  • Provide the “search for flights” at the top of the page, it is what most of the users are looking for.
  • The system should know the user’s nearest airport
  • When typing a destination, show a dropdown with options Calendar should occupy a good percentage of the “Search area”
  • Be concise when adding passengers
  • Provide a clean design, easy to follow, straightforward information and good size of elements
  • Provide an accessible way to view previous and next day flights
  • “Outbound flight” and “Inbound flight” seem to be good wording
  • Avoid opening more dates on another page, in a non-friendly way
  • Avoid redirecting to multiple pages when the information can be displayed on the same page
  • Avoid cluttering the “search area”, and make obvious what the user needs to fill
  • Provide information with the use of icons when possible e.g. In details of the flight icon showing “night time flight” or Outbound/Inbound flight/ traveller
  • After selecting a destination, automatically open the calendar – guide the user to the next step.

Booking process

  • Showing the progress of the process at the top of the page looks helpful for the user.
  • Be accurate on the steps and progress. If there are many options for flights, providing a sort function ability can be helpful for the user
  • Always provide a summary of the booking, including Details of the flight
    Seats, Extras, Taxes and fees, Total price.
  • Show the summary of the booking on all screens and update it until the user finishes the process
  • Make obvious how the user is going to proceed with payment.
  • When asking for details of passengers ask for their prefered meal

Online Survey

We surveyed 100 people and asked them a number of questions regarding their travel booking habits. The online survey was created with ‘Smart Survey,’ and the user input was collected in quantitative and qualitative data structures. The survey questions are listed below.
  • When was the last time you went to an airline’s website?
  • What prompted you to visit an airline’s website? What were you attempting to accomplish?
  • Were you successful in completing your task that day?
  • What aspects of the website would you change? What changes would you make?
  • How long does it take you to complete the booking?
  • Do you want to choose your seat together with your ticket?
  • What is the most distracting thing about airline booking websites?
  • What type of step do you prefer while purchasing a ticket?
We found that the majority of respondents visit airline websites at least once a year and that most do so in order to book a flight. While the majority of respondents were able to complete their task on the first try, many said that they would like to see improvements in websites’ design and functionality. In terms of booking time, we found that most people take less than 15 minutes to book a flight, but that some people spend upwards of an hour.

Usability testing

In order to get a better understanding of how users interacted with the current website, we recorded users’ behaviour on the website and tried to understand how they interact with the software. I have identified some of the user roadblocks, user goals and user behaviours with the help of this practice.

Affinity Diagram

After gathering the data from the useability testing and the survey, I created an affinity diagram to help organize the feedback I received. I identified ten main categories:
  • Flight Search,
  • Search Calendar
  • Flight Selection
  • Flight Dates
  • User Experience
  • Communication
  • Ticket Management
  • Seat Selection
  • Additional Services
  • Exploration
For each category, I listed the specific comments and suggestions that were made by participants. This allowed me to quickly see common themes and identify areas that needed further investigation. The affinity diagram was a valuable tool in helping me to analyze the data from my user research.

User Journey Map

Using all the available data, I created this user journey map. The user’s sentiment as he navigated through the product was captured in several aspects including Goals, Behaviors and Contextual pain points along with Positive Notes about his experience within them which allowed for greater focus on what really mattered.






Userflow Diagram

Using the data I gathered I started creating a user flow diagram that would help our customers complete their bookings easily. To do this, I first mapped out the steps involved in the booking process. I then created a diagram that showed how the user would move through the system, from start to finish.
This diagram was then used to create the final user flow diagram. To ensure that the booking process was as smooth and easy as possible.

Sketches & Wireframes

With the big picture finally in place, I was able to start sketching out my ideas for how everything will work together. This includes what page layouts and interactions might be possible on each individual webpage as well.
Once I had a general plan in place, I started to add more detailed content such as labelling and potential interactions. By taking the time to sketch out my ideas beforehand, I was saving myself a lot of time later on.
I used sketching to get all of my ideas down on paper, regardless of what they are, and see what stays. I pondered my own thoughts, jotted down notes, and compiled important points for further research.
Once I was pleased with my sketches, I moved on to creating low-fidelity grayscale prototypes in Figma. This helps me to ensure that everything I want to include fits inside the frame without sacrificing the experience’s integrity. I created different screen states to show the process from start to finish, highlighting the interactions and content that would be delivered.
When the designs were finished, I created official handoff wireframe documentation, detailing every interaction the product will make. This included every screen state as well as any other pertinent information that the developer would find beneficial.

High-fidelity Design

Once I had decided on a visual style for the interface layout, I began to add additional details to the sketches and wireframes by converting them into high-fidelity wireframes.
I incorporated aspects in these wireframes that directly address users’ goals, wants, and problems while leveraging common design patterns observed in other airline apps.

Search Page

The Flight Search Form focuses on the important information needed to search flight options: departure and arrival airports, dates, and the number of passengers.

Search Results

According to the user research, users had varying expectations for how the flight results should behave. I selected to display flights by departure time as the default option since most users are prepared to make a trade-off between price and timing when making their choices.
Having said that, it was also critical to include a prominent “Sort by” option on the screen so that users could rearrange the results to their preference.






Usability Testing (first round)

After completing the initial prototype, I conducted moderated usability testing with 8 individuals. The idea was for them to book an entire flight. While the app used design principles existing in previous communication applications, I was intrigued to see if the new functionalities would provide complete solutions to the difficulties discovered during the research process.

Useful Insights


Flight search form

All users completed the form without difficulty. I was concerned that the graph calendar view might cause issues, but I was instantly comforted by the excellent comments and 100% success rate when customers were requested to pick their vacation dates.

Flight selection

When viewing flight results, more than half of the participants missed the "sort by" button since it was difficult to differentiate. However, while all users agreed that having this option was convenient, half of them said they would not have used it since they preferred browsing and comparing results.

Baggage options

Some participants were concerned by the baggage options. The distinction between the two categories of bags was unclear, and the amount of numbers on the screen added to the confusion.

The first iteration

Flight Selection

When I first designed the “Sort by” button, it was just a flat black box. But after testing and tweaking its design for more distinguishability in sorting screentests without focusing on that function as much – because we noticed people often use these features interchangeably- I decided to make differences between them clearer with different colours or textures at first glance instead of having everything blend together seamlessly like before!

Baggage options

Names for the luggage options have been changed to “Standard 15kg” and “Heavy 24”. The aim was to suggest a mental load in these names so that it requires less effort from users when choosing between them, helping them make their decision quicker.

Usability Testing (second round)

I conducted a final round of usability testing to review the most recent changes. The sessions were unmoderated, and I solicited input from 15 participants. The aims were quite similar to the first round in that I wanted the participants to test the menus included in the booking process. However, I was curious to hear whether the improvements made would alleviate the problems reported by prior participants.

Useful Insights

I was glad to notice that the improvements made in the previous first round of testing solved the problems encountered by earlier participants. However, a couple of other issues surfaced.

Colors and Accessibility

The colors used for CTA buttons caused some accessibility concerns. As a consequence, I applied extra shade to deepen the hues and selected to choose for a light typeface with. For a cleaner aesthetic, I also lowered the saturation and "flashiness" of certain colors.

Supporting icons

Some elements needed supporting icons, like (Changing or cancelling non-refundable flight tickets after departure) as some users didn't pay attention to the copy.






Final Designs

We arrived at the final design after several rounds of user testing and feedback, by considering the needs of the target audience and what would be most useful and functional for them. We took into account that the website would be used by travel agents and travellers of all levels of experience, so it needed to be easy to use and navigate with a clean and modern interface.







Post-design, we conducted multiple usability sessions (pre and post-launch). We observed and recorded user behaviour while they accomplish tasks on the new website.
We also asked users questions about their satisfaction with the site experience. Based on our findings, we made changes to the design and layout of the website. We also created new content and added features to improve the user experience. Our goal is to continuously improve the website so that users have a positive experience.
In terms of metrics, the new website design delivered:


Reduction in time to complete a booking


Increased conversion from home to search


Higher home-to-pay conversion






What I learned

This study allowed me to delve extensively into a number of research approaches and examine how they perform in different contexts. It was a fantastic opportunity to work with such a well-known and widely used product while also identifying opportunities for improvement through research.
My key takeaways are as follows:

Benchmarking is a key

Part of determining how well a products stack up against others in their category is benchmarking. With so many different options available, it can be difficult to know where you need improve or maintain excellence without first comparing yourself with other similar products on an apples-to-apples basis


I was able to develop detailed wire-framing documentation using tools like Figma, Miro, and Confluence. This was a wonderful practice and learning opportunity for me to appreciate how much effort and thought has gone into each step on each page of the experience.

Interviews' recording

All interviews and usability testing must be recorded and documented. (I already do this, but it's amazing how frequently you need to refer to them.)

Research objectives

Recognizing research objectives, choosing the proper audience, determining the appropriate research methodology, and asking the relevant questions. This might make or break the ultimate outcome.

Idea vs Value

Among many great ideas, pick the one that adds the most value to your product and use case. Don't fall in love with your ideas, even if they aren't your first.