travel

robertanthonyuk

loveholidays

Web App design


The Brief

2

The Challenge:

UX and conceptualisation LH’s to allow users to focus on the most important content

from it desktop experience but to omit the unnecessary into a clear and logical way.

Involvement:

Competitor Analysis, Moodpboard, Wireframes, UIElements, Visual design and

presentations

The Results:

Develop a visual identity and interaction elements of user experiences, refining them

towards a polished design, considering typography, iconography, layout and brand

identity along the way.


Kayak

3

KAYAK is a travel search engine. KAYAK searches hundreds of travel

sites to help you find and book the flight or hotel that suits you best.

Pos

The mobile app has extras like a packing list and

currency converter in addition to booking and

searching for reservations.

Cons

Booking options on Kayak are limited. For

example, you can't get a rental car with a vacation

packages.


Travel Zoo

4

Travel deals and more discount travel packages from Travelzoo and

no frills web design.

Pos

You can find hundreds more deals listed in

various categories, such as flights, holidays,

cruises, hotels and shows, and enticing deals

Cons

Have to register before you're shown the full

details of the Top 20 deals. In many instances,

Travelzoo doesn't elaborate on the deals it

highlights, but just links you through to the

providers' websites.


Airbnb

5

Airbnb not only received a beautiful new website and app in 2014, but

a rebrand that helped position more of a focus on the company’s

hosts and community.

Pos

New redesign helped flush out inconsistencies

previously faced across desktop, mobile. Feels

part of the same experience.

Cons

Know that the person you talk to in customer

service is only concerned about their rules. It is

like conversing with a computer. Very frustrating

when trying to fix any error online.


User Profile

Sarah


User Profile

Sarah books a two week holiday to ibiza

Age: 25

Lives in London

Shares house with friends

Single

Sarah is 25-year-old Junior Associate at a law firm in the City. She shares a house in the east end of London with 3 of her friends.

What frustrates her is the overwhelming information she finds on here small screen She decides to wait till shes returns to her work

computer. While on the trains platform she spots an Loveholidays.coms.com poster, she grabs her iphone and goes to the

Loveholidays.coms.com mobile site.


User Profile

Sarah books a two week holiday to ibiza

Pre

Engagement

Enter Engage Exit

Post

Engagement

Motivation

Search

Purchase

Comfortable shopping

online

would buy off unknown

e-retailers

Search specific by entering “Ibizia” Auto

suggestion function.

Search Filtered by global categorisations

Specify date and Adds products to

checkout

Emma tracks her order on her mobile

UX Consideration

UX Consideration

UX Consideration

Attention, Clarity, Good

Imagery

Ease of use, efficiency , speed

Trust, security, good

system feedback


UX Considerations

The importance of quality of use…

Efficient

As she’s on the go speed important to

complete task

Useful

Allow Sarah build on her knowledge without

learning effort.

Effective

Successful completeness Sarah can

achieve her goals.

How can we help her

use system

Engaging

Visual presentation, the number,

functions and types of graphic

images or colors

Error Tolerant

Make calculations correctly with minimal

inputs

Desirable

Something meaningful and improves

Sarah’s life


Moodboards


Photography and UX

Our passion is travel and inspiring you to travel

LoveHolidays

Photographer, Murad Osmann, has gained a cult following on

Instagram after posting series of photos of his girlfriend leading

him around the world


Photography and UX

Colour, emotion and themes

In the article Jakob discusses using real people vs

stock, product photos , photo size and critically the

importance of using photos that ‘carry

information’.

That final point is so important and is what you

can ensure by taking a more strategic approach to

planning & evaluating your photos.

Once you understand what tasks people are trying

to complete when they use your site you can

provide them with photos that help them with way

finding

Airbnb doubled it revenue by improving photos


UI Elements - Basic

Backgrounds

Colour Palette

Theme

Theme: Cool, trendy, natural, flat design colourful

Primary

Background

Style

Clarity, realism, natural setting. Photos of real people (not shiny

models) are important for believability. Using Sarah’s persona by

adding her photos to illustrate her life and recent trip.

Images

Imagery, Dynamic, big, colourful, Natural settings, real.

Headings Tags

H1 Heading

Buttons

Normal

Normal

Normal

Typography

San- Serif-typefaces like Futura and Akzidenz Grotesk. The result is a

humanistic, simplistic wording

H2 Heading

Tap

Tap

Tap

H3 Heading

H4 Heading

Active

Active

Active

Drop down

Drop down

Paragraph

Paragraph text. Donec sed odio dui. Cras justo odio,

Selecte

Normal

L

dapibus ac facilisis in. Egestas eget quam. Maecenas

faucibus mollis interdum maecenas faucibus. Cras mattis

consectetur purus sit amet.

Selecte

Hover

Norma


Wireframes


Wireframe UI Rationale

Cognitive Load

Reduce total amount of mental effort being

used in the working memor

Simplicity.

If a design design elements does not need to

there remove it

Background Images Transitions

An added layer to convey connection and

meaning, help users understand the

relationships between pleasure to travel.

Where would you love to go today?

Ibiza

Search

Search

User enters a country in search field. This will

display displays down “Auto suggestion ”list

with all of the available countries: Balearic

Islands, Ibizia.

Content

Display promotional banner times,

information and offers


Bookings

Efficient

Allow the user to do the task quickly and the

system can supports the users in carrying out

their tasks like booking and paying.

1.0

Where would you love to

Reset

Menu icon.

Tapping menu expands navigation menu, Holidays,

Late Deals, About Us and “My booking” items.

Any Destination

Resets all form values

Side Menu

Any Departure Airport

User selects a country from the Drop Down

Depart from:

dd

/ /

mm

yy

Date Picker

Picker. This will display a drill-down list with all of

the available countries: Balearic Islands, Ibiza.

Flex

7 Nights

is tied to user input field. Tap on the input field will to

open calendar in a small overlay. Displays up to four

independent wheels, each of which displays values in

Any Board Basis

a dd/mm/yy category

Adults 1

Children

0

Rooms

0


Visuals


Prototype

22%

22%

22%

loveholidays.com

loveholidays.com

loveholidays.com

BELL

4:21 PM

22%

BELL

4:21 PM

22%

loveholidays.com

loveholidays.com

Where would you love to go?

Reset

Where would you love to go?

Reset

Where would you love to go?

Reset

Any Destination

Any Board Basis

Any Departure Airport

Adults

1

Depart from

dd

/

/

mm

yy

Children 0

Any Destination

Flex

Rooms 0

Any Departure Airport

7 Nights

Search

User selects a country from the

Drop Down Picker. This will

display a drill-down list with all of

the available countries: Balearic

Islands, Ibiza.

User enters time and date for

booking and travel information.

User selects search. Enter search

result screen based on user

criteria.


Design Rationale

Menu

The idea behind the hamburger

menu is that you can use it to hide

site navigation on smaller screens

Carousels

Fully responsive. Scales with its

container at each breakpoint

Side Menu

Keep the screen clean, the application

benefits by showing only the core

information, functionality, group and sub

level menu items, and hide the rest but

make it available on demand.

Emphasis

Oversized button and drop menus to

show different levels of emphasis


Design Rationale

Photography

Once you understand what tasks

people are trying to complete when

they use your site you can provide

them with photos that help them

with way finding

Auto Suggestion

Use as-you-type suggestions (autocomplete,

auto-suggest, and instant

results) ... This is invaluable in mobile

contextsSimplicity rules!

Ghost Buttons

Transparent, clickable items as simple

as a button could lighten the design


Guerrilla Testing


Guerrilla Testing

loveholidays.com

22%

Background

Guerrilla testing works well to quickly validate how effective a

design is on its intended audience, whether certain

functionality works in the way it is supposed to, or even

establishing whether a brand or proposition is clear?

Results

From 10 participants in first round of guerrilla testing

Customers feedback regarding new design improvements

Where would you love to go?

Reset

Question Sample

Your best friend recommended using LoveHolidays online

which was She/He finds the booking her holiday work well

and you decide to try it out yourself.

Please view the homepage

First Impression?

What do you think you can you do here? (Please think aloud)

What do you expect do next?

Any Destination

Any Departure Airport

Booking filters

What do you think you can you do here? (Please think aloud)

What do you expect will happen next?

Why?

Which steps do you expect once a booking is created?

0 17.5 35 52.5 70

5 stars or more 4 stars 3 stars

2 stars 1 star


Thank you

More magazines by this user
Similar magazines