AVIOS new flight selection page

Process to follow Step 4 Test and Refine Step 3 Prototype Step 2 Rough Wireframe Step 1 Card Sort Card Sort Balsamiq style “dirty” wireframe Photoshop prototype HTML/CSS etc model A/B test and heatmap in follow up

New flight selection page – Data available Destinations Departure Airports Availability of destinations across 365 days by flight class Destination image Destination content e.g. title, description Destination region Destination type e.g. beach, city, cultural Cost Flight time Destination weather averages

Assume a card sort was implemented

Title and Content Layout with Table Location information and Date selections are grouped as highest importance. Price is also important but we should consider HOW obvious to make it. Other info like weather is still useful, but probably not needed on the front screen. Group 1Group 2Group 3 Location556 Dates565 Price445 Other223

The Sketch The first doodles.

First ideas, chat with the team, basic research… Sketch of Site Using Card Sort Results

The Wireframe Rough and ready, runs along the card sort.

Firm up layout, without actual assets Balsamiq Sketch 1Balsamiq Sketch 2

The Prototype Uses real assets, proportions and so on.

Dropdowns to select the main details of the flights. Information presented in one place. Each selection filters down the blue blobs that appear on the map below. When the user clicks on a blue blob, the pop-up box appears with some info, a summary and a price range. The price range is here so the user doesn’t “waste time” but also so we allow investment in the dream before advertising the cost. The orange selector buttons will use AVIOS’s current offers or deals to pre-select some destinations.

If the user clicks a location blob with refining the filter enough for the database to present flight time options, then the box that appears is dynamic to this situation. This will be the same if user clicks and inspiration button with refining by date.

Responsive The site needs to be responsive, and mobile friendly.

Mobile and Tablets For the mobile/tablet site, we have a spinning wheel that can be used to select the date of leaving and return. Spinning and then tapping on the word/number when highlighted confirms the selection. The Destination box is an autocomplete search box. When a destination is selected, the image in the centre of the dial reflects the choice. The advantage of this is that it can be used with one thumb and drop downs are horrible for mobile use. NB I have darkened the app in order to simulate a flash when the desired month or day is selected. Due to the 1 second attention span before users think the page is broken, the flash indicates it is loading.

Testing Decide upon and measure objective KPI’s.

Drop downs are not always the best option, especially once the number of child levels go above around 15 items. These may need to changed to search boxes that autocomplete. However, because the user is able to see the destinations appear on the map, then only the departure airport needs to be set. For the most part, this can be limited by IP to country and then selected from the dropdown. Making the menu click on/click off or multiple levels may help. The orange buttons may not be obviously clickable and not SEO friendly. This will need testing.

A/B, Multivariate, Heatmaps and Personas I want to know what Michelle, 45, from Tonbridge, thinks about the site, how it works for her and what doesn’t. Useless facts about her lifestyle are distractions, I want to track and monitor how she uses our specific site and how it be improved for her. Hence I use IP sorting, A/B and Multivariate testing, heatmaps, analytics and feedbacks forms

Final Thoughts

Home 2.1 Section Nav 3.0 Global Nav 3.1 Section Nav4.1 Section Nav 5.0 Global Nav 6.0 Global Nav 6.1 Section Nav 7.0 Global Nav 1.0 Global Nav 1.2 Section Nav 1.1 Section Nav Sub-section Sub-section Sub-section Sub-section Sub-section Sub-section Sub-section 4.0 Global Nav Sub-section 5.1 Section Nav Sub-section 6.2 Section Nav Sub-section 7.1 Section Nav Sub-section Sub-section Nav LEVEL 1 LEVEL 2 & 3 Sub-section Nav Sub-section Sub-section Nav Sub-section LEVEL 4 & 5 Sub-section Nav 2.0 Global Nav Sub-section Sub-section Nav Where this pages fits in the website hierarchy is important for top navigation and general styling concerns. Where we decide to place this page is also vital for the user journey and require another round of testing and discussion. (SEE IMAGE BELOW) Ideally this page would sync up with your points balance or previously selected favorites like departure airport and class. In this way, the selection is personalized. The use of social sharing and feedback is key, but needs to be subtle and tasteful or it will impact UX. Personalization and being in an “always logged in” state are key cornerstones for improving the user journey