Designing a new feature for Booking.com
The easiest way to organise a group gift
This project was a four-day challenge, part of the Ironhack Berlin UX/UI Design Bootcamp.
The Challenge
My challenge was to add a feature to the Booking.com app that would allow multiple people to contribute money in order to gift someone a trip. The project was randomly assigned to me, after the class had brainstormed about features that would improve the user experience of already existing apps.
Empathise
As I already had an idea to work on, I conducted a guerrilla research in order to evaluate the desirability of the proposed feature. So, in order to better understand the user, I interviewed 12 people to determine whether this is something they would find valuable and would use.
- 9/12 agreed that splitting the cost of any expense is a clumsy process. You have to calculate who owes what and then go through the tedious and unpleasant task of collecting money from each person (75%).
- 10/12 agreed that this feature would be very useful in more formal occasions, e.g. giving a gift to a colleague for his/her birthday (83%).
- 7/12 said that they probably wouldn’t use the feature among close friends, as “a simple bank transfer would be easier” (57%).
Define
My research insights helped me realise that something has to be done to make the process of multiple people contributing for a gift, in this case the trip voucher for booking.com, smoother, faster and less awkward. The ‘Jobs To Be Done’ (JTBD) framework helped me focus on these user needs. The main idea is that you “hire” a product to do a job for you. JTBD follow the template “When_____, I want to______, so that I can____.” The when focuses on the situation, the want focus on the motivation, and the can focuses on the outcome. The JTBD I formed in my case was:
When it’s my colleagues birthday, I want to split the cost of his gift among the team easily, so that I can save time and focus on my jobs instead of trying to collect the money.
Ideate
Booking.com has a feature called Gift Cards, where you can send a voucher in the form of a digital post card to anyone you want. I decided to build on that and allow more people to contribute in order to purchase the gift.
My next step was to create the user flow and the happy path, to have an overview of all the steps and information needed for a successful outcome.
With the happy flow in mind, I started sketching my low-fidelity prototypes to put the main idea down on paper and test different scenarios. At the same time, I jotted down all the UI elements required for the new feature, and did usability testing to identify any potential problems or confusions.
Prototype
Gift Cards were available only on the booking.com website, while on the app you can only redeem a card. Therefore, I had to build everything from scratch. The biggest challenge in creating my hi-fi prototype was to design something that is was consistent with the company’s aesthetic and defined look and feel.
I looked at the booking.com website and app for inspiration and I developed an interface inventory, where I collected all the elements of the app that could later be used as a reference for my hi-fi prototype.
This how the Gift Card webpage looks like:
And these are the two screens available on the booking.com android app:
My Hi-Fi Prototype
With the interface inventory as a reference, I started designing the high fidelity prototype. You can see some of the screens below:
Test
When I finished designing my screens, I tested the prototype with real users, to see how they experience my solution and if there are any confusions. Here is my hi-fi prototype, after the iterations based on the feedback I got during feedback:
Iteration #1:
During testing, I realised that the users didn’t notice the link where they could split the cost with their friends. Instead, they were trying to pay for the voucher themselves. To overcome this obstacle I added a pop-up notification, that informs the user about the new feature.
Iteration #2:
In the beginning, I had two different paying scenarios to test what made sense to the user:
a. first you pay and then you invite your friends to contribute
b. first you invite your friends to contribute and then to pay your part
Most of the users were followed the second path, which I kept to the final prototype.
Reflection
This project was eye-opening in many ways, as I had to design a feature for an existing platform, something very different from anything I’ve done so far. When designing for a highly adopted app like Booking.com, consistency is really crucial. The feature should look like it’s part of the app. Of course, it is also important to keep the user in mind throughout the entire process by researching, testing and iterating.
Last but not least, I’d like to thank Niharika Jha for the amazing feature idea - it helped me go through a very valuable experience.
