UX Project - Hotel Website

Download UX Project - Hotel Website

Post on 20-Jan-2017

131 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>UX Project: A Japanese Hotel Website</p><p>1</p></li><li><p>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.</p><p>2</p></li><li><p>PROCESS</p><p>1. Assessment Category Research Lean Canvas and Analysis</p><p>2. Brand Strategy User Goal Scenarios Define Problem and Opportunity</p><p>3. Design Strategy Define Brand Experience Strategy IA and Wireframing</p><p>UXMarketing</p><p>Branding</p><p>SEOUI</p><p>Contents Design</p><p>Transcreation</p><p>Copywriting</p><p>Graphic Design</p><p>Globalization</p><p>3</p></li><li><p>Why do travelers visit hotels website?</p><p>On a booking site they us for all </p><p>their travel needs.</p><p>Users Journey</p><p>Narrow down to a few choices. </p><p>Want more info of each hotel.</p><p>Visit hotels website to check out</p><p>Selection made. Go back to the booking site to </p><p>make a reservation. </p><p>Goal</p><p>help me make my hotel selection</p><p>SITUATION ASSESSMENT</p><p>4</p></li><li><p>Visit hotels website to check out</p><p>Selection made. Go back to the booking site to </p><p>make a reservation. </p><p>Make it effortless to find information thats not on the booking site Bring and end to my hotel search with irresistible visuals</p><p>ASSESSMENT</p><p>What prompts users to go from step 3 to step 4?</p><p>Users Journey Goal</p><p>5</p><p>= Convince me Logically and Emotionally </p><p>???</p></li><li><p>Problem Solution Unique Value Proposition</p><p>Unfair Advantage Customer Segments</p><p>1. High drop out rate due Japanese landing page. </p><p>2. Difficult to find information in the cluttered landing page </p><p>3. Japanese style reservation form is confusing to international travelers. </p><p>1. clearer bilingual site </p><p>2. Optimize information and user journey </p><p>3. Individual res. system for Eng/JPN</p><p>ZEN THERAPY MEETS MODERN COMFORT </p><p>3 PROMISES </p><p>1. All staff are bilingual </p><p>2. Lowest price guarantee for direct reservations </p><p>3. Personal concierge is assigned to take care of every travel needs.</p><p>No language selector </p><p>Simple reservation </p><p>Unique experience of a boutique hotel &amp; professional service</p><p>Men &amp; Women in their 20 - 40s. </p><p>Travel Savvy </p><p>Have used or are interested in using Airbnb. </p><p>Like to design own travel plans </p><p>Seek authentic local experience </p><p>worrisome about language barrier</p><p>Key Metrics Channels</p><p>1. Direct reservations </p><p>2. Travel sites reservations </p><p>3. Agency reservations</p><p>Travel sites (hotels.com, booking.com, expedia.com) </p><p>Review sites like tripadvisor.com </p><p>LEAN CANVASASSESSMENT (Lean Canvas)</p><p>6</p><p>http://hotels.comhttp://booking.comhttp://expedia.comhttp://tripadvisor.com</p></li><li><p>BRAND STRATEGY DEVELOPMENT</p><p>YES</p><p>neighborhood info</p><p>hotel reviews from credible </p><p>sources</p><p>chat bot with concierge</p><p>Enticing headlines about hotels </p><p>services.</p><p>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. </p><p>Use captivating headlines to further entice users to stay longer on the site. </p><p>Chat bot or concierge service to answer questions immediately and anonymously.</p><p>7</p></li><li><p>NO</p><p>Reservation form that follows on </p><p>page scroll</p><p>email/phone numbers </p><p>without stating the language </p><p>availability.</p><p>Membership point systems that </p><p>are irrelevant to foreigners.</p><p>low resolution images</p><p>BRAND STRATEGY DEVELOPMENT</p><p>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. </p><p>Phone number and Email should be listed with language availability. </p><p>Banner ads about point system, membership privileges could be confusing and disturbing to first time visitors and international travelers.</p><p>8</p></li><li><p>BRAND STRATEGY (COPYWRITING)</p><p>Hotels Main Copywriting </p><p>Zen Therapy Meets Modern Comfort </p><p>Keywords to be used throughout the site therapeutic dining experience magnificent view zen-focused interiors tailor-made service inspired by Japanese shrines </p><p>9</p></li><li><p>DESIGN STRATEGY</p><p>Main Color #41357D Sophistication Modern Japanese Calmness </p><p>Counter Colors #19838D Trust Restfulness </p><p>#3CC2D2 Tiffany Blue</p><p>Headline Font Avant Garde Thin, Excitement, Hip </p><p>Contents Font Lato (ENG) Thin, Clean, Modern </p><p>Hiragino (JP) 2px smaller than ENG</p><p>Design Principle Responsive Less Choice Whitespace Bilingual (No language switch button)</p><p>10</p></li><li><p>Wireframe </p><p>Parallax Effect Full View Key Visuals Simple Menu Bar Stress-Free IA</p><p>DESIGN STRATEGY</p><p>11</p></li><li><p>Design Photoshop Illustrator </p><p>Prototyping Justinmind </p><p>Editor Atom</p><p>Language HTML CSS 3 Javascript jQuery </p><p>Time 6 weeks</p><p>DEVELOPMENT OVERVIEW</p><p>12</p></li><li><p>13</p></li><li><p>FIRST VIEW</p><p> Striking, life-like image to spark emotion menu to appear on scroll review on rotation (javascript) no hamburger menu no reservation form</p><p>14</p></li><li><p>PARALLAX</p><p> SkyTree illustration to vertically disrupt the otherwise too automated parallax effect. </p><p> out-of-size SkyTree illustration to let users feel the enormous height of the tower </p><p> SkyTree illustration to create satisfaction of scrolling all the way till the end.</p><p>15</p></li><li><p> 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 </p><p>length and with a lot of whitespace around the paragraph.</p><p>BILINGUAL</p><p>16</p></li><li><p> Branded images</p><p>IMAGES</p><p>17</p></li><li><p> CSS animation On Hover - show bigger image - show image title </p><p>ANIMATION</p><p>18</p></li><li><p> transparency box to add depth</p><p>ANIMATION</p><p> microanimation on hover</p><p>19</p></li><li><p> Call-To-Action buttons in the accent color while keeping the harmony of the zen color palette</p><p>CTA</p><p>20</p></li><li><p> Numbered steps reduce stress of filling out the form</p><p>UX</p><p>21</p></li><li><p>English Reservation Form asks for departure date whereas Japanese form asks for number of nights.</p><p>LOCALIZE</p><p>22</p></li><li><p>CONTENTS</p><p>23</p></li><li><p>24</p></li><li><p>Thank you for visiting my page! Liv Ishige </p><p>livishige.com</p><p>25</p></li></ul>