Course: Computer and Human Interaction
Members: 3 Software Engineer, 1 Designer
My Role: UX Designer, Visual Designer
Method: Cognitive Walkthrough, Heuristic Evaluation, Wireframe, Rapid Prototype, Visual Design
Duration: 6 weeks
Redesign the selected interface of an existing product to improve the current user experience by applying user centered design methodology
What is Booking.com?
Booking.com is an all-in-one travel site where a user can simply input their desired destination in the site’s search field and they will be meet with either airline, hotel, or taxi prices all in one page. Booking.com’s mobile application offers users to book reservations or search for travel fares all from their mobile device.
What are the existing problems?
To begin this project, our team initiated with an interface evaluation to learn the usability of the current version. The interface evaluation effectively helps our team to establish a basic usability understanding of the app. This step also helps us identify the major pain points on the existing interface and frame out the following plan.
Problem #1: Inconsistency
Not all the services are included on the mobile app. The issue of inconsistency caused confusion when users switched device.
- There are total 6 kinds of service listed on booking.com homepage. However, there are only 3 services shown on the app home screen
- Car rental and airport taxi are double presented on the more panel
- User cannot find the other three services anywhere on the app: flight, stay & flight package and attraction
Problem #2: Information overload
Overloaded information may cause users to read stressfully.
- There are too much information is provided in a single hotel information card. For example, in the first hotel information card, there are total 9 pieces of information are provided on a single hotel info card
- Some information are confusing. For example, the label 2 (dots with thumbs up symbol) actually is the hotel star level, the label 4 is the rating level
- Some users may mistakenly take label 2 as rating level and confused by actual rating level
Problem #3: Complex task steps
Too many screens that users need to go through for making a booking. This complex booking step can reduce users’ satisfaction.
- Too many taps required in order to make one single reservation
- Too much text users need to read on every single screen
- Information hierarchy is unclear on most screens
By conducting this user interface evaluation, our group concluded the following key problems need to solve immediately:
- Add the missing services on the mains screen to keep consistency on different device
- Simplify reservation steps, maximally reduce the taps users need to make for making one reservation
- Reorganize information on each screen to clarify information, especially on search result screens
How competitors solve these problems?
In order to resolve the existing problems effectively, our team conducted a comparative study of similar applications and adapted the strength from them. The specific apps we compared with booking.com are Airbnb and Expedia.
Airbnb is online marketing company for vocation rental, it mainly offers lodging arrangement, primarily homestay, or tourism experience.
- Airbnb is featured by its minimalistic interface design which provides users appealing visual experience
- Users can simply type in their destination without other information to view the search research which save users a lot of time and effort to start a research
- Function hierarchy and information hierarchy are very clear on each screen, users can clarify they need to next without any effort
- Allow users to check availability before making reservation instead of confirm stay dates before searching can be controversial, because users may need to look for their stays again if their previous selected accommodation is booked in their expected visit dates
- A lot of detailed information is collapsed, then, users may need to expand manually titles to view find out the information they want
Airbnb provided our team a basic user-centered design guideline for accommodation reserving of Booking.com. Our team got a lot of inspiration from analyzing the Airbnb mobile app, especially on search steps and reservation steps.
Expedia is an all-in-one travel company offering hotel, flight, car rental, cruises and travel package reservations.
- Developed a good consistency feature of the web and the mobile app that allowed users to switch between different devices without feeling losing
- Not that much information is provided and Information hierarchy is clear on search research result which doesn’t overwhelm users
- Interface design is cohesive and neat which provide users appealing visual experience
- Searching steps remain complex that users have to enter destination, date and guest before searching
- Reservation steps are compressed into one single long screen without clarifying the steps of checking out. Then users have to scroll up and down to complete or modify their check out information
Expedia is a standard travel service mobile app with pleasing visual design. It provided our team instant solutions for some pain points, such as how to manage all service on home screen. Through studying Expedia, our team also identified the major pain point which needed to put more effort in is the reservation procedure.
From the comparative study, our team obtained following instant solutions:
- All of services can be included on the top of home screen by using icons
- Date, guest and filters may be incorporated into search result screen by using labels or floating icons
- Clear interface can be achieved by reducing or eliminating big area of color blocks
Finding users’ needs via user persona
After the interface evaluation and comparative study, we create two personas to help us to develop a better understanding of users’ needs, experience, behavior and goals. The creation of persona is helpful to guide the process of ideation to achieve our goal of creating user-centered experience for our target users. It also helps us to make design decisions in the wireframe and prototype.
What did we learn from personas?
Persona is an effective way to put designers into users’ shoes. By creating personas, we have the following key findings:
- Users want to maximumly save the time on hotel researching
- Users want to minimize their required reading content
- Users want to be able to locate the wanted information easily
What can we do for the personas?
- Creating effective filters can help users to locate needed information easily
- Optimizing the information architecture to help users to minimize their reading time
Learning users’ wants via user research
In order to verify our research analysis and to be able to examine the future design outcome, our team conducted a user testing before actually diving into the design process. There were 10 users participating in this testing, five males and five females. The age ranged from 23 to 35. The user testing included user survey, task survey and user interview. Every user approximately took around from 30 to 45 minutes to complete.
Part one: user survey
Before inviting participants to complete the task testing, we first invite them to do the following survey in order to recall their intuitive needs of the travel sites.
- please rank the following feature in order of preference of choosing travel sites
a. Booking service (e.g. accommodation, flight, package)
b. Travel discount (e.g. loyalty rewards, membership rewards)
c. Price guarantee (e.g. price match, refund)
d. Travel guides
e. Information security
f. User experience
- Please rank the following elements in order of importance of making decision of accommodation reservation
e. User reviews
- Please rank the following features in order of expectation of travel sites user experience
a. Easy to navigate
b. Tracking accessible
c. Sense of security
d. Mobile friendly
e. Visually appeal
Part Two: user task testing
After the brief user survey, users are invited to complete the following user task testing.
In 20 minutes, try your best to find out and make the reservation for an ideal accommodation for your coming 3 days vacation with your best friend.
Part three: user interview
A follow up user interview was given right after the user completed the user task testing to collect users’ instant feedback.
- How do you feel about the task? Is it easy to complete?
- Please briefly comment on your user experience of the app.
- Please also rate your satisfaction, 1 is very dissatisfied, 5 is very satisfied.
- Is there any improvement that you are eager to see?
What users want?
With the data analyzing from the survey, task testing and interview, our team had following findings:
Findings from user survey
Findings from user task testing
- Only 1 participant entered the reservation making process in 20 minutes.
- There are 2 participants who showed they found out their ideal accommodations.
- The rest of 7 indicated they would like to have more time to browse more accommodation in order to make decisions.
Findings from user interview
- All of the participants showed it is not an easy job to find out their ideal accommodations on the mobile device.
- The most 3 common comments we received from this task testing are
1. Search result screen is too busy, don’t know where to view first
2. Images are too small, have to tap to view it clearly
3. Hard to find out the desired information on detailed screen
- The average satisfaction score we received is 2.65. More detail please see below diagram
- The most 3 frequent suggestion we received are:
1. Neater interface
2. Clear information hierarchy
3. Smother reservation process
User testing was extremely helpful for our team to verify our assumption of the existing problems. With the feedback from the user research, our team decided to mainly work on following area:
- Simplify the reservation procedure
- Clarify information and function hierarchy on each screen
Defining the problem
Concluded from above user interface evaluation, market search and user research, our team made the following problem statement to guide our following redesign.
What will be the solutions?
By targeting the existing problems, we proposed the following solutions.
Solution #1: Searching by only typing destination
Start searching by only typing destination on home screen to maximally save users’ time to start their research.
Solution #2: Minimize the reservation steps
1. Users can book their hotels directly on search result which creates a new booking experience
2. The minimum steps that users need to take to complete one reservation is 5 greatly save users’ effort of making reservation
Solution #3: Reduce information load
1. Only one hotel will be shown on one screen which allows users to pay closed attention to one hotel at one time
2. Only room information, hotel name, customer rate and price will be posted. Secondary message, like discount will be labeled on the preview images. This reduces users’ memory load
Proposing solutions allowed our team to target each major pain point specifically. It also brought our attentions to some small details, such as:
- What is the method for users to modify their dates and guest number?
- Where should users confirm dates? In the search stage or check out stage?
- How should users switch their rooms?
We basically started our design process by drawing rough paper sketches. Concept sketch allowed our team to quickly check out our proposal solutions effectively and provided great reference material for further discussion.
- Included all services by using icons to keep consistency with the website
- Set 2 guests and 3 days after the current day as default search setting
- Allowed users to swipe left to switch to map view
Sketches brought up us a lot of concerns and further consideration on our initial design ideas:
- Is it a good idea for letting users to skip enter date and guest number to start searching?
- Will the affordance of swiping right to view maps be too low?
- How to start booking steps? Using pop out screens or switching to another new screen?
Medium Fidelity Wireframe
Based on the review of paper sketches, we moved on to the digital wireframe in order to gain more realistic testing of our ideas. Essentially, wireframe provided our team a good opportunity to closely examine our proposal solutions for paint points. It also encouraged us to think carefully about the detailed layout of each screen.
Set accommodation search as default search setting and allowed users to type in destination only to start searching.
Only shown one hotel info card on one screen and allowed users swipe right to view tap map background to switch map view.
Allowed users to book their hotel directly on search result screen without entering the hotel detail screen.
Redesign booking steps
- There is not a way to modify the date and guest number when users type destinations
- How to let users know to swipe lift or tap on the background to switch to map view? What will be the effective signifier?
- Also trying to explore other solutions to implement map view, like floating buttons…
- Think about the trigger of viewing different rooms, traditional scroll or keeping tapping buttons to change the room?
- Basic room information should be included on the room detail screen.
- Are the amenities icons work well? Explore different interpretations.
Improving the navigability
Tapping the background to switch to the map view is the most controversial feature from the last round of review because of the low affordance. Therefore, our team created another 3 versions in order to find out the better interpretation.
V1 is definitely an innovative trigger, it may impress users, but it may also confuse users or be ignored by users because of the low affordance
V2 creates a neat interface by reducing the prioritization of map view function. However, may view is important, especially for some users who need consider accessibility to public transportations in their plan
V3 gives certain prioritization to the map view function without even taking too much attention from users
V4 slightly over prioritizes the map view function and may even impact reading the content in some cases
Therefore, picked V3.
Even though our team decided to pick the V3, I was concerned about the placement of the map icon. Because that is the placement of “cancel” in some cases. In order to eliminate my concerns, I extended the search bar and contained the map icon in it.
Enhancing the usability
How to navigate users to do room selection is another obstacle in our redesign process. Basically, our team would like to insist on the principal of displaying only one room each screen for reducing users’ memory load in browsing process. Therefore, we created the following 3 versions in the first round of iteration.
Picked V3 clearly! Compared with the previous two versions, V3 is obviously more interactive, users can easily check out different room information by swiping action, then make a reservation by clicking the “book” button. It does not require large finger movement, like V2. It also can avoid mistake booking easily. Additionally, the clear content architecture is clearer. Users can easily know the price of each room without moving sight to the screen bottom.
Even though our team were happy about the V3, we were concern about clarity of the content architecture. Therefore, we did some small modification and created the following iteration 2.
High fidelity prototype
Redesign features highlights
Reduce processing time
Our redesign version allows users to start their finding and make their reservation immediately for maximumly reducing the processing time.
In the redesign revision, the default guest number is 1 and stay dates are not required for start researching. However, users can modify stay date, guest number any time.
Increase interactive visibility
In the redesign revision, the scrolling direction is not only limited in vertical, users can also scroll horizontally. Additionally, we also implement plenty of buttons to make the enter area more interactive.
Fortunately, our team invited 6 of the original testing users to run the usability test of the redesign version. The redesign received positive feedback from testing with them, where they enjoyed the simplified procedure of searching for and making bookings, along with a compelling interface. Additionally, our team ultimately received a grade of 247 out of 250 of this project. For me, I also grown a lot by cooperating with my engineering teammates. Not only my design techniques and thinking have been improved in this project, but also my communication ability has been practiced from this process.
Future improvement thoughts
If I had the chance to continue working on it, I would have consider the followings:
- Continue improving the flexibility — — allowing users to change the selected room in the check out process and continue to modify their dates and guest numbers.
- Redesign the filter — due to the duration of the project, our team had not time to include filter redesign this time. I would like to rewrite the filter structure to help users to target their ideal hotels in an effective way if I had a chance.