Add a feature challenge: Booking.com
In the UX/UI design line of work, there are a lot of different projects we can undertake. Usually, people’s minds go to creating new apps or services, but more often than not you’ll find yourself working for a company that already has an established brand identity, having apps and websites already working with their own look and feel and navigation process, and your work needs to adapt and reflect this already existing characteristics.
This is why I feel this project proposed as part of the Ironhack bootcamp is so important.
The assignment was to add a feature to an already existing app. To achieve this goal, we have to go through the UX design process very carefully considering the implementation of the functions as well as taking into account the current look and feel to be representative of the brand.
The app that I was assigned to work on was Booking.com. Booking.com is a travel metasearch engine that helps travelers look for accommodations and make reservations. With the asigment of the app also came the specific features that I had to explore to eventually implement. In my case the features are:
- Set price alerts for cities or specific hotels
- See average price ranges of accommodation depending on time of the year.
Preparation
I followed the Design Thinking process, a methodology that I’ve found very useful to find the better solutions with users needs always in mind.
I used Sketch and Principle as my main tools, also using Trello to make sure I concentrated on defined short-term goals and keep track of my timeline.
1. Empathize
Testing Booking.com’s app
The Empathize phase is all about learning about my audience, but in order to do that, I felt it was important to do some previous research about the app itself and the competitors that were already implementing functions related to this process.
I started out by testing Booking.com’s app in order to focus on details, look and feel, navigation and the process of doing the main tasks (such as: searching, booking, and viewing detailed information).
Learning more about competitors
When I felt confident I had a more thorough idea of their app, I started exploring some websites like SkyScanner and apps like Hopper and Airbnb, to understand how other apps and competitors were implementing related services. They all try to help users find a place to stay or a trip, and have different ways to alert of prices or help users find the best deal.
I found Skyscanner’s way to show charts of data and Hopper’s attention to trends and average prices very interesting and useful to see what was already working and maybe what users were already used to see and work with.
User research: preliminary interviews
After all this previous work I was ready to finally start learning more about users. My first step is always trying to find people who already use the service so they can tell me some general thoughts about the app itself and to pique their minds about the features I was preparing to work with. I also found useful to interview people who maybe weren’t using this app, but were familiar with using other services to get solutions to problems related to the “find locations to stay”. For example, people who liked to organize travels and find the best deals, places and dates to travel.
User research: survey
With all this information I created a survey that I distributed online.
The survey was completed by 25 people. You can find the answers to the survey here (questions and answers in Spanish).
Here I summarize some of the most interesting findings:
- Most users have used alerts for prices changes (Skyscanner, Hopper, Amazon…)
- 80% found price alerts useful.
- Alert preferences:
- Most people on the survey were already using Booking, Tripadvisor, Airbnb, Trivago and services of that kind, which are focused on finding a good place to stay that fits in their budget.
- 90% reported that they found useful to know prices depending of season (quote: “it would help me decide my leave days”).
- OS: 54,2% Android users, 45,8% iOS users.
Because the operating system was nearly equal in survey responses, I researched further in order to determine whether to design according to Human Interface Guidelines or Material Design. I was unable to find user statistics from Booking.com (if you happen to find it, please let me know), so I investigated the mobile market and based my decision on that data. According to StatCounter Global Stats, worldwide Android use is 74.69% and iOS 22.34% (data from October 2018).
Following the data, I decided to design for Android.
2. Define
The define phase is about defining the needs and insights of users and the problem we are going to deal with.
But, what users?
Meet Victor.
Victor has an established job as a lab assistant and is the person to go when organizing travels. He loves to travel once a year and really enjoys organizing and researching to get the best deal, so his friends always come to him when in need of some help with this matter.
He wants to find the best deals and likes to organize his vacations with time having a lot of information to decide on dates and locations.
He’s frustrated that he has found solutions to follow price trends for flights but find it more difficult when looking for information about hotels.
Victor is what we call a User Persona. A persona is a fictional character that represents the users we are trying to reach and that sums up the research done until now. It helps all the people involve in the development of a product to empathize and see a more real user in their minds when making decisions.
As the sum of the research and with the user in mind, is time to define the problem we’re working on with a problem statement:
Users looking for accommodation in a certain location need a way to see average prices of each season and to get alerts when prices change because they want to make decisions with as much information as possible with the time that they have.
3. Ideate
This phase is focused on brainstorming ideas and coming up with new ways to implement the functions.
I divided my ideation process in the two features.
Alert prices
I played with some variations of a button in the screen that would let the user activate alerts for the specific search they were doing. I did some variations with the icons and I tested the different versions with users.
Average prices information
I decided to use a chart to visually show price ranges and changes. I tried a version with the chart in the top of the search results and another version with the chart in another screen that you could access pressing an icon.
It didn’t make sense to use specific average numbers in the charts since final prices variate so much between types of accommodations.
4. Prototype and testing
Usability testing
Usability testing of the prototypes was done during the process of designing and perfecting the designs. I found that in this particular project testing brought a lot of insights and commonalities to light.
For starters, the alert button seem to work, only discovering that the addition of a confirmation pop-up to the process would give more information to the user of what was happening.
The average prices function was a different story. Even though in the preliminary research most people thought of the possible function as something positive, when actually seeing it implemented, users reported that it was not useful and didn’t understand why they would want that information in that part of the process. A lot of people mentioned without a prompt from the researcher that information about prices shown when they were actually choosing dates would make more sense.
With all this information gathered it was decided that in the final design this goal needed some changes to make sense to users, and I looked for a different solution: a color code system visible when choosing dates in the calendar that in a easy way would give information about the average prices of each day with three categories, green=low, yellow=medium and red=high. When testing the feature this way, users seemed more satisfied with the information they got, and reported that it was more relevant for them.
Final prototype demo
In the video below you can see the whole flow and navigation process with all the added features and how they would work.
And here you can see some screens of my work:
To do next
I’m really interested in finding a way to implement the monthly or seasonal information about average prices that I explored with the chart but I ended up dismissing it. In the future I would love to iterate and research to find a way to bring this information to the user in an efficient and meaningful way.
Also I would like to test more the position of the alert button, maybe moving it to a place where it doesn’t cover pictures.
Learnings
This project in particular has been very rewarding in regards to all the important insights that I’ve learned during the process. Having to find solutions in the context of an already designed brand requires you to figure out a way to balance innovation, usability and consistency of navigation and design.
Here I listed some more learnings that I would like to highlight:
- Don’t fall in love with your design (it will probably be in the garbage soon).
- Look for other people’s point of view.
- It’s very important to understand an OS look and feel and navigation to design for it.
- Your idea is not amazing if users don’t find it useful.
- Pay attention to what’s already working on the market.
- Organize your tasks, create limited and well defined goals.
I‘m always eager to keep learning and improving so if you have any feedback, please comment or contact me so we can all grow together.
