DH150-UX
Assignment 08: Interactive Prototype
Priyana Patel
DH150: User Experience Design
Project Description
Summary
The following interactive prototype is designed to solve and illustrate three features to ease travel-planning. The three features include a price tool that clearly points out how to adjust your search to find options within your price range, a minimized flight booking process which allows you to select both inbound and outbound flights on the same page, without unecessary text and details, and a recommendation tool which allows you to sort through hotel reviews by each user, personalizing the selection process while eliminating the feeling of being overwhelmed.
Process
The prototype was created using Figma, a browser based UI and UX application for prototyping and code-generating. I have utilized Figma for past projects for creating wireframes for mobile applications and websites. I first started by digitizing my paper wireframes while implementing graphic and interactive components. I ensured that the color scheme fits with the intention of the project: to book cost-efficient trips to various travel destinations, book last-minute flights to see loved ones, and book bundle deals for work-related purposes with high-rated accomodations in good locations.
Purpose
The purpose of this interactive prototype is to visualize the information for the proposed tasks and features, validate the interaction flow for the user, and explore what influences a user’s choices. All in all, it is to evaluate rather than explore the system’s design.
Tasks
The following prototype illustrates the flow for a bundle deal even though Expedia and other travel apps offer option to book flights and hotels seperately. First, a user will input their departure and arrival city or airport. The user will then input their travel dates through a click and drag on the selected calendar dates. They can then adjust the number of travelers using the add and subtract buttons. By default, the travel budget slider is set from $0 to $1,000,000 which the user can adjust based on their budget preferences.
After tapping on the search button, the user will arrive at the hotel search results screen. They can scroll horizontally to view the previews for relevant hotels which are also positioned on a map with their price point per person. If the user taps on the price tool button, they will be directed to a new page where an option to change their search query will appear. They can either ignore or accept this suggestion, and then return to the search results. The user also has the option to sort and filter their hotel results by name, star rating, and amenities.
After tapping on a hotel, more information about the accomodation will be displayed on the next page. The user can scroll through pictures, look at reviews, and select a room. If a user taps on the reviews button, they will be directed to a new page with previous guest reviews with a score summary at the top. If the user taps on the sort button, they can sort ratings by rating, time of year, date, and keywords.
Once a user selects a room, they are directed to flight results for both outbound and inbound flights. They can scroll horizontally to view the flight options. If they click on the filter button, the user can view flights based on price, duration, stops, departure and arrival time, and airline. Once a user selects both flights and the done button, they will be directed to a summary page where they have the option to edit their hotel or flight selection. After reviewing their details and clicking on the checkout button, the user will be asked to input traveler and payment information, and whether or not they would like to purchase travel insurance. After tapping complete booking, the user has completed the interaction flow.
Graphic Interface
As this design closely follow Expedia’s mobile app with the implementation of three new features, I decided to adopt the travel agency’s clear, structural layout and great use of icons. Expedia’s logo colors are Dark Midnight Blue (#00355F) and Deep Lemon (#EEC218). I used color.adobe.com to explore complementary, analagous, and monochromatic variations of Midgnight Blue. I also explored color palettes related to keywords such as “travel”,”explore” and “adventure”. The final interactice prototype implements a monochromatic color palette of Midnight Blue with White.
Wireflow
Version #2 (Based on In-Class Cognitive Walkthrough)
Prototype
Feedback
In-class Cognitive Walkthrough
The main feedback I received was on my “progress bar”; it was unclear what “step 1, step 2, etc.” referred to. I was advised by my peers to either replace it with a visual progress bar that fills up with the completion of each step or replace the text with flight and hotel icons.
My peers additionally said it would be helpful to rename my “price tool” feature. It was unclear that clicking the button navigated to the corresponding page titled “Edit to Find More Options”. The user actions and the intended feature are not consistent with each other. One user actually thought that the frame where you can use a slider to change the travel budget was the intended flow and next page. My peers told me to include the travel budget field on the same page as the search query, providing a default option of the cheapest and most expensive options as the price range.
Regarding the flight filter page, my peers said that it would be helpful to clarify “morning, afternoon, evening” because it is unclear what a midnight flight would fall under. All in all, the terms I used are a little vague and broad, and so I plan to include specific times of the day under each term. Lastly, they said that it is confusing and overwhelming to include both the departure and arrival flight search results on the same page. While this is an issue I tried to overcome, I plan on re-organizing the page through two carousels as opposed to two vertical scrolling sections.
Peer Review
Samantha Chiu, March 2nd, 2020
First Impression: “LOVE THE COLORS AND INTERFACE - very clear and easy to read”
“Very big buttons and clear about what they do”
“Was not able to move the travel budget scroller but wasn’t sure if that was part of your features”
“Price tool was clear and easy to use and understand”
“Maybe enlarge “Back to search results” so it is a little easier to see?”
“LOVE the scrolling on top of the screen - very convenient”
“Reviews were easy to navigate”
“Filter is clear and love that when I click on the button it will shade to show that I have selected it”
“Love that there is an edit in checkout so I can go back whenever I want to”
“Does the arrow on the progress bar do anything?”
“The dates say SAT, March 21st to SAT, March 28th but the calendar only lets me select up until the 27th”
Screen recording here