Stay Raja Ampat website update
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 are now adding a booking feature so travellers can now directly book accommodation 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.
Brief and project scope
User experience
The primary and original design task is adding a booking feature to the existing accommodation listings. This affects 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 UI as well. This, however doesn't mean I have individually redesigned all the pages, as from a UX standpoint they perform well, and the scope of the project didn't allow for a detailed redesign of each page. So I have redesigned the affected accommodation listing and detail pages, and the home page itself—being the most important page. As the website uses bootstrap framework, I have also created a 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
Doug Meikle, the creator of this website, populates and admins it himself. He personally visits each homestay to create the listings, and handles all communication with users and surveys analytics with developer Amber Gregory. I have interviewed them to access their wealth of knowledge about the users. As I have visited the region myself and met some of the homestay owners and tourists, my questions were based on assumptions on my personal experience, and they helped clarify them and expand on them.
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 one by one, 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.
- 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.
- There are a lot less accommodations than on commercial booking agents' websites.
- The offer is rather more 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
The original static cover image is now replaced by a dynamic succession of images. Each slide delivers a key message about what the website is all about.
Homestay 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 styleguide 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 serves as a template for child pages.
