Ryokan Webpage for OTA Website
Webpage Description
Ryokans in Japan are considered a cultural symbol of Japanese traditions and hospitality. Japanese and foreigners visit ryokan to experience the local cuisine and historic neighborhoods.
Marusen is a luxury Japanese ryokan that features an onsen, delicious sea food and cultural spots from temples to mountains. The webpage highlights the best features of the ryokan to potential users. This webpage also acts as an entry gate to other pages including the booking page in the online travel agent (OTA) website.
Ryokan Features
● Indoor and outdoor onsen
● Fresh seafood from the nearby ocean
● Amenities for visiting guests
● Activities like karaoke rooms
● Natural and historical tourist areas
UX Research Methods
Online Research
I researched online to learn about the online travel agent. I outlined some key factors like the biography of the traffic and competitors. I also did some background research on the history of ryokans and the importance of them being an iconic symbol for Japan.
User Interviews
I conducted some short user interviews with Japanese and foreigners to find out their personal experiences with ryokans. Going deeper into the funnel gave me a more empathic view from the prospective of the users and when and why they prefer going to ryokans.
User Journey Map
The information I gathered from the UX research indicated that the average user using this OTA site and who are interested in booking ryokans are Japanese families. I outlined a persona with a scenario having some goals and expectations while looking for and booking a stay.
Problem Statement
“How can we assist the users to get all the information they need about the ryokan and send them to the booking screen?”
Card Sorting of Sections
The ryokan has a lot of features and information for the guests. To build a good information architecture I created cards with just the section headings. Then I asked the users to give me their top 5 sections and priority. I was then able to see what people are most looking for and what significance these sections hold to the overall decision making process of the users.
UI Design Process
Rough Sketches
Drawing out some sketches helps me visualize the layout and helps me also run some quick tests to confirm the information architecture.I can change mistakes easily and re-do screens without spending too much time and resources.
Inspiration Boards
Before I decide on a theme and the visuals I like to put together an inspiration board. An inspiration board updates me on existing apps and other related visuals. I can also evaluate other apps and see what works and what doesn’t to adapt or drop solutions.
Color and Theme
The ryokan carries a dark, classic, and traditional Japanese theme. I created a color palette which can compliment colors of nature, wood, hot-springs and the colors of the ryokan itself.
Typography
To support the colors and the theme set out. I chose 2 types of fonts. The accent font being dramatic and bold helps the titles stand out. The primary font being easier to read and standard.
I also aligned the text vertically to really bring out the traditional Japanese style in the webpage.
UI Screen Design
Testing
I prepared a few questions before hand and then approached a few users and asked them think out loud and navigate between the webpage. I took rough notes on their narration and outlines the most common user pain points. I then created a priority list to make decisions for improvement keeping in mind the set deadlines.
Final Thoughts
Using HTML/CSS I developed the webpage to be uploaded online. In this process I added some animations, made the header sticky to improve user engagement and usability. The most important lesson learned during this project was to incorporate UX methods to improve the information architecture and the prioritization of sections. Although this project was to develop a webpage that substitutes a brochure I think this webpage has the potential of doing more than that. To increase the usability of the webpage we can develop more interactive elements and further condense the information for more quick view and reduce the scroll activity of the users.