Download - UX Project - Hotel Website
UX Project: A Japanese Hotel Website
1
As a frequent traveler, I am always planning for my next trip in my head. And as a traveler, I often wonder why Japanese hotel websites are so difficult to navigate for non-Japanese speakers. For an industry where a globalization should be standardized and advanced than others, I find this to be precarious. So I took it upon myself to analyze the typical UX issues that Japanese hotel websites have and tackle the ux problems.
2
PROCESS
1. Assessment → Category Research → Lean Canvas and Analysis
2. Brand Strategy → User Goal Scenarios → Define Problem and Opportunity
3. Design Strategy → Define Brand Experience Strategy → IA and Wireframing
UXMarketing
Branding
SEOUI
Contents Design
Transcreation
Copywriting
Graphic Design
Globalization
3
Why do travelers visit hotel’s website?
On a “booking site” they us for all
their travel needs.
User’s Journey
Narrow down to a few choices.
Want more info of each hotel.
Visit hotel’s website to check out
Selection made. Go back to the booking site to
make a reservation.
Goal
“help me make my hotel selection”
SITUATION ASSESSMENT
4
Visit hotel’s website to check out
Selection made. Go back to the booking site to
make a reservation.
”Make it effortless to find information that’s not on the booking site” “Bring and end to my hotel search with irresistible visuals”
ASSESSMENT
What prompts users to go from step 3 to step 4?
User’s Journey Goal
5
= Convince me Logically and Emotionally
???
Problem Solution Unique Value Proposition
Unfair Advantage Customer Segments
1. High drop out rate due Japanese landing page.
2. Difficult to find information in the cluttered landing page
3. Japanese style reservation form is confusing to international travelers.
1. clearer bilingual site
2. Optimize information and user journey
3. Individual res. system for Eng/JPN
ZEN THERAPY MEETS MODERN COMFORT
3 PROMISES
1. All staff are bilingual
2. Lowest price guarantee for direct reservations
3. Personal concierge is assigned to take care of every travel needs.
No language selector
Simple reservation
Unique experience of a boutique hotel & professional service
Men & Women in their 20 - 40s.
Travel Savvy
Have used or are interested in using Airbnb.
Like to design own travel plans
Seek authentic local experience
worrisome about language barrier
Key Metrics Channels
1. Direct reservations
2. Travel sites reservations
3. Agency reservations
Travel sites (hotels.com, booking.com, expedia.com)
Review sites like tripadvisor.com
LEAN CANVASASSESSMENT (Lean Canvas)
6
BRAND STRATEGY DEVELOPMENT
YES
neighborhood info
hotel reviews from credible
sources
chat bot with concierge
Enticing headlines about hotel’s
services.
Grab attention of the user immediately on the first view logically: add hotel’s positive reviews from internationally recognized and credible sources emotionally: striking image that’s high res and life-like.
Use captivating headlines to further entice users to stay longer on the site.
Chat bot or concierge service to answer questions immediately and anonymously.
7
NO
Reservation form that follows on
page scroll
email/phone numbers
without stating the language
availability.
Membership point systems that
are irrelevant to foreigners.
low resolution images
BRAND STRATEGY DEVELOPMENT
Reservation form that stays afloat is destructive for users who are simply looking for more information about the hotel. For users who come from their choice of travel booking site, the goal of the site visit is not to make a reservation there.
Phone number and Email should be listed with language availability.
Banner ads about point system, membership privileges could be confusing and disturbing to first time visitors and international travelers.
8
BRAND STRATEGY (COPYWRITING)
Hotel’s Main Copywriting
Zen Therapy Meets Modern Comfort
Keywords to be used throughout the site • therapeutic dining experience • magnificent view • zen-focused interiors • tailor-made service • inspired by Japanese shrines
• デザイナーズホテル • おもてなし • 極上の時間 • 心と身体を癒す • 優雅なバスタイム
9
DESIGN STRATEGY
Main Color #41357D Sophistication Modern Japanese Calmness
Counter Colors #19838D Trust Restfulness
#3CC2D2 Tiffany Blue
Headline Font Avant Garde Thin, Excitement, Hip
Contents Font Lato (ENG) Thin, Clean, Modern
Hiragino (JP) 2px smaller than ENG
Design Principle Responsive Less Choice Whitespace Bilingual (No language switch button)
10
Wireframe
Parallax Effect Full View Key Visuals Simple Menu Bar Stress-Free IA
DESIGN STRATEGY
11
Design → Photoshop → Illustrator
Prototyping → Justinmind
Editor → Atom
Language → HTML → CSS 3 → Javascript → jQuery
Time → 6 weeks
DEVELOPMENT OVERVIEW
12
13
FIRST VIEW
• Striking, life-like image to spark emotion • menu to appear on scroll • review on rotation (javascript) • no hamburger menu • no reservation form
14
PARALLAX
• SkyTree illustration to vertically disrupt the otherwise too “automated” parallax effect.
• out-of-size SkyTree illustration to let users feel the enormous height of the tower
• SkyTree illustration to create satisfaction of scrolling all the way till the end.
15
• Japanese is always on the left, English is always on the right. Eyes stay on one side of the screen throughout the site. • right-alignment is legible when shorter than 30-characters
length and with a lot of whitespace around the paragraph.
BILINGUAL
16
• Branded images
IMAGES
17
• CSS animation On Hover - show bigger image - show image title
ANIMATION
18
• transparency box to add depth
ANIMATION
• microanimation on hover
19
• Call-To-Action buttons in the accent color while keeping the harmony of the zen color palette
CTA
20
• Numbered steps reduce stress of filling out the form
UX
21
English Reservation Form asks for “departure date” whereas Japanese form asks for “number of nights.”
LOCALIZE
22
CONTENTS
23
24
Thank you for visiting my page! Liv Ishige
livishige.com
25