Project Overview and Objectives
Skyscanner is a search aggregator and travel booking agency, offering services that include flight searches, accommodation searches, and car rental bookings. For this project, I chose to redesign their mobile app, culminating in the creation of an app relaunch advertisement.
The primary objective was to enhance the user experience by refining the UX/UI of some of Skyscanner’s more problematic app pages. While preserving the existing logo and page content, I focused on streamlining the user interface elements and improving the user experience flow. This involved thoughtful adjustments to the layout, ensuring the new design is not only visually appealing but also intuitive and user-friendly. All changes were made with the ultimate goal of elevating the overall user experience.
Programs Used
Figma, Adobe Illustrator and Photoshop
Pages Redesigned
Homepage
Hotel search page
Flight deal search page
Fonts
I selected the new font, League Spartan, for the app to enhance Skyscanner’s sense of reliability and trustworthiness while achieving greater cohesion with the font used in their logo. In searching for the perfect font, I sought a rounded, clean sans-serif style that not only reflects the app's reliability but also introduces a more human element through the font's curvature. To ensure consistency with the logo’s font, I focused on the lowercase "a" as a key reference point. The logo features a single-story "a," so I made sure the new font also includes this design, a feature missing in the current app.
Colors
For the color scheme, I chose to consistently use their main logo color, Sky Blue (#0062E3), across all app pages—a departure from the current app, which suffers from color inconsistencies. For example, while the current homepage prominently features Sky Blue, other pages rely on Dark Sky (#05203C) as the dominant color. By applying Sky Blue uniformly throughout, I’ve created a more cohesive and unified visual experience.
For the text, I opted for Dark Blue, prioritizing readability and legibility.
Iconography
In the current app, the icons are often too small and not universally recognizable. For instance, the hotel icon doesn’t clearly resemble a bed, which is intended to symbolize a hotel in Skyscanner’s design. To address this, I replaced it with a more prominent and easily identifiable hotel building icon.
For the three main icons at the top of the homepage (Flights, Hotels, Car Hire), I removed the circle element present in the existing design. This aligns them with the icons in the bottom navigation, which lack this circle element. My goal was to create a more cohesive and consistent visual language across all parts of the app.
Grid System Used
Margins of 16px left and right were set to avoid texts and elements hitting the edge of the screen.
A 4-column grid, with 12px gutters, was used in designing the new app pages for alignment and layout purposes. Rows of 5px height, with 5px gutter, were also used.
Homepage Redesign
The redesigned homepage aimed to achieve the following goals:
Eliminate Redundant Information and Messaging: The old design contained redundant elements, such as multiple buttons leading to the same destination. For instance, the "Hot hotel deals" button and the hotel picture advertisement both directed users to the same page. These redundancies have been removed to streamline the user experience.
Integrate the Flight Search Engine: I incorporated the flight search engine directly into the homepage, allowing users to search for flights immediately upon arrival. This enhancement reduces the number of clicks required, making the process more convenient and direct. Since flight search and comparison is a primary reason users engage with the app, having this feature readily accessible on the homepage is a more user-centric approach.
Highlight Attractive Features: In the original design, the "Explore Everywhere" button directed users to a page displaying flight deals with their corresponding lowest prices. Recognizing the appeal of this feature and its potential to drive revenue, I added a carousel showcasing various destinations and their cheapest available prices below the flight search engine.
Relocation of Secondary Messaging: To maintain focus while still providing essential information, I placed the hotel and car rental deals sections beneath the flight deals. This layout ensures that primary and secondary content is organized logically and intuitively for the user.
Hotel Search Page Redesign
The new design aimed to achieve the following goals:
Refined Search Section: In the original design, the search bar was small, with fields like the date range and number of passengers being difficult to see and tap. To address this, I designed more prominent and clear search fields, improving both visibility and usability.
Removal of the Map Section: The original design featured an awkwardly placed Map section at the top of the page. I replaced this with a Map icon at the top right above the search results, signaling to users that they can view their search results on a map without cluttering the page.
Relocation of Filter & Sort Buttons: The original Sort & Filter buttons were positioned at the bottom of the page, where they blended into the background and were not easily noticeable. I moved these buttons to the top, making them more visible and reducing distractions on the page.
Enhanced Search Result Images: I adjusted the layout of the search results so that hotel images are now displayed vertically. The previous horizontal layout limited the visibility of the images, making it difficult for users to get a clear view of the hotels.
Improved Price Display: To highlight attractive discounts, I applied a red strikethrough to the old booking prices, making the price reductions more noticeable and appealing to users.
Addition of a Wishlist Button: I introduced a Wishlist button, allowing users to conveniently bookmark their favorite hotels, enhancing their overall experience and making it easier to save and compare options.
Flight Deal Page Redesign
The redesign of this page aimed to achieve the following goals:
Refined and Clearer Search Section: The search section was improved to feature more clickable buttons for ease of use. For instance, in the newly designed flight class filter, customers can effortlessly select their preferred class with a simple tap.
Month Buttons with Price Information: I added the lowest flight prices to the Month buttons, enabling users to quickly identify the most affordable travel options for each month.
Enhanced Price Visibility: The prices were enlarged and positioned more prominently, making them more noticeable and accessible to users.
Improved Button Design: The "View these dates" button was redesigned to be a more noticeable blue, ensuring consistency with the buttons on other pages and enhancing the overall cohesiveness of the design.
Ad Campaign
As part of this project, I’ve also created an advertisement to highlight the app’s redesign and relaunch. The concept centers on illustrating how the new Skyscanner design is so sleek, smooth, and simplified that it allows users to effortlessly transition from their living room to their dream destination.
For this ad, I crafted a composite using two different images in Photoshop. The techniques I employed included masking, dodge and burn, color adjustments, tonal adjustments, lens flare effect, and Gaussian blur effect, among others. These methods helped create a visually compelling and cohesive advertisement.
Below were the original images used to create the above advertisement composite
Challenges in the Process
Redesigning an app is both exhilarating and demanding. Given my extensive familiarity with Skyscanner - having frequently used it to book flights - identifying pain points in the existing layout initially posed a challenge. My habitual use of the app's current design made it difficult to pinpoint areas for improvement. The key to overcoming this was to mentally "deconstruct" the app and approach it as if I were a first-time user.
To avoid feeling overwhelmed, I began by examining the fundamental visual elements across the app's various pages, such as colors, typefaces, buttons, and search fields. This methodical approach allowed me to generate ideas on potential pain points within the app. I created several user scenarios, such as finding the cheapest flight to Paris and browsing the months with the lowest fares. By doing so, I could evaluate the app from a new user's perspective, enabling me to trace part of the user journey through the application.
Another significant challenge was determining which content on a page was most relevant to the user. Given the limited screen size of mobile devices, the hierarchy and relevance of information were crucial in designing the page layouts. Beyond considering the user's needs while navigating the app, I also factored in what would benefit Skyscanner as a company. For instance, in the redesigned homepage, I included a picture carousel of discounted flight deals to capture users' attention, encouraging them to explore the featured offers.
Reflection
This project stands out as one of the most thrilling I've undertaken, not only because mobile and digital design is my greatest passion, but also because the process was both challenging and rewarding. Deconstructing an established app with strong branding, like Skyscanner, required extensive thought and research. Completing this project has further refined my expertise in designing for mobile devices, enhancing my UI/UX design skills.