UX_wireframes, prototypes, and user flow

01Initial Sketches Brainstorming

01Functionality

Scenario A – Closer Look

PRIMARY USER GOAL

2

Provide a simplistic process when booking a flight that is consistent throughout and can utilize as navigating forward and backward in the process.

User has the Ability to Modify Search with Ease

User Has the Ability to Interact with the Process

User Has the Ability to Interact with the Process

FLIGHT

FLIGHT

Departing City to Arrival City

Select Departing Flight

SECONDARY USER GOAL

ITINERARY

Restructure the layouts so the user can view the flights and pricing more visually.

1

3

Simplify Content on Index Page of Booking a Flight.

Departure City

User Has the Ability to Interact with the Process

FLIGHT

Arrival City

DEPART

Travel Time

Depart Airport Arrive in City

Flight #000

$000

0:00 AM 0:00 AM

Depart Airport Arrive in City

Flight #000

$000

Arrive

Flight #

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

Name

D.O.B

SEX

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

Address

City

State

RETURN

MAR 23

INFORMATION

Exp Date

Card Number

Arrival Date

Zip Code

PAYMENT

Select Returning Flight Departure Date

0:00 AM 0:00 AM

Depart

Depart

Arrive

Flight #

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

CDV

Travel Time

One Way

Round Trip Departure City or Airport Code Arrival City or Airport Code

SUN M

T

W

TH

F

Submit

SAT

1 Adult 0 Seniors 65 +

STEP 3: FLIGHT SUMMARY Flight Itinerary and Payment Information

Advanced Search

Ease of Calendar Availability

STEP 1: PROVIDE FLIGHT DETAILS Departure & Arrival Cities, Number of Travelers, Travel Dates

STEP 2: SELECT FLIGHTS Departure & Arrival, Have the Ability to Modify Flight Search

Note: Layout Exemplifies Better Flight and Pricing Visibility for User

FLIGHT Congrats Payment Complete ITINERARY DEPART

RETURN

MAR 23

Step 2

Step 3

0:00 AM 0:00 AM

Depart Airport Arrive in City

Flight #000

$000

0:00 AM 0:00 AM

Depart Airport Arrive in City

Flight #000

$000

Print

Accomplish

Step 1 Step 2

Step 3

Message Indicating Payment Complete Ability to Print Page

Note: Pricing is Dominant for User

01Visual Narrative Scenario B

In their office, on the keyboard types in next business trip dates on Delta.com

Business Traveler PRIMARY USER GOAL: EASE OF USE

When the traveler is on the page to select flights; they would be very satisfied to have the availability to modify the initial flight information.

FLIGHT Select Departing Flight

FLIGHT Round Trip

One Way

Multi Way

SUN M

T

W

TH

F

SAT

Select Departing Flight

Departure City Arrival City

1 Adult

0 Seniors

Departure City

Arrival City

Optional: Multi City

Depart A Depart

Arrive

Flight #

0:00 AM

0:00 AM

000

Travel Time

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

rrive

F

light #

Travel Time

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

0:00 AM

0:00 AM

000

0h 00m

$000

$000

$000

$000

$000

$000

Select Returning Flight Depart A

rrive

F

light #

Travel Time

h

Has the ability to modify the search. Can modify the flight dates without having to start the process all over again.

scenario development

SUN

SUN M

T

M

W

T

TH

W

F

TH

F

SAT

SAT

Needs to modify travel dates

02 User Flow Flow Chart

Flowchart of the Virtual User Solution

index phase 1

select flights phase 2

review flight info

receipt

phase 3

select seats PLEASE NOTE:

The following ten pages exemplify the layouts the participants interacted with.

Once I structured each layout of the high fidelity prototype, I formed an interactive pdf to allow the testing participants to interact with the prototype as if it was a live website.

I created text fields for the users to type in their flight information along with interactive radio buttons to allow them to indicate their preference of choice for flight selections.

02 Prototype Low Fidelity

WORKING PAPER PROTOTYPES

It was nice to get the rough design off the screen and into hand to provide a closer look.

02 Prototype Low Fidelity

RESPONSIVE WEBSITE

The revised website will be responsive due to the target users using different sizes of devices, from monitor, netbook, to tablet.

02 Prototypes Working

CONTACT

Round Trip One Way Multi

Leaving From

Departure City or Airport Code

Departure Date

1 Adult

Arrival Date

0 Seniors 65 +

Going To

Arrival City or Airport Code

LOREM IPSUM LOREM IPSUM: ea consectetur adipisicing elit, sed do eiusmod tempor incididunt ut do labore et dolore magna aliqua. Ut enim ad minim veniam, quis ex ea nostrud exercitation ullamco Ut laboris nisi ut aliquip ex ea ex ea commodo consequat.

LOREM IPSUM: irure dolor in reprehenderit in Ut voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sit sit proident, sunt in culpa qui officia deserunt mollit anim id est non laborum Lorem ipsum dolor sit amet, consectetur LOREM IPSUM: elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation

CONCEPTUAL DEVELOPMENT

DIGITAL DEVELOPMENT

Screenshot of conceptual layout.

Screenshot of digital layout.