The goals of the redesign were:
- Refresh the page look and feel.
- Better reflect the branding of Booking.com’s CS organisation (include Booking Brad mascot).
- Guide the user to the most effective solution to their problem.
We hoped the visitors would feel that:
- This is a secure and caring environment.
- Self-help is easy.
- I am dealing with people who speak my language.
From business standpoint, we hoped to see:
- Higher self-service volumes.
- Higher usage of the contact form vs. calling.
- Ultimately, improved loyalty.
First iteration
The first iteration hit some marks, but it also had several issues. The unique selling points (USPs) were the first thing users saw which was not the best decision. The FAQ section was overlooked by most people as it was quite small and on the right. But most negative comments were about the page header.
I had an idea to place a silent background video in the page header. This was an emerging trend at that time and I wanted to play with it. My idea was to shoot a video in one of the Booking.com’s customer service offices. This way customers would “see” the representatives they were about to get in touch with. I hoped to create a better human connection upfront to improve experience of both parties involved.
When I tested the page, many users found movement in the header distracting. One person even asked if these people could see him. This and other similar feedback made it clear that the video had to be removed in the next design iteration. This outcome was a good reminder that design trends, no matter how cool they seem, need to be carefully evalutated within your context.
Second iteration
In the second iteration I got rid of the video header in favor of friendly illustrations. I decided to go with fully verticall layout to create better hierarchy. The design encouraged users first to use the self-service area, second to try to look for answers in the FAQ, and third, if nothing above helped, contact the Customer Service.
It was tricky to maintain the balance between making the contact form easily accessible while also encouraging users to find solutions to most common problems themselves. Main feedback for this iteration was that that the FAQ section was too big and that it pushed the contact form down. New header image was less distracting than the video header, but this time it was too subtle.
Third iteration
In the third and final iteration I collaborated with an illustrator to produce more engaging page header and icons. I also reduced the size of the FAQ section so that the contact form is not pushed all the way down. This version was implemented on the website and eventually became a new starting point for future experimentation.
