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