User Flows & Journeys

Trying to solve a problem without fully understanding it first is like trying to plug a leak in a dam with your finger. Mapping out user flows is the first step in painting the picture of what a user is experiencing when they interact with a product.

Proof of concept

What am I looking at?

The example shown is a demonstration of the user flow on the Meetup app. It illustrates the transition of the user between screens and what the decision points are in order to get the user to their end goal of attending an event.

Through analyzing this flow, we can better understand the challenges and opportunities to improve the UX through improved UI.

Refining an onboarding experience

Challenge

Pace is a fictional goal-tracking sports app where users can set goals, track progress, and rate workouts. The onboarding experience presented by the designer requires the user to input certain data, grant permissions for GPS location tracking, and create a goal that tracks an activity, time, and type.

All the requirements were being lumped into one screen and did not make for a smooth or intuitive onboarding process for a user.

Approach

The first step was to brainstorm and sketch out what my thoughts were for the most intuitive and straightforward approach to collecting the data we need without presenting unneeded friction preventing the user from taking action on their goal-setting.

My initial reaction was to separate out the collection of basic data, gaining user permissions, and specific goal information into. I like the designer's mockup in that it illustrates well the visual progression of a multi-step task, but I only want to use it for the new goal setup phase.

Fun fact: 

I almost always start with pen and paper. It helps me organize my thoughts before translating them to the computer.

Once I have the user flow sketched out, I can more easily imagine the complete onboarding journey. Here I map out the progression between screens and the user's mood when moving along the path using Miro.

I now take the screens mapped out above into consideration when writing my copy. I start with the second black box per the project's specs.

Here is an example of the first screen.

pace-copy-screen1

Solution

In pushing the user through the collection of height and weight, we're able to apply that to the tracking of all their goals. We then can present the user with an empty state screen rather than leading them through an uncomfortable amount of initial steps just to get started.

I thought it made sense to isolate the Activity information and also use this point in the journey to make the user feel like they're in control of what they do next. They can explore on their own or choose to follow the instructions to create their first goal. In theory, this will reduce the bounce rate and increase user engagement with the product.