The purpose of this project was to gain valuable insights within the hotel booking app world, via research and analysis to enable me to create a solution and design a hotel booking app which is 10x more user friendly and ensures to deal with any existing user pain points with current apps in this field. To achieve this, the UX Design Process was needed, so that’s where I begun. Research.
Research. The most vital step within the UX Design Process and one which should never be ignored. Ensuring I understood user goals, behaviours and context was vital in making sure my knowledge and understanding of the problem was detailed enough to create a good solution, so with the use of triangulation, my 4 research methods all came together to give me insights which enabled me to create: RestEZ.
Step 1: Analysing industry insights for a better understanding of what to do & what not to do
My first step within this project was to gain inspiration and gain insights on other competitors and understand what to do and what not to do. To achieve this goal, I decided to conduct my first research method; Competitive Benchmarking. I analysed four different hotel booking apps to gain a wide variety of knowledge on different types of hotels. This was a good start which would enable me to dissect the data down into insights later in the project, which would allow me to create a better, more user-friendly App.
Key Insight 1
Ensure Clear and Accessible User Control
Giving users freedom and control over software is an important heuristic to abide by, however ensuring the implementation of freedom and control for users is easily accessible and visible is even more important. Most users didn’t like how hard it was to exit the first page which opened on some of the apps as they didn’t know how or if they even could, continue as a guest. A clear CTA button is needed.
Key Insight 2
Clarity Through Informative Page Titles
The simple addition of adding an easily readable title to inform users of what the purpose of that page is and the content it holds is something which is done in the majority of apps where users use it often without even realising. Ensuring the software is forthcoming is something that must be added to an application.
Key Insight 3
Visual Appeal for Effective Information Delivery
Users love aesthetics over information. Yes, providing information is a key part of an app, however, providing this content in a way which is more visually appealing and doesn't seem as much to consume is the best way of getting users to intake that information. For example, adding the use of icons, branding colours and images, is a much better way of delivering content.
Step 2: Leveraging quantitative & qualitative data through survey analysis for problem identification
Step 2, the online survey, was my second research method which was a great compliment to the qualitative data gathered with the first research method; but this time primarily quantitative data. I made sure to mainly narrow down onto the quantitative data to add some statistics, facts and figures into my insights. This method particularly gave me information about users goals, behaviours and context, alongside popular pain points. Another step closer to identifying the problem.
Key Insight 1
Embrace Established Conventions for User Familiarity
Current apps aren’t preventing users from completing their tasks as I found out that 100% of users which answered this survey, was able to complete their task. This tells me that I should stick to using established conventions such as the typical date picker calendar; which is exactly what I did. Users loves familiarity.
Key Insight 2
Prioritise Transparent Pricing in User Interfaces
I also learnt that the most important aspect that users look for when selecting their hotels is the price. Exactly the reason for why I have made it clear and most stages of the booking process of what the price of each hotel is.
Key Insight 3
Focus on User Goals, Behaviours & Context over Design Preferences
Users don’t necessarily care or understand much when it comes to the design side of the app. I learnt this as the majority of users didn't have anything they wanted to change or improve about the apps that they used. This tells us to not asking design based questions but instead questions which gives us insights on users goals, behaviours and context.
Step 3: Preparing for usability testing and gaining early insights from hotel booking app users
My third approach to gaining more data was to gain insights from usability tests conducted by the UX Design Institute. Via these videos, I was able to understand the goals, behaviours and context of hotel booking app users much better. On the other hand I also became prepared where I could understand the ins and outs of conducting my own usability later down the line. I watched through two pre-recorded usability tests and made notes on every positive interaction, negative interaction, mental model, quote and behaviour the user would offer. It was time to gather some of my own insights.
Key Insight 1
Streamline Date Selection via Integrated Calendars
Users generally tend to prefer to input their dates through a calendar option rather than inputting them manually. They also prefer to choose both check-in and check-out dates in the same menu instead of separate menus. E.g., don’t do: users enter the check-in menu and input their details, then exit. Then users enter the check-out menu and input their details, then exit.
Key Insight 2
Enhance User Satisfaction with Detailed Hotel Descriptions
Another key insight I learnt was the use of information and descriptions for each hotel. Users love it. Something I was previously unaware of, but users love a detailed description for each hotel. Users like to be informed in advance, to know what they are going to receive and understand everything that they are paying for.
Key Insight 3
Align with Users Mental Models for Effective Design
A lot of the time within the usability test the users didn’t expect something or on the other hand they did expect something to be there but it wasn’t. This is down to their mental model with hotel booking apps in the past. This is a key insight to what conventions should be used or not.
Usability Test
Step 4: Executing usability testing through my own conducted session; testing 2 hotel apps
It was time to conduct my own usability test. Going through the entire process, from creating an invitational email, a test script, setting up the test with screen recording software for both mobile and desktop screens and the addition of a camera and microphone for my user, it was ready. Easing the user into the test I tested 2 different mobile booking apps: Airbnb and Booking.com, setting different tasks for each. I was able to identify areas of the apps that the user liked, didn’t like, struggled with or even completely gave up with; a very serious pain point. I rewatched the recordings after and made notes on...everything.
Key Insight 1
Prioritise Clear and Visible Exit Options
The use of a small ‘x’ button among a lot of content on the first page a user sees on your app shouldn’t be done. This usability test proved that ways to close or exit menus should be clear and easily visible - especially if it’s on the first page of the app where not everyone may have used it before.
Key Insight 2
Be Cautious with Smart Defaults
Using smart defaults is a great way to save users time but here I learnt that it is vital to ensure smart default is only used at the right time and in the right way. The user selected the wrong dates as their dates were already pre-populated. Maybe this is something that shouldn’t be done? More research is needed.
Key Insight 3
Enhance User Engagement via Visuals and Descriptive Content
Once again, it is shown that users like the addition of images of the hotel and also a detailed description explaining what they are getting and a brief overview of the hotel itself.
Analysis
Analysis
Analysis
Analysis
The research is done. However, now it’s time to ensure we completely understand the data we have gathered from all of our research methods. To do this, we must analyse each method and use tools such as Affinity Diagrams and Customer Journey Maps to group unstructured data together and have a better understanding of the numbers and responses involved. This stage must be thorough as we need to comprehend what the problem is before we even think about designing.
Step 5: Crafting insights by making sense of unstructured data via creating and naming groups
It was time to create the beautiful but extremely long whiteboard of data; an affinity diagram. This allowed me to group all of the research data I had gathered into logical groups which made sense of both Qualitative and Quantitative data. This was the best possible way for me to consume all the possible insights whilst being contained in one simple...but very long whiteboard. Now that I had all my research data in one place, it was time to link this even more to a customer and see their goals, behaviours and context, via a Customer Journey Map.
Key Insight 1
Boost User Confidence and Trust with Multiple Hotel Images
By analyzing and grouping the data I had gathered, that the use of images for each hotel was a very popular feature which users loved. Multiple would feel more comfortable and confident with images of the hotels being provided.
Key Insight 2
Ensure Simplicity to Avoid User Distraction
Clutter was another popular insight gathered were users felt apps were taking their attention away from their main goal when information and content was cluttered. Instead, clutter only made it harder to read and understand information.
“Users don’t care about features, but only achieving their goals.”
Key Insight 3
Optimise CTA Placement and Design for User Accessibility
Another insight gathered from the affinity diagram among the many was relating to CTA’s. It is extremely important to place them in the right location, at the right size, with the right colours. Also, its important to add an informative label for each CTA. This was found out via users becoming frustrated with hard-to-see CTA’s.
Step 6: Further understanding the problem by leveraging user journey dynamics
Here, I decided to leverage user journey dynamics with the use of a customer journey map. From the data grouped in the affinity diagram I used all of this to map out the users journey whilst documenting their emotions, quotes, goals, behaviours, context, mental models, positive points and pain points. Each of these added a point of data to the customer journey map that was either valuable or a personal touch. With this, I was able to start creating a solution as now the problem has been clearly identified and all that’s left is to solve it better than any competitor.
Key Insight 1
Deliver Diverse Payment Options
Users like to have multiple ways of being able to pay for their hotel booking. Or to have the option of paying the fee over a set period of time, instead of all at once.
“Its really good because you can either pay in full now or pay now and pay the other half later in the year.”
Key Insight 2
Avoid Pop-Ups for a Positive User Experience
The addition of pop ups, specifically add-on pop ups are annoying to users and gives off a negative impression.
“Can we just get through it now”
”Gives you the impression they are trying to get more money out of me here”
Key Insight 3
Prioritise Mobile Accessibility
The most popular way users book their hotel is via mobile so it is crucial to ensure there is an available mobile app which can be accessed on both Android and iOS. Also, it is vital to make sure the mobile app is created in a responsive and accessible way for those of different ages and technological skill levels.
Design
Design
Design
Design
Now that we understand the problem, I can start to come up with a solution. I begun with mapping out the flow of a user when moving through my app in the form of a flow diagram. Then, I created sketches based on what I want my final prototype to look like. Now, it’s time, I can start designing the app and prototyping it. After this, I finally want to ensure we include annotations to my prototype so that developers aren’t left with meaningless images. Context is important!
Step 7: Streamlining the user experience via the design of a user flow through the hotel booking app
This is the first step in creating the solution and ensuring my final designs make sense and can be easily navigated through by users. In this case, I focused on the process of booking a hotel and nothing else. Some of the steps I included were: searching for destination; choosing a hotel from the list, choosing dates, choosing the number of guests and so on. This ensured me that there was a working flow to my app and also opened up a simple way of designing; for each flow phase. My overall main goal with this method was to streamline the user experience and make sure the journey through my app for users, is seamless.
Step 8: Further developing the users flow through a handful of interaction design sketches
Now for the extra fun part, the design sketches. Based on each phase within the flow diagram I created an interaction design sketch to further guide users through the app but also have a clear understanding and base layout on how I wanted my final prototype screens to look like. This method allowed me to develop a better solution and to see it visually. I was able to come up with additional ideas and concepts to ensure the experience for my users is as good as possible. As a whole this process was vital and without it, it would take longer to create a solution, harder to design the screens and lower the chances of a good UX.
Step 9: Diverting from sketch to reality, pixels were brought together to create an improved and seemless hotel booking app
Finally the time has come, I can open Figma and start designing and prototyping. Here, my aim was to create an aesthetically pleasing design but also a close replica to the real product so that the interactions and functionality can be provided at a realistic level. I started off with transferring my sketches into the digital world, this gave me a base layout and something to work with. From there, with a thousand different tabs open, I used all my research, analysis and design to create an intuitive hotel booking app which would rival competitors, and I did. I love the 60/30/10 rule by the way, it’s great. Can you guess my 60/30/10 colours?
Step 10: Sealing the deal with the help of detailed annotations for the developers
It was the end...nearly, can’t forget about the developers. Within this final part of my project I added annotations on every necessary screen I had designed. The annotations included information such as: rules, feedback, navigation and much more. An extremely important part of the project, one that cannot be forgotten. These annotations will allow the developers to easily understand exactly what I want, instead of just assuming from a bunch of images. They can carry on with their day and write up the code with a smile on their face :)
Conclusion
Conclusion
Conclusion
Conclusion
DONE. Problem identified. Solution created. App designed. What a project!
Design Solution
Aside from the many constant tweaks throughout the process and multiple types of designs I had come up with, the app was completed and the design solution was met. I understood users goals, behaviours, context and pain points and was able to create a product which ensured that their mental model and the design model matched, confirming no user friction being created. I ensured to keep certain elements of my app that users were familiar with due to their mental model, such as: the typical date picker; Year, Month & Date. I was also able to avoid pain points which I had discovered, e.g., not having the option or making the option of continuing as a guest hard to see. Instead, I added a clear bright blue button on the first page that is opened which stated ‘Continue as Guest’ - perfect. The end result was amazing, not perfect because nothing is, but a visually appealing, user-friendly, competitive hotel booking app. Beautiful.
Lessons learned & What I Would Do Differently Next Time
Interesting is an understatement. Of course the designing part was fun, that's my favorite part, but all of the insights I gathered from the research and analysis was very intriguing. I learnt that its very rare for a user to fail at completing their task on a hotel booking app; in fact 100% of users completed their tasks. I also learnt that its quite unpopular for a user to suggest something they would want to change or improve about an app, whether its because there actually is nothing or because they simply don’t care or have the knowledge to provide that information. However some people do. For example, I learnt that people love simplicity and hate re-entering details. Users want an app to be straight-forward and give you the option, or do it by itself, to save certain data, such as the number of adults or children selected for staying at a hotel. This is just a fraction of what I learnt and this clearly shows how important research is.
Relating to this, because its now extremely obvious how important research is, that’s what I would do differently. Conduct more research methods, spend more time on the research phase and gain an even better understanding of the problem through the research process. As well as this, I would also conduct more usability tests next time as they are one of the best ways of conducting research. I would conduct at least a few at the research stage and a couple at the prototyping stage with my prototype. Apart from that, I was happy with my process and my outcome.
I Passed!
I Passed!
I Passed!
I Passed!
6 months later and I passed the course! The ‘Professional Diploma in UX Design’ course by the UX Design Institute was extremely fun and it has improved my knowledge, skills and experience exceptionally. I achieved a 84% overall score, which for a complete beginner in UX Design, I think is pretty good.
You've heard our story, it's now time for the world to hear yours.
