#7 User Flow Diagram for UX
Organizing an visualizing where screen states sit within the journey
Number 7 article in the lookback through the UX Design Institute’s Diploma Course in UX Design. These articles are really bringing back my thoughts as I was moving through these various research and analysis. Proving effective in gathering my thoughts to compile a case study for the portfolio, while also preparing for the final exam (which I may take next week).
Flow
The aim of a flow diagram is to give an outline of how users move through your app. There are countless routes possible, though with the idea of the paradox of specificity in mind, it’s best to choose the most critical route; in this case the road most worn. The flow diagram will help in understanding where each screen sits in the structure and the sequence of the main flow through the app.
This user flow aims to present as many of the screen states perceivable in the journey through the flight booking procedure for the FlyUX app. It’s based on previous research, aided by the customer journey map from the previous article.
Ideate
First thing was to take a look at the basic high level structure of the Customer Journey Map that I had taped up on the wall beside my desk (as I mentioned in the previous article).That document had a rough top level structure laid out, so I got some post it notes to further visualize that.
After that, I was basically able to sketch out a very top level flow(if I have interchanged top level and high level, they are both to mean the same in these articles). Here I have outlined a flow with a basic set of screens and the order they might appear at.
So one thing led to another and….
Throughout the whole construction of this User Flow I had a printout of the Affinity Diagram and Journey Map at hand. Also, as you can see there I started to compile the user flow (in XD) with the userflow sitting on screen to keep reminding me of those important pinpoints, and top level structure.
The affinity diagram helped in picking out the top level here.
The customer journey map already took all the important points and organized them into an easily scannable categorized document. I had the possible events, actions, or interactions that could easily be poured into the Flow Diagram from there.
The sketching of the flow diagram at first is a definite worthwhile task. It can make you think, a little too much as you can see above, but it’s better to have more options than too few.
Document formatting
I wanted to keep it as linear as possible, though I do realize that it may have been better split into two levels for printability (if that’s a word). You can see what I mean below. Luckily I have pretty good eyesight and imagination.
Not a big issue really, anyone can poster print (like the flow diagram on the wall) just a4 is nice and accessible for the desk or file.
Back to the formatting..
I had one horizontal area (darker grey) in which the main screen states were placed on or near. That was the one main flow direction from left to right. There were a few exits from the main flow for vaious options, extras, or returns to previous screens.
Above the main flow was a top-level step flow, colour coded to match the screens. Above, for example shows BLUE: Step 1 — begin search. This matches the screen states below, which all actually occur on the same screen.
As you can see above, not all colour coding matches up with only one screen. Here is showing YELLOW;GREEN;PURPLE: STEP 2- Flight Search. The gradient’s purpose was to link the 3 screens, and their states, as one step in the booking process.
Elements and Key
It’s a relatively complex document so it requires a key for easy understanding. I hope one can understand it without a key (feel free to let me know below if you could or couldn’t).
Screen state: As I mentioned above, these are screen states, and colour coded according to the above top-level steps.
Action: This is the action the user makes in order to move on to or acheive the next screen or screen state.
Future Edit: This signifies the ability to edit data previously entered on screens, as a way back to that screen state. These were shown at the Summary Screen, a time when a user may want to adjust or edit their data.
They bring the user back to the colour coded screen or screen state that has the ‘Edit’ box.
Additional Notes: These notes provide additional information regarding an action or screen state. Used also as ‘if’ cases.
Screens and Screen States
Initial
When creating the prototype later actualy I chose to emit the first two screen states there. These were not important in the journey for the purpose of prototyping/testing. I also heard conflicting arguments for splash screens. Every airline has them, though are they really needed. The initial log-in screen would suffice (a screen I wanted to use, based on research that found approximately 50% of users would log into use the site or app).
Home Screen
From various options in using the site (member log in, social, guest) you arrive on the Home Screen — the main screen of the app. This screen has many states and the Destination and Arrival Search function was done on a separate screen, though always brought back to the Home Screen.
A simple example there of how the screen states are shown can be seen in the second last and last of the Home Screen states. Tap Confirm, then the Calendar Button is highlighted for selection. It’s such a small change to the screen, though very important in affordance and interaction.
You can also see the Additional Notes at play here. These are all used as ‘if’ cases. ‘If change of mind’ was to allow a user to log in as a guest even after selecting log in as member, with ‘forgiveness’ in mind as much as possible. Always good to let the user have freedom and control where possible.
Flight Search
As I mentioned earlier, this step consists of 3 screens and states. It left the main timeline for expansion of flight details, which is an optional state.
This section also includes an optional ‘share‘ and ‘save’ function, also something that consistently came up in research data. You will see how this was integrated later in the coming articles. This layout here directly assisted in designing that.
Choose Fare Types also deviates from the timeline to expand on details. After tapping ‘Fare Details’ the user can view additional details on the selected fare or flight. This section admittedly required extra attention later when designing. This was a little vague and not fully thought to be honest.
Passenger information
The Passenger Information step was included before any extras, to give some clarity when adding extras for people included in your booking. This section is lacking some screen states after each form entry. I kept it at a top level not to over complicate this part of the flow. It was important to have the various methods of data entry (previously saved, logged in, sign up, social) available and mapped out. The entire action(s) of entering ‘passenger details’ (for everyone) and confirmation bring you to the next step.
Baggage and Seating
For this step you’re first presented with the main Extras screen where you can decide to choose Baggage, Seating, or just continue without either. In the case of baggage and seating — you can flow through both, in order. Or choose either of them. After confirming the selected information you are brought back to the Extras screen where you can review your choice and proceed to confirm.
Summary and Payment
The Summary step presents all of the information entered so far throughout the booking. As mentioned previously, the ability to edit main details entered was available at this stage. It provides an easy way back if any mistakes were made. The use of the back button on some apps is very inconvenient, and leads to loss of data and errors frequently.
The Final Flow
This diagram takes some work to get your head around, it could be edited an unlimited amount of times. I was happy with it at this stage, however, and I felt it was ready to guide me through to the next phase of the project — the design. Having both this document and the Customer Journey Map with so much detail and thought made the next step in interaction design and sketching out a low fidelity prototype very enjoyable.
In the next article I will detail the interaction design process and the connections with previous tasks, and hurdles I encountered with that.
Cheers for reading.
