UI UPLIFT
Improving the UI of Webjet's search and payment process for easier navigation and booking
UI UPLIFT
Improving the UI of Webjet's search and payment process for easier navigation and booking
UI UPLIFT
Improving the UI of Webjet's search and payment process for easier navigation and booking
UI UPLIFT
Improving the UI of Webjet's search and payment process for easier navigation and booking
UI UPLIFT
Improving the UI of Webjet's search and payment process for easier navigation and booking
UI UPLIFT
Improving the UI of Webjet's search and payment process for easier navigation and booking
Improving the UI of Webjet's search and payment process for easier navigation and booking
​THE PROBLEM ​​​​​​​
The inconsistent design, information overload, and absence of overviews are making the browsing and booking experience frustrating.​​​​​​​
​THE SOLUTION​​​​​​
A consistent and clean design that highlights only key information, allowing for an easier browsing and booking experience.
PROBLEM
1
Inconsistent design
Users find the app unreliable due to inconsistencies in icons and layout.
2
Information overload
Users find the information presented on each screen too cluttered, making the booking process feel overwhelming.
3
No price overview
Users are unable to view a price overview for destinations, which is both inefficient and time-consuming when browsing.
As a frequent traveler who regularly uses booking platforms, I found myself wondering why I don't use Webjet more often.
After evaluating the experience, I identified several pain points that could be improved.​
​
-
The inconsistency of icons and sizing created a sense of unreliability.
-
Slow loading times between screens disrupted the flow of booking.
-
There's no clear overview of flights with total prices; each option must be selected individually which affected the browsing experience.
-
The overwhelming amount of information discouraged me from continuing the booking process.
5. Too many steps are packed into a single screen, which created confusion.
While my initial goal was to focus solely on a UI uplift based on visual design principles without conducting research, I couldn't resist diving deeper.
First, I needed a solid understanding of the competitive landscape to ensure I knew what works and what doesn't.
COMPETITOR ANALYSIS
Key Findings:
​
-
3/4 competitors did not have a booking progress bar
-
2/4 competitors did not have a price overview
-
2/4 competitors were missing a recent search function
-
2/4 competitors did not offer a notification feature
These findings underscore key features that can be adopted to improve the browsing and booking experience.
And of course, to truly understand the user, it was crucial for me to conduct usability tests on the current Webjet mobile app to gather actionable insights that would lead to better design decisions.​
​
I conducted usability tests with 10 participants, targeting a diverse group of travellers aged 21 to 65.
USABILITY TEST
Key Results
60%
if not for the brand's reputation, users would think the app is unreliable. This perception was mainly due to inconsistent icon usage, sizing and an unorganised layout.
90%
users found it ineffective that they couldn’t view a price overview of their desired destination, which negatively impacted their browsing experience.
100%
users felt that the amount of information presented made the booking process overwhelming.
Based on competitor research, user research and core UI principles, I sketched several ideas and developed a solution.
SOLUTION
BEFORE
Colour
Before: #DC140A
After: #B01822
Webjet's primary colour was changed as it did not meet the required colour contrast standards.
Before: Only able to view 1 recent search.
After: Able to see multiple searches through a horizontal scroll.
Before: Promotion and notifications presented on home search screen.
​
After: Promotion and notifications as buttons creating less clutter on the home screen and allowing users to be notified of new information.
Before: Unsure of clickable, difference in font colours and multiple screens.
After:
-
A clean, minimal layout with key information in one box.
-
Use of visual icons and text colour consistency.
-
A streamlined design that reduces two screens to one.
AFTER
Before: Inconsistency in spacing and icon size.
​
After: Cleaner design with consistency in spacing and sizing.
BEFORE
AFTER
Before: Bottom bar filtering options.
​
After: Quicker access to the most commonly used filters.
Before: Flight 1 has to be selected in order to view options for Flight 2.
​
After: Users can view a summary of the combined flight prices, enabling more efficient browsing.
Before: No summary of selected flight.
​
After: A screen dedicated to providing users with detailed information about selected flights.
BEFORE
AFTER
Before: Icons used inconsistently.
After: Additional icons have been incorporated to guide users visually, offering cues that make navigation easier and reduce cognitive load, while also simplifying the presentation of information.
Before: Content overload and too many steps on a single page, resulting in poor organisation.
After:
-
Users can track their booking progress via a bar at the top. Information is organised into three separate screens, with only essential details displayed.
-
The layout is simpler and cleaner, making the booking process easier and more intuitive.
Final Designs
