Susanna Walker, Project 15 FLY UX wireframes for desktop Overview, linear process
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Susanna Walker, Project 15FLY UX wireframes for desktop
Overview, linear process
FLY UX wireframes for mobile application Page 1
Landingpage
SLIDEBARDefault: ”Return” with orange background, white text. Default ”one way” and ” other cities”, white background, black text.On slide left, ”one way” becomes orange. On slide right, ”other cities” becomes orange.
TO AND FROM CITYIf new to site: autofill closest airport. If return visitor: autofill most recent search. On selection go to next screen, search city.To: Autofill most recent search. Otherwise destination on sale from chosen departure airport.
FROM FIELD:On hover, dropdown menu appears with blinking cursor. Validation occurs after cursor leaves field. Error message: Please enter valid airport.
When starting to type... three options of finding air-port: If typed airport name, shortening or country... display dropdown list of alp-habetical options of airports appear. i.e. Stockholm, ARN or Sweden.
On selection in dropdown-list: Go back to hompage and autofill airport info.
DISCOVER If selected takes me to page with travel options and presentations of destinations.MY TRIPS If selected takes me to page with already booked trips.SUPPORT If selected takes me to Customer support, QnA etc.LOG IN If selected takes me directly to log in page.SEARCH If selected takes me to search page with advertisements of different destinations, rebates, offers etc.LANGUAGE Click to get dropdown menu with available languages and currencies.
Search city
DATESAutofill: Display of todays date and three days ahead.Hover over opens calendar dropdown.
LOWCOST-CALENDAR Click takes me to lowcost-calendar.
PASSENGERS Autofill: Display of 2 passengers. Tap takes me to lowcostcalendar.
SEARCHOn click progress indicator rotates.
FLY UX wireframes for mobile application Page 2
Search city return
TO FIELD:Same as From field.
Only show destinations that are available from original airport.
On selection in dropdown-list: Go back to hompage and autofill airport info.
Calendar
CALENDAROn hover, scrollable side to side, months in order. Autostart with todays date/month.
When hovering over numbers, departure date becomes orange with white let-ters. After click departure date, mouse tracks light orange line to cover dates when travelling.
Calendar2
When click on end date, it becomes orange and all dates in between light orange with grey letters. End click also takes me to homepage again and validates new dates in date display.
FLY UX wireframes for mobile application Page 3
PASSENGERSOn hover, a dropdown menu appears. Display 2 adults as default. If minus button is clicked, display 1 (2-1). If plus button is clicked, display 3 (2+1).
Autofill the other passenger options as 0 (none).
Autoselect Economy. Orange button with white text.
Lowcostcalendar
LOWCOSTCALENDAROn hover, scrollable right/left with dates/months in order. Datecolumns symbolizes price. All datecolumns are orange except chosen ones that are grey.Tap a datecolumn and it changes to grey. The latest chosen one then becomes orange.
From/Return heading is autofilled with selected airports.
X closes Lowcostcalendar window.
Passengers
Waiting
Waiting for 3 sec, then automatically goes to next screen, select flight. Progress indicator rotates.
FLY UX wireframes for mobile application Page 4
Select flight
SELECT FLIGHTScrollable right/left with dates in order. Current date, displayed larger than the others. Click date to select. Current date has times/flight options listed below.
Step-by-step indicator in seven segments. White circles = stages left, Orange circles = stages already visited.
Tap orange area to select flight. Autofill onto ”Validation” on top of page.
Validation for your search. ”Edit search” area takes you back to homepage.Hover over other white areas gives you dropdown to search again.
Lowcostcalendar in a smaller format (se Lowcost-calendar for info).
Total price changes when adding items.
Select flight return
FLY UX wireframes for mobile application Page 5
Seat outbound
Validaton of seat description appears on hovering.
Click on seat to select. Selection is only possible for white and light orange seats.
Seat outbound1
Validaton of seat number in black.Same process for return flight.
Seat outbound2
Click to select seats for return flight.
SEATSScroll drawing of plane up and down to view more seats. Autofill orange for selected random chosen seat for right amount of passengers.
View ”seat outobund1” on hovering.
Click to pick other seats.Orange autofilled seats then becomes filled with white instead and cursor lookes like a seat ready to be placed on the screen until clicked on a seat.
Autofill info from validation.
FLY UX wireframes for mobile application Page 6
Baggage
Meals
Extras
BAGGAGEAutoselected with an X. Select another box to unselect the autoselected box.
Click to continue.
MEALSAutoselect ”No meals”.
Scroll down to see many different options.
When selected a orange X will appear and auto-selected No meals will be unselected.
Same for both flights, outbound and return.
No autoselected option.
When selected a orange X will appear and you will go to a page with offers in that chosen cate-gory.
Tap here to skip and go to next screen.
FLY UX wireframes for mobile application Page 7
Register or Login
REGISTER OR LOGINOn selection highlight field. Cursor in selected state. Only letters available in the field, no numbers or special characters. Validation occurs after cursor leaves field. Error message: Please remove numbers and special characters or you must complete this field to continue.
Display green ”tick” if valid is entered.
Hint text: [email protected] removed when click field. Cursor in selected state.
Show dropdown of three recently used email addreses on click.
Validation occurs after cursor leaves field when input does not match standard email format. Error message: Please enter valid email address.You must complete this field to continue.
On selection, highlight field, display cursor ready for text input. Show password by default.
Validation when creating password: ”The password has to be at least seven letters and 2 numbers”.
Validation occurs after cursor leaves field. Error message: This password is incorrect, please try another password.
Display green ”tick” if valid is entered.
Same info for the next field - Confirm password.
Create new account
Autofill name removed if click field. Cursor in selected state. Only letters available in the field, no numbers or special characters. Mandatory field. Validation occurs after cursor leaves field. Error message: Please remove numbers and special characters or you must complete this field to continue. Display green ”tick” if valid is entered.
Autofill email removed if click field. Cursor in selected state. Show dropdown of three recently used email addresses on click.
Validation occurs after cursor leaves field when input does not match standard email format. Error message: Please enter valid email address.You must complete this field to continue.Display green ”tick” if valid is entered.
On selection highlight field. Cursor in selected state. Autosuggest street addresses recently used in dropdown menu. If your address is not in the dropdown menu, you can type it manually. Error message: Please enter your address. Validation occurs after cursor has left field, when input is empty. Display green ”tick” if valid is entered.Error message: You must provide an address to continue.
Autofill postal code, city, coun-try from selected street address, or type it manually.Change keypad to numeric for postal code field.Display green ”tick” if valid is entered.
Option to click box or leave blank. Clicked box: X appear. Email-address gets stored in FLU UX database.
Takes you to payment.
Click here to skip to login page.
Click here to say ok to terms. Can not go further without clicking the box.
Takes you to next page, create account.
FLY UX wireframes for mobile application Page 8
Log in
Hint text email removed if click field. Cur-sor in selected state. Username: Optional emailaddress or other username. Show dropdown of three recently used email addreses on click.
Validation occurs after cursor leaves field. Error message if left blank: Please enter a username.You must complete this field to continue.
Display green ”tick” if valid is entered.
On selection, highlight field, display cursor ready for text input. Display letters when typing, not dots.Validation occurs after cursor leaves field. Error message if left blank: Please enter password. Error message if invalid password is entered: Please enter valid password with minimum seven letters and two numbers.
Display green ”tick” if valid is entered.
PASSENGERAutofill name removed if click field. Cursor in selected state. Only letters available in the field, no numbers or special characters. Validation occurs after cursor leaves field. Error message: Please remove numbers and special cha-racters or you must complete this field to continue.
Display green ”tick” if valid is entered.
Cursor in selected state. Only letters available in the field, no numbers or special characters. Validation occurs after cursor leaves field. Error message: Please remove numbers and special cha-racters or you must complete this field to continue.
Display green ”tick” if valid is entered.
Passenger info and payment
Option to click box or leave blank.Clicked box: X appear. Information about logged in user is stored in database.
If clicked, an email is sent to the user with option to enter new username or option to re-set password.
Click here to edit contact information of logged in user. Takes you to a page with current contact details.
Validation of everything included in the total cost.
PAYMENTUpon selection, highlight the chosen payment method. Credit card option as default.
Upon selection, high-light field. Only allow numbers - no letters or special characters.Numbers are auto-for-matted into four groups of four numbers in each with a space between.Validation occurs after cursor leaves field. Error message: I´m sorry, the card you have entered appears not to be valid. Please try again.
Display green ”tick” if valid is entered.
Upon selection, highlight field. Only allow numbers - no letters or special characters. Maximum of 3 numbers.Validation occurs after cursor leaves field. Error message: Please enter the three digit number on the back of your card. Please try again.
Display green ”tick” if valid is entered.
Upon selection, highlight field. Only allow numbers - no letters or special characters.Numbers are auto-formatted into two groups of two with a ”/2 in between: MM/YY.Validation occurs after cursor leaves field. Error message: Please enter a valid expiry date on the back of your card.
Display green ”tick” if valid is entered.
Cursor in selected state. Only letters available in the field, no numbers or special characters. Mandatory field. Validation occurs after cursor leaves field. Error message: Please remove numbers and special characters.
Display green ”tick” if valid is entered.
FLY UX wireframes for mobile application Page 9
End frame
Option to select. If selected takes you to page with info and discription of each option.Click anywhere else on the page, and you go back to the start.
Related Documents
