travel
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
loveholidays<br />
Web App design
The Brief<br />
2<br />
The Challenge:<br />
UX and conceptualisation LH’s to allow users to focus on the most important content<br />
from it desktop experience but to omit the unnecessary into a clear and logical way.<br />
Involvement:<br />
Competitor Analysis, Moodpboard, Wireframes, UIElements, Visual design and<br />
presentations<br />
The Results:<br />
Develop a visual identity and interaction elements of user experiences, refining them<br />
towards a polished design, considering typography, iconography, layout and brand<br />
identity along the way.
Kayak<br />
3<br />
KAYAK is a <strong>travel</strong> search engine. KAYAK searches hundreds of <strong>travel</strong><br />
sites to help you find and book the flight or hotel that suits you best.<br />
Pos<br />
The mobile app has extras like a packing list and<br />
currency converter in addition to booking and<br />
searching for reservations.<br />
Cons<br />
Booking options on Kayak are limited. For<br />
example, you can't get a rental car with a vacation<br />
packages.
Travel Zoo<br />
4<br />
Travel deals and more discount <strong>travel</strong> packages from Travelzoo and<br />
no frills web design.<br />
Pos<br />
You can find hundreds more deals listed in<br />
various categories, such as flights, holidays,<br />
cruises, hotels and shows, and enticing deals<br />
Cons<br />
Have to register before you're shown the full<br />
details of the Top 20 deals. In many instances,<br />
Travelzoo doesn't elaborate on the deals it<br />
highlights, but just links you through to the<br />
providers' websites.
Airbnb<br />
5<br />
Airbnb not only received a beautiful new website and app in 2014, but<br />
a rebrand that helped position more of a focus on the company’s<br />
hosts and community.<br />
Pos<br />
New redesign helped flush out inconsistencies<br />
previously faced across desktop, mobile. Feels<br />
part of the same experience.<br />
Cons<br />
Know that the person you talk to in customer<br />
service is only concerned about their rules. It is<br />
like conversing with a computer. Very frustrating<br />
when trying to fix any error online.
User Profile<br />
Sarah
User Profile<br />
Sarah books a two week holiday to ibiza<br />
Age: 25<br />
Lives in London<br />
Shares house with friends<br />
Single<br />
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.<br />
What frustrates her is the overwhelming information she finds on here small screen She decides to wait till shes returns to her work<br />
computer. While on the trains platform she spots an Loveholidays.coms.com poster, she grabs her iphone and goes to the<br />
Loveholidays.coms.com mobile site.
User Profile<br />
Sarah books a two week holiday to ibiza<br />
Pre<br />
Engagement<br />
Enter Engage Exit<br />
Post<br />
Engagement<br />
Motivation<br />
Search<br />
Purchase<br />
Comfortable shopping<br />
online<br />
would buy off unknown<br />
e-retailers<br />
Search specific by entering “Ibizia” Auto<br />
suggestion function.<br />
Search Filtered by global categorisations<br />
Specify date and Adds products to<br />
checkout<br />
Emma tracks her order on her mobile<br />
UX Consideration<br />
UX Consideration<br />
UX Consideration<br />
Attention, Clarity, Good<br />
Imagery<br />
Ease of use, efficiency , speed<br />
Trust, security, good<br />
system feedback
UX Considerations<br />
The importance of quality of use…<br />
Efficient<br />
As she’s on the go speed important to<br />
complete task<br />
Useful<br />
Allow Sarah build on her knowledge without<br />
learning effort.<br />
Effective<br />
Successful completeness Sarah can<br />
achieve her goals.<br />
How can we help her<br />
use system<br />
Engaging<br />
Visual presentation, the number,<br />
functions and types of graphic<br />
images or colors<br />
Error Tolerant<br />
Make calculations correctly with minimal<br />
inputs<br />
Desirable<br />
Something meaningful and improves<br />
Sarah’s life
Moodboards
Photography and UX<br />
Our passion is <strong>travel</strong> and inspiring you to <strong>travel</strong><br />
LoveHolidays<br />
Photographer, Murad Osmann, has gained a cult following on<br />
Instagram after posting series of photos of his girlfriend leading<br />
him around the world
Photography and UX<br />
Colour, emotion and themes<br />
In the article Jakob discusses using real people vs<br />
stock, product photos , photo size and critically the<br />
importance of using photos that ‘carry<br />
information’.<br />
That final point is so important and is what you<br />
can ensure by taking a more strategic approach to<br />
planning & evaluating your photos.<br />
Once you understand what tasks people are trying<br />
to complete when they use your site you can<br />
provide them with photos that help them with way<br />
finding<br />
Airbnb doubled it revenue by improving photos
UI Elements - Basic<br />
Backgrounds<br />
Colour Palette<br />
Theme<br />
Theme: Cool, trendy, natural, flat design colourful<br />
Primary<br />
Background<br />
Style<br />
Clarity, realism, natural setting. Photos of real people (not shiny<br />
models) are important for believability. Using Sarah’s persona by<br />
adding her photos to illustrate her life and recent trip.<br />
Images<br />
Imagery, Dynamic, big, colourful, Natural settings, real.<br />
Headings Tags<br />
H1 Heading<br />
Buttons<br />
Normal<br />
Normal<br />
Normal<br />
Typography<br />
San- Serif-typefaces like Futura and Akzidenz Grotesk. The result is a<br />
humanistic, simplistic wording<br />
H2 Heading<br />
Tap<br />
Tap<br />
Tap<br />
H3 Heading <br />
H4 Heading <br />
Active<br />
Active<br />
Active<br />
Drop down<br />
Drop down<br />
Paragraph<br />
Paragraph text. Donec sed odio dui. Cras justo odio,<br />
Selecte<br />
Normal<br />
L<br />
dapibus ac facilisis in. Egestas eget quam. Maecenas<br />
faucibus mollis interdum maecenas faucibus. Cras mattis<br />
consectetur purus sit amet.<br />
Selecte<br />
Hover<br />
Norma
Wireframes
Wireframe UI Rationale<br />
Cognitive Load<br />
Reduce total amount of mental effort being<br />
used in the working memor<br />
Simplicity.<br />
If a design design elements does not need to<br />
there remove it<br />
Background Images Transitions<br />
An added layer to convey connection and<br />
meaning, help users understand the<br />
relationships between pleasure to <strong>travel</strong>.<br />
Where would you love to go today?<br />
Ibiza<br />
Search<br />
Search<br />
User enters a country in search field. This will<br />
display displays down “Auto suggestion ”list<br />
with all of the available countries: Balearic<br />
Islands, Ibizia.<br />
Content <br />
Display promotional banner times,<br />
information and offers
Bookings<br />
Efficient<br />
Allow the user to do the task quickly and the<br />
system can supports the users in carrying out<br />
their tasks like booking and paying.<br />
1.0<br />
Where would you love to<br />
Reset<br />
Menu icon.<br />
Tapping menu expands navigation menu, Holidays,<br />
Late Deals, About Us and “My booking” items.<br />
Any Destination<br />
Resets all form values<br />
Side Menu <br />
Any Departure Airport<br />
User selects a country from the Drop Down<br />
Depart from:<br />
dd<br />
/ /<br />
mm<br />
yy<br />
Date Picker<br />
Picker. This will display a drill-down list with all of<br />
the available countries: Balearic Islands, Ibiza.<br />
Flex<br />
7 Nights<br />
is tied to user input field. Tap on the input field will to<br />
open calendar in a small overlay. Displays up to four<br />
independent wheels, each of which displays values in<br />
Any Board Basis<br />
a dd/mm/yy category<br />
Adults 1<br />
Children<br />
0<br />
Rooms<br />
0
Visuals
Prototype<br />
22%<br />
22%<br />
22%<br />
loveholidays.com<br />
loveholidays.com<br />
loveholidays.com<br />
BELL<br />
4:21 PM<br />
22%<br />
BELL<br />
4:21 PM<br />
22%<br />
loveholidays.com<br />
loveholidays.com<br />
Where would you love to go?<br />
Reset<br />
Where would you love to go?<br />
Reset<br />
Where would you love to go?<br />
Reset<br />
Any Destination<br />
Any Board Basis<br />
Any Departure Airport<br />
Adults<br />
1<br />
Depart from<br />
dd<br />
/<br />
/<br />
mm<br />
yy<br />
Children 0<br />
Any Destination<br />
Flex<br />
Rooms 0<br />
Any Departure Airport<br />
7 Nights<br />
Search<br />
User selects a country from the<br />
Drop Down Picker. This will<br />
display a drill-down list with all of<br />
the available countries: Balearic<br />
Islands, Ibiza.<br />
User enters time and date for<br />
booking and <strong>travel</strong> information.<br />
User selects search. Enter search<br />
result screen based on user<br />
criteria.
Design Rationale<br />
Menu<br />
The idea behind the hamburger<br />
menu is that you can use it to hide<br />
site navigation on smaller screens<br />
Carousels<br />
Fully responsive. Scales with its<br />
container at each breakpoint<br />
Side Menu<br />
Keep the screen clean, the application<br />
benefits by showing only the core<br />
information, functionality, group and sub<br />
level menu items, and hide the rest but<br />
make it available on demand.<br />
Emphasis<br />
Oversized button and drop menus to<br />
show different levels of emphasis
Design Rationale<br />
Photography<br />
Once you understand what tasks<br />
people are trying to complete when<br />
they use your site you can provide<br />
them with photos that help them<br />
with way finding<br />
Auto Suggestion<br />
Use as-you-type suggestions (autocomplete,<br />
auto-suggest, and instant<br />
results) ... This is invaluable in mobile<br />
contextsSimplicity rules!<br />
Ghost Buttons<br />
Transparent, clickable items as simple<br />
as a button could lighten the design
Guerrilla Testing
Guerrilla Testing<br />
loveholidays.com<br />
22%<br />
Background<br />
Guerrilla testing works well to quickly validate how effective a<br />
design is on its intended audience, whether certain<br />
functionality works in the way it is supposed to, or even<br />
establishing whether a brand or proposition is clear?<br />
Results<br />
From 10 participants in first round of guerrilla testing<br />
Customers feedback regarding new design improvements<br />
Where would you love to go?<br />
Reset<br />
Question Sample<br />
Your best friend recommended using LoveHolidays online<br />
which was She/He finds the booking her holiday work well<br />
and you decide to try it out yourself.<br />
Please view the homepage<br />
First Impression?<br />
What do you think you can you do here? (Please think aloud)<br />
What do you expect do next?<br />
Any Destination<br />
Any Departure Airport<br />
Booking filters<br />
What do you think you can you do here? (Please think aloud)<br />
What do you expect will happen next?<br />
Why?<br />
Which steps do you expect once a booking is created?<br />
0 17.5 35 52.5 70<br />
5 stars or more 4 stars 3 stars<br />
2 stars 1 star
Thank you
Change language