Elmley Nature Reserve
Online Booking Experience
Overview
Scope of work
UX/UI Designer
Tool
Sketch (Visual Design)
Adobe XD
Adobe Photoshop CC
Adobe Illustrator CC
Pen and paper (Mock Up)
Problem
Elmley is an independent nature reserve and working family farm, based in Kent. On average they host about 30 events a year with a maximum capacity of 100 -150 people. This year so far 332 people made a booking and 30% of those people experienced challenges ranging from incorrect dates chosen to lack of clarity on types of rooms causing them to complete the process by telephone.
Design Process
Understand the user and identify a problem.
Use the research gathered to start sketching which leads to low fidelity images.
Once received feedback from testing use that to produce high fidelity to a working prototype.
Investigate through:
-
Interviews
-
Competitor reviews
-
Customer journey
-
Personas
​
Use the low fidelity to test to make sure I am going in the right direction.
With the prototype use that to do further testing and repeat the design process.
Research
User Interviews
User interviews were conducted after having their largest booking of the year. Some of the interviews were locals of the reserve, corporate members and first time bookers to gain a deeper understanding of the problem.
These are some of the key take aways from those interviews.
Key Insights
1. Organising a group booking can be very stressful to the user as well as the booking managers and staff.
2. Booking experience is always key to customers. When booking, customers have a certain expectation on experiences they receive.
3. Checking in can be stressful especially if you're with a family or big groups. This can take a while if you're confirming details, taking payment and adding on additional services.
Takeaways
Elmley is an independent nature reserve and working family farm, based in Kent. On average they host about 30 events a year with a maximum capacity of 100 -150 people. This year so far 332 people made a booking and 30% of those people experienced challenges ranging from incorrect dates chosen to optional extras being missed.
​
This tells me thats there is room for improvement and with a few changes we can improve the customer experience.
Competitive Review - Booking Journey for Airbnb
I wanted to see how we compare to three of the top competitors in the market which are Airbnb, Booking.com and Expedia. These are quite good competitors as they get a high volume of bookings whilst having a strong UX experience. I'm only focusing on the features and functions as I would like to apply some of them on the Elmley platform.
Menu tab to narrow search by Date, Guests, Price, etc.
Calendar highlight indicate start date, end date and duration
Selected tab brings up small pop up box and reduces transparency of background
The current highlighted tab has a blue glow.
The plus and minus buttons indicates the total amount of guests chosen.
Once the first tab is completed the colour changes green. To separate the completed from the current tab there is a blue glow around it.
Search result layout for accommodation and map view.
Accommodation is linked to the price on the map.
Map view of available accommodation based on search results.
Provides visual representations of properties and their prices in relation to one another.
Map permanently located on the right hand of page.
Preview of accommodation includes the most important details: - Slideshow button
- Name of accommodation
- Price per night
- Rating
Booking.com and Expedia.co.uk
Filter/search box is highlighted to draw focus.
Attracts user to fill out search box to begin booking process.
Once the first tab is completed the colour changes green.
To separate the completed from the current tab there is a blue glow around it.
User Journey
The user journey was created to showcase the persons experience trying to interact with the Elmley website. This will also highlight key pain points that they deal with but also expose opportunities we can add to the new platform. The light red boxes are the pain points that were highlighted and the grey boxes are the booking opportunities we can look at.
Select Duration
Input 'Your Party'
details
Input 'Add Ons'
Read/Accept
T&Cs
Option to add
another booking
Login/Register
Complete
registration form
View Booking
Input payment
details
Receive
confirmation
Unclear on type of detail to input for meal option. i.e. day names or number of days
Overview on right reflects information added
Add-on meals not reflected in price overview
No option to book
as guest
Lengthy registration
form
Must restart entire process to make any
amendments
Include option to book as guest to avoid lengthy registration form
Incorporate a 'previous' button in order to allow customer to amend booking details at any stage
All booking/book online buttons should lead to one main booking page to eliminate confusion
STAGES
INTERACTION
TOUCHPOINTS
EMOTIONAL
EXPERIENCE
INTERACTION
NOTES
BOOKING STAGE
OPPORTUNITIES
Booking Accommodations
Availability
Booking
Home Page
Accommodation
Page
More Details
Browse Gallery
Prices, Details
Check availability
Booking Online
Pop-up window
Input details: Date
Party size, Duration
Booking Conflict
Screen
Main Booking
Page
Select Arrival Date
Scroll down to view desired content i.e. list of accommodations
No way to compare
multiple venue
Lead to main booking page with date and duration filled in
Call or Email
Elmley
Category & Unit (Selected accommodation name)
Already filled in
Click-through to select Month/Year
1 second processing screen between each click
Help customer find all available accommodations based on party size and arrival date/duration
Brief description and image slideshow to compare available accommodations
Create drop-down menu to select arrival date
Add option to view an aerial image of nature reserve to show location of buildings in relation to one another
Provide options for add-on meal service and include in price overview
Checkout
User Journey
User Personas
When dealing with the guys at Elmley we wanted to create fictional characters that would represent their target audience. From the interviews and previous bookings their demographic are in their mid 20's to mid 40's. They would be attending for a wedding, work conference, couples getaway or family break. Their personas will highlight motivations, core needs and pain points.
Sketches
After going through the competitive review, user journey and user personas this gave me a clear understanding and direction in terms of the sketches. Changes will need to be made to the the booking function on the website in order to create a clearer and more user friendly experience.
Date page
Guest page
Overview page
Add-ons page
Checkout page
Card details page
Confirm & Pay page
Wireframes
Date page
User Enters Numbers of Guest
User Selects Room
User Decides Add-ons
User Enters Login Details
User Enters Card Details
User Enters Confirm & Pay
User Testing
User Testing
Once the prototype was completed I went back to Elmley and presented the prototype to the guys and customers that made bookings. The prototype isn't fully functional but is enough to showcase the booking function.
​
I managed to get 20 tests done and sent two user testing tasks.
Results
The initial comments I received from the users were that the prototype was clean and visually pleasing to the eye.
​
Out of 20 users, 2 had issues:
Issue 1: It was great that there's a previous and next button but they would also like the booking bar to be an interactive button so you can click on the bar and go to both the previous and next page.
​
Issue 2: Once you get further in to the confirmation page they couldn't see the "print" or "create another booking" button as he didn't scroll all the way down. He said "The next and previous button are always visible on every page. Why can't the print and create another booking button always be visible".
Goal And Methodology
Goal: To successfully have the user navigate their way through the booking page without any confusion. Also being able to go back if a mistake is made and make an amendment if needed.
Methodology: The usability test consisted of twenty users and a set of tasks written out to be followed by the user.
Key Learning
Key: Testing is key and constant testing is very important as it keeps you on track to actually finding a solution that doesn’t only look good but works to solve the user problems thus leading to more successful bookings.
​
I learnt even when you create a new solution there will still be issues. Your job is to understand what the user goes through but also find ways to ease their pains.
With these issues there is a cost of time and money which is being lost. I'm not only solving an issue but I'm saving time and money for Elmley.
User Testing Task
Task 1: Navigate each page of the booking process and being able to move back and fourth seamlessly through the pages.
Task 2: Navigate to the “Overview" page and being able to understand the new accommodation page along with the interactive map.
Final Design
It was highlighted to me by the Elmley team and the customers that the images on the current website were perfect but weren't being used to their full potential. The pictures were on a tab but people couldn't find them. I thought it would be best to incorporate these images in the background of the booking process in order to fully utilise them. By doing this, it's giving the users a feel for Elmley at the start of their customer journey. This is how I came to my final design.
Date page
Numbers of guest page
Selects room page
Add-ons page
Login details page
User Enters Card Details
Card information page
Confirmation page
Solution
My solution was to create an intuitive booking experience to eliminate the challenges that exist in the current system. The solution will be to visually present the available rooms to the user, along with a brief description of the accommodation. To implement a clear and efficient booking system calendar that illustrates the customers arrival date and duration of stay against the availability of the chosen accommodation.
Conclusion
Final Thought
If 322 bookings were made and 99 had issues, that is 30% of customers that potentially may not want to book with Elmley again due to their experience. Customers experiencing these issues will have to call up to complete their booking or even cancel all together and find somewhere else to book.
​
Having a great user experience makes the user satisfied and keeps them coming back. Even though my prototype was tested on a small sample size, only 10% of the users had issues which shows that we are going in the right direction.
Next Steps
1. To develop the app from the existing website so booking is seamless across all platforms.
2. To develop an interactive map where you can highlight each accommodation and view it on street level.
3. To do further testing on the final prototype and use the feedback to help improve the UX/UI of the booking page.
