User Goals, Task Lists and User Flow Diagrams
May 10, 2018
As a web or mobile developer, you may have often wondered what is it really that the UX Designers do? How do you get hands on this magic dust that makes some companies’ products noticeably easier and fun to use? How do you build products with great usability when you don’t have the budget of hiring a UX Designer for your solo side-project?
In the following tutorials, we will explain what goes on in a UX Designer’s mind when they prototype products — so you can think like one too!
User Goals
A user goal is what the user is trying to achieve. For freeCodeCamp, the user’s goal is to learn web programming so that they can start making web apps. For Uber’s user, the goal is to find a cab to get to a destination. For Fandango’s user, the goal is to book a movie ticket. And so on.
It’s important to identify the user’s goals before we start designing anything. What is the user’s problem we are trying to solve? What does the user want to do here? What’s the primary job the user is hiring your product for?
There are usually multiple user goals within an application: we will break each of these goals into a list of tasks that the user must accomplish to achieve their goal.
Task Lists
Once you’ve identified a user goal, you can start breaking it down into a list of tasks that the user must accomplish to complete the goal successfully. For finding an Uber, a task list would look as follows:
- Open the Uber app.
- Enter a destination in the “Where to?” box on top.
- Pick the type of Uber you want (Pool, uberX, SELECT, BLACK, uberXL, SUV etc.)
- Make sure the Payment method is the one you desire to pay with.
- Press the Confirm button.
- Confirm the pickup spot.
- Wait for the car, take the ride, get dropped off at your destination.
- Review and tip.
Task lists look very simple at the face of it but can end up becoming complicated and confusing. For instance, Uber made a conscious decision to add a Confirm pickup spot step (Step 6) even though they can be reasonably confident that the GPS would pick your location accurately. Additionally, some tasks can be done in any order, some tasks may require other tasks to be done before them (step 7), or some tasks may even be optional (step 8).
User Flow Diagrams
Given a task list, you can convert it into a User Flow Diagram to show how a user will move through your app. User Flow Diagrams help you reason about how the application will work before you start any prototyping/building. It’s the same as the task list, except it’s a flowchart that uses symbols and arrows to communicate the task list more visually.
Here’s two User Flow diagrams comparing Uber to Grab:
