Designing a Mobile Booking App for Evergreen Resorts
The client was a new hotel group who were looking to create a mobile booking experience that is simple, accessible, and based on a deep understanding of their target users. My role was to complete thorough user and competitor research and apply the knowledge gained to finalise the project with a clickable prototype.
Process Summary
My initial approach for the project was to gain a deeper understanding of the market and observe real people using similar products. Through this I found several areas where improvements could be made, so I delved deeper into the research so I could define the exact problems this app would solve for the user. This served as a framework from which I designed user flows, which turned into interaction designs that guided me towards testing solutions in the form of high-fidelity prototypes.
This is an outline of the process I followed for this project, click on one of the images to skip ahead to that section:
Research
With over a 60% rise in mobile travel bookings in 2021, building an easy to use app that delivers a positive user experience was an essential for this client. To begin this journey to building a best-in-class experience, I needed to find out more about who made up the 60% and the apps they frequently turned to, but also what discourages users from using hotel apps and was there anything we could do to counteract their feeling of unease?
What problems are users facing?
How are best-in-class apps being used?
What are users' priorities in the hotel booking process?
Research
02
Online Surveys
Next, I needed to hear from the most important people, the users. To accumulate a wide range of data, I started by sending out an online survey gathering mostly qualitative data from the participants, so I could find out exactly what the users' experiences had previously entailed. From this I garnered impressive insights into the minds and requirements of a range of users who have experienced booking hotels before.
01
Competitive Benchmarking
With no pre-existing product, I started my research off by reviewing similar products available to assess how best-in-class hotel apps are solving common user problems. From this I learnt what they are doing well, but also could review in depth which elements weren't working so well that I could improve upon in my designs. Most importantly, from this first step I began to understand more about the problem itself that my product would be solving.
03
Usability Tests
I ended my initial research phase with usability tests, arguably the most important stage of my research. After defining clear goals for the sessions, I conducted 4 separate tests and depth interviews with volunteers, taking a deep dive into their minds and observing how they all use different mobile booking sites to achieve a set of goals, resulting in invaluable insights and a clearer idea of the problems at hand.
Define
During the research, I had uncovered many pain points and positive interactions during the use of similar mobile booking apps, but how many of them were applicable to my product and were they really as prevalent as I remembered them being? Now it was time to define exactly what I would be focussing on in the following design phase by reviewing all my research data, and getting into the nitty gritty of what users need.
Where were the most common pain points?
What problems could easily be avoided?
How do users feel throughout the booking process?
04
Affinity Diagram
To give some structure to the mass of unorganised data I had acquired, I hosted an Affinity Diagram workshop to sort through the data quickly and build consensus on where our priorities lay. From this it quickly became apparent that within the mass of data, a pattern was emerging.
If users weren't able to open the app and search immediately, using their own search terms, their negative experience overshadowed the whole experience, no matter how great it may have been. Secondly, we found that once users had jumped through the necessary hoops to choose their hotel, often overwhelming amounts of information about room types and rates would cause confusion and failure to complete the booking process. Grouping the research data allowed me to see exactly where the problems in the booking process lay, whether they were higher level issues like these, or seemingly smaller ones such as locating the "filter" button, setting me up greatly to complete a Customer Journey Map.
Design
Great! My definition phase had produced some really useful aids that clearly pinpointed problem areas in the hotel booking process, and now it was time to get started on fixing those problems. Using design patterns and principles, the competitive benchmarking data from the research stage, and everything I had learnt in my UX Design Professional Diploma, I set out to create an outstanding user-focussed experience.
How can we solve the most common pain points in the hotel booking experience?
What is the simplest, yet most highly effective flow?
What makes the most sense to the user?
05
Customer Journey Map
Now I had given some initial structure to the findings, it was time to apply this information into a visual representation of the current user experience, highlighting aspects of the journey that needed to be fixed as a priority. Once again, adding more structure to my data proved to be invaluable. The process of listing out the user's goals and behaviours alongside every pain point and positive interaction guided me towards a deeper understanding of the users I was designing for and showed me where I should be focussing my skills in the next stage.
06
Flow Diagram
To start my flow diagram, I initially created the high-level flow, looking at the simplest and optimal user journey through from opening the app to booking their stay. However, as I was putting pen to paper, I couldn't help but wonder exactly how their journey would be should they take one of the tangents offered to them on the way, signing in, or creating an account for example. So what started as a high-level user flow, soon became a detailed flow diagram exploring different "yes and/or no" options and variations which I decided to split into separate stages for ease of digestion both now, and for when it came to designing the screens.
07
Interaction Design
Time to get into "solution" mode and use all of the research and planning so far to design screens that solve users' problems. Although I had found significant pain points in the search functions and room selection stages, I didn't want to skip over the traditionally "pain free" zones, such as the app home page, as the only way to keep them pain free was, in my opinion, to give just as much care and attention as all the other screen states. Backed by my research, I put pencil to paper and started sketching the screens following my user flow diagram.
This taught me that what may initially seem a great solution to a problem, may not be in other apps for a reason. For example, one point of friction from my user research was how users couldn't vertically scroll through months in the date selection tool, but would have to click arrows to change the months one at a time. My initial thoughts to get around this, was why not both?! Why not allow the user to scroll through the months should they wish to, or just click straight to the month they want using a side banner within the calendar tool, thereby saving the need for them to click to open a pop-out within which they could change the month. Saving clicks and giving users all the options? Great, I thought! However, my sketches soon showed me that this was, in fact, very messy and potentially confusing to the user, and no matter how many iterations I tried, I soon found that the traditional, tried and tested, methods were the best. This didn't stop me from creating a solution that fixed the problem for users, but reminded me that having a brand new, never-been-done-before idea isn't what UX Design is all about.
Validate
Now I had an idea of how my app would both function and look, it was time to start validating whether these ideas would really work. So, I opened up Figma and started creating. This stage was all about the reality of how the app functions and ensuring that the screens not only looked visually appealing, but also served a purpose. That purpose being, of course, contributing to a smooth and pleasant user experience.
How can I use everything I've produced so far to create an experience reflecting the best of similar apps on the market?
Are there elements of the design that don't work anymore?
How does my design optimise the user experience?
08
Prototyping
Arguably, the most satisfying stage of the UX Design process is when you start to see your product come to life through medium and high fidelity prototypes, however this comes with its challenges along the way. Figma being the amazingly usable, yet complex tool that it is didn't make my job easy, as I worked hard to find ways to make my plans come to life, refusing to give up if my first round of googling to find ways to produce certain effects yielded no easy solutions. Working through these challenges has taught me even more about the many joys Figma has to offer, and given me even more expertise in the software.
I finalised this stage once I had completed two user tests of the prototype, which highlighted potential readability concerns with the font size within room selection. Once I had gone through the entire prototype and adjusted any concerns appropriately, I completed the project with a prototype that solved the user issues found in my research:
Easy to use and functional search tool.
Less cluttered home page and room selection experience.
Clear terms in search results, ensuring the user understands the property details.
If you'd like to see the current iteration of my prototype, please feel free to have a click through:
09
Annotations for Handover
Now I had completed my prototype and user testing, I revisited each of my screens to add clear and concise annotations detailing the exact functions and behaviours of elements, ready for developer handover.
Challenges and Conclusions
Being my first solo UX project, this task came with many challenges I hadn't faced before, not least of all being that this was a hypothetical case study which comes with a package of challenges on its own! Not having the real client to work with in some ways made the task easier (no budget constraints, for example!), but in other ways made the task vague and lack meaning. However, I worked past this to make the project feel entirely realistic to me, working to tight deadlines, estimating resources and constraints, and keeping the real users in mind throughout the case study, such as those from my user testing and surveys. With this positive mindset, and a goal to create a product that reflects every stage of my work, making an experience users would enjoy, I received a score of 100% for this project work.