Research
I started out by familiarizing myself with current state of affairs. I spent some time playing with the existing interface and noting my ideas. Then I met with several stakeholders to capture their ideas and to make sure I understand the underlying business goals. I also spent some time analysing usage data for MyBooking features. This helped to prioritise them better in my designs later on. Finally, I visited Booking.com’s customer service to talk to the agents and shadow their calls. There I learned about some of the customers’ troubles with the existing UI and how this affected the customer service work.
Synthesis
My team and I grabbed a room to narrow down and prioritise the research findings. Although the research sparkled many ideas for new features (that were diligently added to the backlog), we deliberately focused on ideas about better presentation of the current feature set. This way we made sure the development work is not extra large and that the future A/B experiment compared apples to apples, i.e. different designs of the same functionality.
Here are some of the ideas we came up with.
Sketching
I started the redesign process by sketching different ideas on how to present the information in more transparent and engaging way.
Wireframes
Once I found the direction that felt right, I went into Balsamiq and “digitalized” the sketches. This enabled the team and I to iterare more rapidly.
Design
After a few feedback rounds we arrived at a concept that we all felt good about. To produce final mockups I switched to my old friend Photoshop (it’s 2013, remember?). I used bold photography to make the design more engaging and the upcoming trip feel more exciting. I created more prominent feature hierarchy that was better aligned with user needs which were identified during the research phase. I also believed this hierarchy to be more beneficial for the business because I applied my understanding of internal customer service processes.
At this stage, the biggest trade off I made was in the area of interaction design. Clickable elements launched the already familiar lightbox I talked about earlier. It was restyled and stripped down to contain only elements requested by the user. Although not ideal, this approach allowed to launch the A/B test sooner and start gathering data while I was working on the improved interaction design as a follow-up.
Challenges
As it often happens, the polished Photoshop mockup looked perfect until I started implementing it in the code. While the mockup was receiving likes on Dribbble, the reality was giving it a hard time. Here are some of the challenges I faced.
-
The content of MyBooking page is highly dynamic and varies significantly from reservation to reservation. Layout had to be really bulletproof to accommodate for unpredictable copy lengths and price amounts.
-
Booking.com is a global service that supports 40+ languages and 50+ currencies. This includes languages written right-to-left and currencies with high exchange rates. I needed to make sure that my design looked and worked great for users from all over the world.
-
Many hotels have only low resolution photos available. I had to create alternative header design to be used in this case.
A/B test
After covering all imaginable use cases in the code and testing the hell out of them, I launched the A/B experiment. It showed that some self-service features were used more, but the customer service metrics were not affected. In other words, I could conclude that the user experience improved, but I couldn’t confirm that this was beneficial for the business.
Usability test
To get more data, I collaborated with the user research team. Usability test confirmed that users fluently completed their tasks and that they were satisfied with their experience. The problem was to get them to that point. Users either didn’t know that online changes were possible or they were simply afraid to give them a try. Most of the participants were going to contact the customer service.
The answer to the mystery of the A/B experiment was in front of me. To have an impact on customer service metrics, the self-service features needed to be not only better designed, but better promoted, too. This finding has opened a path for new experiments. Their purpose was to help users discover the MyBooking service. And that’s what my team and I focused on as a follow-up to the redesign.
We added 'Manage Your Booking' button to the site header.
Outcome
MyBooking redesign improved the user experience and — after more effort put into promoting the service — it improved the business metrics, too. The redesign set the new base for future experiments that took this success further.
Starting out in the company with this project was very challenging and very rewarding at the same time. The process I went through with my team quickly got me up to speed and showed what it means to design on a global scale for millions of users.
