I studied this UX diploma with great excitement. I was aiming to expand my knowledge of specific techniques or methods in the field. Practical design coursework would add to my 'on the job' experiences acquired from my role at Làlia. These studies could serve at supporting future professional practice.
Create an online desktop booking experience for a hotel aggregator company. Specific focus on the hotel booking process: how users search and book a hotel room online. Solutions should focus on desktop use cases.
Research techniques conducted were competitive benchmarking, an online survey and usability tests. This formed understanding about what exists within the current hotel booking landscape.
↑ Observation of a possible pain point (highlighted in red). Indicates mix of different location labels when searching for a specific place.
For the competitive benchmarking I studied four competition websites. I recorded the key information relating to the high-level user flow. This focused on the search features and booking payment procedure.
I documented good practice and typical conventions found across each of the websites. I highlighted many areas for possible improvement.
↑ A holistic comparison of the competition websites homepages. Created understanding of information hierarchy, features included and visual layout in each case.
I analysed the length of each benchmarked website homepage. In each case, the search feature is at a top position of the page for easy access.
This meant I questioned how long the homepage should be. I noted to explore where and what content to limit that may deviate users from the primary flow.
Next I conducted usability testing for the selected benchmarked websites. My tests included a depth interview and two related tasks for the participant. I observed users operating a selected website toward a specific booking goal.
The tests were vital for understanding real-world behaviours common within the booking process.
↑ The tests drew attention to key findings by each user. Each questioned specific areas of the allocated website with improvement suggestions.
A participant commented they only use websites with a high quantity of reviews. This gives them confidence in the booking system and the provider.
This insight was easy to emphasise with and made logical sense. So, I considered adding reviews of high importance within the information architecture.
These observations reinforced the importance of intuitiveness within the user flow. Different levels of key information needed for specific stages of the booking process.
I observed the users becoming hesitant about the current selection within the booking. This emphasised the importance of information clarity throughout all user journey stages.
↑ Selected key observation from my user test summaries.
↑ Audit formed an understanding of the key information included within the information hierarchy.
The hotel information cards were a critical touch point for the user within the primary flow.
This influences first impressions and understanding about potential bookings for searched data.
This cross-comparison of research techniques formed triangulation into the key qualitative data. User suggestions to add a shortlisting tool were helpful and validated existing assumptions.
I hadn't considered the importance of visual details within room images. These give a strong impression to users about a room's contents and perception.
The test findings challenged self reported information against credible evidence from user experiences. This methodological approach to research presented many insights for analysis.
Extended research documentation:
🔍 View Competitive Benchmarking Document
📑 Usability Test Script
📈 User Test Report A
📈 User Test Report B
Deeper analysis formed by creating an Affinity Diagram and Customer Journey Map. These processes situated key findings where critical evaluative insights existed within the data.
I analysed the ideas to form a collection of key insights. These informed the design process as intentions of the user within the primary flow. A common user persona forms around the primary goals and behaviours.
These insights became targets throughout the next stages of the process. These could ensure I was aligning design developments with user goals.
In the journey map I expanded on key user insights recorded within thematic groups. It states selected participant quotes from the usability tests. This emphasised where in the user journey the pain point currently existed.
↑ In pink highlights where the pain points existed for the user. These issues were in the steps related to the search results and hotel profile pages.
The pain points relate to the information the user expects to see. This misaligns with their mental model and expectations.
Also, there are user interface issues the user experiences. This results in negative emotions form about the experience.
The pain points misalign with the mental model expected for a certain step of the process. For each user quote I created a key insight for how this issue may resolve:
Aligning these insights indicated an important emphasis on structured information hierarchy.
Extended analysis documentation:
🔍 View Affinity Diagram Process Document
The primary user flow concept follows conventions found within my benchmarking research. In my system I incorporated two alternative kinds of payment options. This displays in a pop-up window to reduce the need for an extra page within the flow.
The homepage strategy focuses users to the search feature. Secondary preset options such as featured hotels or deals are available but smaller.
The layout of the flow diagram positions the primary flow on a straight line from start to finish. Extra branches for secondary user flows show where alternatives exist within the website.
This way best shows the limited steps of the desired user flow.
This process helped display all necessary screens and interactions for inclusion. Additionally, it shows how each step connects to a corresponding step of a specific user flow.
↑ Wireframe sketch of website homepage with annotations for the included features and positioning.
I recalled analysis of information hierarchy and density being critical to user engagement. I prioritised the search feature and review sections within the page layouts.
These features display above the fold with the page viewport. These features are priorities before more content reveals on scroll.
↑ Wireframe sketches of the website homepage detailing all primary flow interactions for inclusion.
These information design diagrams position the primary flow diagram underneath my wireframe sketches. This indicates which stage of the flow is being communicated.
↑ Diagram includes the total screen states and interactions within primary user flow.
This process was fundamental at consolidating all vital design decisions for the prototype.
It states all interactions required to complete the booking process with least friction.
Next I built a Figma prototype for the primary flow. The digital wireframes follow the sketches but with various changes applied. These changes adapt the scale of elements to a desktop environment.
I focused on typography characteristics, establishing a clear hierarchy through size and weight. I applied the Inter font family throughout the wireframes.
Inter is a smart, versatile typeface with high legibility on digital screens. This would prove useful with many information data points for consideration.
↑ Initial digital wireframes for the website homepage (left). Search results page (right) within the medium fidelity prototype.
The homepage design intends to drive focus to the page top. This is intentional to direct users towards using the search feature.
I developed the essential design system components and modals to use in the page layouts.
↑ Comparison view of digital wireframe (left) with the initial annotated sketch layout (right).
This process meant re-assessment of the hierarchy or position of key layout elements. Sections move for a more logical user flow when navigating each page.
This evaluation again emphasised the importance of information hierarchy.
I achieved my diploma in July 2022. Qualification awarded following completion of all coursework modules and written exam.
Continuing the project work I will complete further usability testing on prototypes. I will observe how users respond to specific design features.
For example, the shortlisting tool would improve from greater testing. This would form understanding of where areas of friction exist for amendment.
↑ Digital wireframe with initial design treatment to include photography and colour palette.
The version above explores adding the initial MPO design system. Colours added to component variants. These take inspiration from flowers found in Mallorca called Bougainvillea.
These developments make the design higher fidelity ahead of more testing and iteration.
This diploma has given me a deeper understanding about producing effective research. It has shown the vital role analysis has in making of design decisions.
The course emphasised the critical work needed in planning user flow diagrams. This way all design interfaces or interactions are a clear calculation.
Plus, always putting the user's goals and behaviours at the heart of your design solution is vital.
