Survey the sites
Both Delta and Expedia use the Gestalt principle of Proximity in their navigation bars to group the different navigation links. These are situated closer together than other text on the site, so users will know that they are associated and have a similar function. Expedia also used figure ground principles by adding a photo background or grey background to add depth and bring the flight booking card and flight details closer to the user. Delta however did not use this principle. Both the Delta and Expedia websites use color contrast to draw the attention of users to important parts of the site. These important parts are the search functions for looking up a flight, which would be the primary task of users when going on a travel site. Delta uses color contrast more boldly with red on navy for the Search arrow, as well as the Log In button. Expedia on the other hand uses blue on white color contrast, which does not grab user attention as intensely. Both Delta and Expedia do not have any stimuli or features that would be in a users’ peripheral vision. This is to ensure that the user stays focused on the task of booking a flight through the company. It also makes the experience more relaxed as the user doesn’t have to balance any unimportant features on the site, as booking a flight can be a common cause of stress for users.
Compare two sites
Task: Book a one way ticket from Chicago to San Francisco on October 14.
We decided to analyze the interface journey when booking a one way flight ticket from MDW to SFO on October 14th. We selected the basic economy option. On Delta’s landing page, the hierarchy was placed on the flight booking menu. The use of a dark navy background made the site feel more luxurious and professional. When selecting the basic economy seat, a pop up modal box shows your selection, then prompts you to click a ‘proceed’ button. There is a large bright red button to upgrade your seat to main, and a small blue link underneath to proceed without the upgrade. This is how Delta utilized the eye catching color and scale of the button to emphasize more attention to one button.
On the other hand, Expedia’s landing page contains bright colors with many different options for a user to choose from. Not only can a user book a flight, but they can also book a hotel room, buy a rental car, or even find activities to do in the city they are visiting. Compared to Delta, Expedia’s landing page is a little more chaotic. Expedia’s overall mission of giving a user the cheapest flight makes the website feel fast-paced, compared to Delta’s more luxurious feel. When comparing flight prices, Expedia clearly shows the user the cheapest flight through the use of color codes, as the prices in red coloring are the cheapest. They also use green to show that there are no fees associated with the flight, which encourages users to book their flight as they feel like they are getting the best deal. Both websites allow a user to filter their results, which encourages user interaction in order to get the best outcome.
These two sites displayed flight information differently as well. Delta uses two columns. They visually depict flight information on the left and then show 4 price options, ranging in scale. Expedia however, only offers one price option for each flight listed and shows this in one long row. There is less hierarchy in Expedia's flight cards.