Stayrajaampat.com promotes ecotourism in the Raja Ampat region of Indonesia. It started as a touristic guide to the region, advocating for responsible tourism. It has propelled a boom in locally-run ecotourism, creating business opportunities for locals, and incentive to value and protect their environment. They decided to add a booking feature so travellers so they can directly book accommodation directly with homestay owners. This gave an opportunity for a redesign improving overall user experience, filtering accommodation listings, and better expressing their missions of sustainable ecotourism and marine conservation.
Project Scope
User Experience
The primary and original goal was adding a booking feature to accommodation listings. This affected the accommodation listing page, the accommodation detail pages, and was a good opportunity to reconsider the accommodation search bar on the home page and the result filters.
User Interface
In addition to the UX changes, I was asked to update and improve the overall look and feel as well. However I didn't individually redesign all pages, as from a UX standpoint they already performed well. So in addition to redesigning the affected pages, and the home page itself, I have updated the rest of the website through the UI kit. This was a UI kit and style guide using bootstrap components, so all the other pages would be easily re-skinned by updating the CSS.
Accommodation listing and filters
Accommodation detail page
Personas
I have interviewed the creator of this project Doug Meikle to better understand its users. He personally visits each homestay to create the listings, and handles all communication with users and surveys analytics with developer Amber Gregory. As I have had visited the region myself and met some of the homestay owners and tourists, I've already had an idea of what to look for, and Doug and Amber helped me see the picture in more depth.
The two primary user groups are the homestay owners and the travellers. As the islands are far off the beaten track, travellers usually research for months or even years before setting out to make plans for a trip.
User Journey
The most relevant user journey for the porpoise of designing the booking feature is that of Margareth, the traveller. Paulus, the homestay owner will use the booking system via SMS.
Competitor Analysis
Although there are no direct competitors I have analysed popular booking products to understand what are the most widely used patterns, in order to make ours the most intuitive for users. However, of course no such pattern can be lifted in as is, as each product and service is different, and this one is a fairly unique one. So using the outcome of my research as a starting point, I have tailored it to the unique traits of this service.Some key considerations to adapting patterns to the project:
- Homestays should not be by default listed based on popularity or rating. This is to give equal chances to the homestay owners. In our case being ethical and supporting the community is more important than market competition.
- Availability is not known until the host confirms a booking, therefore it is not searchable.
- Users spend a lot more time researching and trip planning than booking. This means availability is not such a key information until the last stage.
- We have a lot less accommodation options than commercial booking agents' websites.
- The offer is rather homogenic in terms of standards and price range
Wireframes
Based on my research and the existing site, I proposed a new layout that I iterated based on client feedback.
Design Choices
Top Navigation
To better support navigation and users accessing content, the top navigation got a search bar, and "The Ultimate Raja Ampat Guide" menu item is now a dropdown listing categories.
Hero Image
I replaced the original static cover image with a slideshow of changing images. Each slide delivers a key message about what the website is all about.
Search
I have revised the accommodation search panel on the homepage. I have removed the detailed search filters, and the keyword search functions. I have done this to prevent initial searches turning up underwhelmingly few results. This is the home page, and people here are usually still in the discovery stage, so it's more important to show options to them. Instead, I have added location and number of people as initial search options.
Quick Links
The quick links were originally thumbnail photographs with the title written over them. They were horizontally scrollable to fit more than what fit on the page, and consequently some of them were hidden. As these are some of the most often seeked out content, I wanted to make it more visible. As it is difficult to mentally process so many small images next to each other, the images lose their individual impact in this size and number, and they hinder the legibility of the text. Users read plain text more easily if it's not overlaid on text, so I got that out of the way, and made the text into a simple list of text links supported by discreetly sized icons that don't compete for attention.
Style Guide
The style guide and UI kit is based on CSS elements and Bootstrap components. It follows a Bootstrap grid, so it can be easily applied to the website which uses the Bootstrap framework. It also serves as a template for sub pages.
