User Flow Mapping

What is a User Flow?

User Flows are the core of UX Designer's workflow. This is the task of understanding user goals, mapping out the actions users would take while attempting to achieve those goals, and then creating a visual representation of the screens and interactions users will take to go deeper down the User Flow.

Understand the User Goals:

Begin by clearly defining what the user wants to accomplish. This can be derived from user research or user persona mapping, but for the 70Rad Challenge, focus on the core feature the app is going to address and work it backwards.

Ways to be clear about user goals:

  1. Take the initial idea and consider reasons users may open the app every day, every month, etc.
  2. Those will be the goals you want to address through the UI of the app.
  3. Prioritize those based on importance (management screens are important, but not as important as the day-to-day interactions)

Mapping out Screens & Interactions:

When you have the goals set, you'll be able to consider screens you need to include--and most important--how to access those screens. A well thought out User Flow considers the needs the user has and then the key points of interaction that need to be made to get users there. Secondary Flows like management screens will "take a back seat" in the UI to allow for the more common interactions to happen. This is why its important to prioritize your goals because on mobile apps, there is so little real-estate, you need to be very focused on the goals of the user and help them on their way.

Visual Representation:

Once you have your goals, your screens, and the interactions to get users there, you need to visualize the Flows in a flowchart. You should use something like FigJam and create a diagram for each User Flow based on the starting point. 70Rad challenges you to make 1 Onboarding Flow and 1 primary User Flow. This means you'll have 2 "entry points":

  1. The Onboarding Flow from downloading/signing up for the app
  2. The Day-to-day Flow of the core feature/Flow.

The Onboarding Flow should ultimately connect to the main dashboard which will be the Day-to-day entry-point. But it's a great idea to have a toast message or something to help users transition into the main dashboard.

Each screen in the flowchart should come with a list of general information that will be on the screen along with interaction points that will lead to the next screen.

Example

Consider the prompt, "a plant watering app"

Goals:

  1. Mark when I plant/trim/turn my plants
  2. To do that, I need to be reminded to water my plants
  3. And it'd be great to know how to keep my plants more healthy
  4. Then whenever I get a new plant, I want to be able to add it to my watchlist.

As you can see, it starts from the "core" feature of maintaining my plant's watering schedule. This is the day-to-day interaction users will have. But to get to that point, users need to be reminded to water so that notification schedule needs to go into the Onboarding Flow and also the "Add new plant" User Flow. The 3rd and 4th goals are sort of negligible. You can still bring value for just having a water reminder app, but you can add more value by giving additional information and Flows to address the needs of a budding gardener. Flow 4 of adding a new plant is part of the Onboarding, but will also come up after Onboarding so it may be worth putting that in as an additional Flow since you'd have it designed already.

Screens & Interactions:

  • Initial signup+login
  • Setting up your plants
  • Asking to approve push notifications for reminders
  • "When did you last water your plants?" screen
  • Dashboard with a list of user's plants
  • Screen to log that user watered plant (maybe add additional plant health tips here)
  • Confirm watering + setting next reminder
  • Add new plant screen

Flowchart:

UI Recreation

User Flow Mapping

Moodboarding

Initial Wireframes

Full Wireframes

High Fidelity