ux project - hotel website

Download UX Project - Hotel Website

Post on 20-Jan-2017

131 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

  • 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 hotels website?

    On a booking site they us for all

    their travel needs.

    Users Journey

    Narrow down to a few choices.

    Want more info of each hotel.

    Visit hotels 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 hotels website to check out

    Selection made. Go back to the booking site to

    make a reservation.

    Make it effortless to find information thats 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?

    Users 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

    http://hotels.comhttp://booking.comhttp://expedia.comhttp://tripadvisor.com

  • BRAND STRATEGY DEVELOPMENT

    YES

    neighborhood info

    hotel reviews from credible

    sources

    chat bot with concierge

    Enticing headlines about hotels

    services.

    Grab attention of the user immediately on the first view logically: add hotels positive reviews from internationally recognized and credible sources emotionally: striking image thats 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)

    Hotels 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