Mobile or Desktop?
When deciding between developing a mobile app or a desktop website, I chose to focus on a mobile app because I believed the space restrictions would challenge me to grow as a designer. Mobile apps demand simplicity and clarity due to their smaller screen sizes, pushing me to prioritize essential features and craft a more focused user experience. This approach encourages designing products that are not only visually intuitive but also highly logical and easy for users to navigate. The constraints of mobile design have proven to be an excellent framework for honing my skills in creating user-centered solutions that balance functionality with elegance.
01 User Research
Documenting user behaviour in completing the hotel booking process
For the first part of my UX Design studies I had to conduct research on usability tests for two mobile hotel booking apps, Barceló and The Doyle Collection. This involved observing and analysing how users interacted with each app to complete booking tasks. I meticulously documented detailed notes on their experiences, both verbally and non-verbally, focusing on areas such as ease of navigation, clarity of information, and overall satisfaction.
During the usability testing process, a set of standard questions was asked to create a profile for each user, focusing on their travel habits and the applications or websites they commonly use.
The users were then given specific tasks to complete in the booking process. These tasks specifically focused on:
Destination selection
Date selection
Accommodation payment options
Breakfast options
In addition to this project, I also conducted a usability test on the mobile applications Expedia and Hopper with a user which would aid in the development of my own hotel booking app.
02 Observations
Identifying pain points in the user experience
By analyzing these observations, I identified the strengths and weaknesses in the user interfaces and booking workflows of each app. This provided valuable insights into what makes a mobile app effective and user-friendly in the hospitality industry. These findings directly informed the design of my new hotel booking app, which addressed the shortcomings of the previous apps with a more simplistic and logical approach.
Destination Search
In the Barceló app, when users search by destination, predictive text is limited to hotel names rather than locations, leading to search results that include irrelevant geographical areas.
Search Results
In the Barceló app, users find the volume of search results overwhelming, with irrelevant options appearing alongside their intended destination. Furthermore, they struggle to determine whether the results are located within a specific area of the searched destination.
Date Selection
In the Doyle Collection app, the first user notices that the arrival and departure dates are incorrect due to the use of separate calendars for check-in and check-out. The second user recognises early on that two separate calendars are used but is surprised that a single, unified calendar is not implemented.
Add-ons
In the Doyle Collection app, users feel compelled to add supplementary services to their stay, as there appears to be no clear option to skip this step and proceed directly to the checkout process.
Currency
In both the Barceló and Doyle Collection apps, users notice that the default currency is set to British Pounds, even though they primarily use Euros.
Guest Selection
In the Barceló app, users are uncertain whether the guest selection icon represents adults and children or two adults.
03 Pre-design
Organising research observations into categories to define application flow
Collaborating with a fellow student, we documented all research observations on post-it notes in Miro, capturing both the positive and negative user experiences. We then organised and categorised the post-its from the various apps into groups and sub-groups to inform the development of the new app.
Focussing on the various stages of the booking process, I was able to compile a customer journey map based on users’ perceived goals, behaviours, and mental models. This helped identify positive interactions, pain points, and opportunities to develop an improved user experience.
The development of both the Affinity Diagram and Customer Journey Map facilitated the creation of a flow diagram, which served as a blueprint for designing a logical user flow to address the pain points identified in the researched apps.
04 Interaction design
Sketching wireframes for the design of the new booking application
The user research and organization of observations provided a solid foundation for beginning the design process of my hotel booking app. Leveraging the Flow Diagram, I sketched various screen states by hand, creating wireframes that served as the basis for designing the first prototype in Figma.
I was finally able to visualise the User Interface of my new app, incorporating solutions to address the issues identified in the researched apps. My goal was to address the previously identified issues early on in the booking process, ensuring that destination-, date-, guest selection as well as filtering options and map views were easily accessible to the user and that add.
06 Prototyping
Transitioning from Wireframes to a Medium-fidelity Prototype
My initial experience with Figma involved transforming my wireframe sketches into a low- to mid-fidelity prototype. Since the course focused on the UX process rather than UI, high-fidelity design was not required. I opted to create a mid-fidelity prototype to familiarise myself with Figma’s features early on, preparing for my upcoming UI Design course in January 2025.
To represent the various screen states in a functional prototype, I established interactive connections between buttons and dropdown menus. The destination, date, and guest selection tabs were positioned at the top of the screen to enable users to navigate back and make necessary adjustments seamlessly. Additionally, I implemented a floating action button at the bottom of the screen, providing quick access to the map and filter views for enhanced usability.
07 Annotation
Annotating prototype screen states for developer handover and collaboration
For my final project, I annotated all screen states of my prototype to provide the developer with a clear understanding of its functionality. I detailed the purpose and behaviour of all buttons, drop-downs, input fields, and checkboxes, as well as outlined error messages triggered by incorrect inputs.
The feedback I received on this project emphasised the importance of addressing edge cases more thoroughly, which I have taken on board for future improvements.