Expedia Design Study

Expedia Design Study

Expedia design study is one of the redesign assignments of the Advance Graphic Techniques class, Web and Mobile Design and Development program at Langara College. In this design study, I focused on improving Expedia mobile application, including the user experience, usability, architecture information and user interface for all potential screens. These changes are only for practice and to improve my design skills.

Platform

Mobile Application

Project

Mobile Application Redesign

Tools

Figma
Adobe Illustrator
Adobe Photoshop

Problem and Design Goal

Expedia Group, Inc. is an American online travel shopping company for consumer and small business travel. The current design of the Expedia mobile app has main problems including the lack of information distribution, the length of property information detail, the usability in search properties and the repetition of user account info.

In this design study, I limit my design goal to focusing only on the “Stay” section. The design goals are adjusting/restructuring the information distribution, tidying up the property information detail and improving the usability as well as the interface of the app.

Figma Working File

Dragging to view or extending to full-screen

(On the mini tablet and mobile view, please view on Figma)

User Flow

After clarifying the problems and design goals, moving on sketch user flow is an essential step. User flow helps me to understand the general operations, key features and functions of the app. In this design study, the user flow was added more information sections in the home screen (discover, property types, blogs/news), improved the filter, property (hotel) details, “Trip” section and restructure user profile in “Account” section.

Wireframes

After clarifying the problem and design goal, moving on to sketching wireframes helps me to target the sections and UI elements that can be improved. Paying attention to wireframes also allows me to relocate the layout and distribute the information before adapting UI into the design.

UI Redesign

Home screen

In the home screen, the header was redesigned by adding user info with membership and redeem points. The categories were changed to the carousel. Besides, input fields on the search screen were relocated to the home screen, in order to allow users to search directly without redirecting to the next screen. The discover, property types and blog sections also were added to attract users while browsing. Furthermore, other sections were improved by adding more cards.

Search by location

In the search by location screen, the search icon was relocated from inside the filter to outside the header. It allowed users to search property names quicker rather than placing the search function inside the filter. The property card was improved UI to make it cleaner and better info distribution. Also, showing the number of available properties next to the filter button to help users know how many properties are matched their needs.

The filter

In the filter, the search field was relocated to the search by location screen. The UI was improved to make it more obvious and cleaner.

Trips

In the trips screen, all trip plans were displayed in one place, users don’t have to tap on the “See all” button to view more trips. In the trip details, the header added tabs to help users quickly access the section they need to view (bookings, saved, stay, cars, activities, about destination). All items were stored in the saved item section, the item card is also redesigned to make the UI consistent with card components on other screens.

Property Details & Selecting rooms

In the property details screen, the layout of property images was changed to show more images at one time, this delivers more information to users than using a carousel to view a single image per sweeping. The rating and reviewing section also improved the UI to make it more obvious.

In the existing design, the property details screen is a super long screen. Therefore, reducing the length of the screen is necessary. To do that, all room selections were relocated to the next screen after users tap on selecting rooms buttons in the “select a room” section as well as the bottom button. Additionally, all information on the property was moved to large sheets after tapping on them to view more.

Account & My account info

In the account screen, the user’s avatar was added and the membership points section was redesigned to make it obvious. Once the user scrolls down, the header will show up with user info and it is fixed on the top. Sections in my account info screen were relocated to the account screens. In my account info screen, Expedia is using web view and some sections are repeated on this screen and the account screen. To improve the current info structure of my account info screen, the overall user info and “My travel details” sections were removed. Also, all tabs including “Other travellers”, “Expedia rewards”, “Coupons and credits”, “My reviews”, and “Privacy and Security” were moved to the “Account” screen.

UI Kit

Typography

Expedia is using the Centra No1 font family in their website and mobile app. According to gooova.com, this typeface was created by Josh Finklea. In this design study. I reused Central No1 as a brand front throughout the design study.

Typography

For branding compliance, I reuse the brand colours as the primary colours and extend tints and shades for various uses. Neutral colours from dark to white and supporting colours are used mainly to support the content.

  • Brand colours: are used in membership labels and discount labels; such as VIP Access, Member Prices, 30% off
  • Primary colours: are mainly used for buttons, tabs, icons, checkboxes, radio buttons, and other essential elements.
  • Neutral colours: are used in text styles, icons
  • Supporting colours: are used in discount labels, alert messages, notification indicators and bookmarks.
Iconography

Solid icons were chosen to highlight the content and create an attractive design, in order to balance the complexity of the content and easily express the meaning to viewers.

Components
Back to top