UX Concept: Flow Diagram from Customer Journey and Affinity Diagram results

Intro

This Flow Diagram project is the first, out of two, that will form the Concept Block of my UX Case Study. The process has been guided and developed during my studies at the UX Design Institute.

The study aims at designing a hotel booking system that is aligned with users’ needs while following the design thinking process. The main purpose is to declutter the interface while reducing the number of steps. The outcome is to prototype a booking system that sparks joy in the eyes of users. Such products facilitate experiences smoothly and enjoyably.

What is a Flow Diagram?

Flow Diagrams, or Flowcharts, are visual diagrams that allow us to understand the user’s path as they navigate our product. They help to visualise the logical road that the user is taking, as well as how functional the interaction between the user, the product, and the results of their actions are. An effective representation of flow follows the user from the beginning of their interaction (start) to the last (end), as they engage in completing their task/s. Flow Diagrams are created based on previous research aimed at understanding the user’s needs, behaviours, and goals.

Objectives

• Define the high-level flow of the hotel booking system for Desktop.
• Address all issues/ highlighted in the customer journey map, and from affinity diagram.
• Lay the foundation on which the future prototype will be built.
• Sketch the flow by hand on paper, to then recreate it in digital format.

Primary Use Case

In order to keep the diagram concise, this flow will stick to one primary use case:

The user is planning a holiday weekend with their partner. The destination is the snowy slopes of Kittilä, Finnish Lapland. The duration of the stay is 2 nights, Friday 25.2 to Sunday 27.2. The couple would want breakfast included throughout their stay. Add-ons: Transport service from Airport to Hotel (on arrival and departure). Preferred language and currency: ENG/€

Screen States

• Homepage
• Search
• Results
• Booking Confirmation
• Payment + Successful Booking Confirmation

Sketching the Flow Diagram

For visualising this flow, I started by sketching it by hand while referring to results from previous Customer Journey and Affinity Diagram. The type of flow diagram I used is linear, and follows only one primary user case. Even if you have *terrible* handwriting like me, sketching is an amazing way of activating creativity. After you are done sketching, turning the flow into digital format becomes way easier!

Flow Diagram Digital

After the sketching session, I moved into Figma to recreate the flow in a digital format. It starts with the Off-screen sections, where we can see where the user starts interacting with the product even before the actual engagement (START). Then moves on to everything that happens in the Homepage screen, to Search and Results interactions, Booking process and Payment Confirmation (END). I tried to attribute a level of detail to the screens that will help me during the next step of the design process, sketching the interaction design of my prototype.

Hopefully, these insights can be of any help to anyone out there reading this article! This is the first part, out of two, of my UX Concept Block. The next phase is creating an Interaction Design (for Desktop), and with that ends the UX Concept Block of my Case Study. I will be posting the next project soonish. Wishing everybody a great start to the weekend! Cheers ✨