Welcome back.

Let's diagram user roles.

It can be confusing to think about the various ways

different user roles will experience a product.

To keep track of it as you design an experience, diagram the user flow for

each user role.

A user flow depicts a user's journey through the product.

It's especially helpful for visualizing complex apps,

with different available actions and screens depending on user roles.

Let's create a user flow for Slack.

I'll be demoing the free version of Slack, so feel free to create a new workspace and

follow along.

Note that Slack may look different for you.

The product may evolve to look or

operate differently than it does at the time of this recording.

I'll be using Adobe XD to create the user flow.

I recommend downloading the project files to follow along.

We'll diagram the user experience for two user roles, admin and member.

Specifically, we'll focus on the process of creating a private channel and

inviting a new user to it.

As we saw in the previous video, these roles have similar and

differing capabilities.

Let's take a closer look.

The first thing to do is to document the experiences for both of these roles.

I created a free workspace.

Naturally, I'm the admin of this workspace.

Then I created a separate account, which is a member account.

I can switch between these two logins to see what they see.

Next, I'll go through the process of creating a private channel and

inviting a user to it.

I'll take a screenshot of each screen.

Try to keep your browser the same size so the screenshots are the same width, so

they look neat and consistent.

You can take a screenshot of the full page by using Chrome DevTools.

Go to the three dots menu in the top right, select More Tools,

then click Developer Tools.

Now, open the command prompt by pressing Cmd+Shift+P if you're on a Mac,

or Ctrl+Shift+P if you're on Windows.

Type screenshot, then select Capture full size screenshot.

Then wait a minute or so, and you'll see a prompt to save the screenshot image.

If you prefer a plugin, check out the teacher's notes for an option.

Collect screenshots for every screen in the flow for both user roles.

Then drag the screenshots into Adobe XD.

Take care to denote where this screenshot came from.

Was it the member account or the admin account?

Add color coded notes and arrows for each user role.

Here, you see how the admin is pink and the member is blue.

Next, add labels for each screen.

It was interesting to discover the process to create a private channel

is the same for admin and members.

So instead of duplicating that flow for

each role, I combined the arrows to show both roles experiencing the same flow.

This shared experience splits into two in the invite a member flow.

For the member, there's an invite modal set on a darkened background, and

there are limited options.

For the admin, there's an invite overlay that spans the entire screen.

And there are additional actions, such as the ability to change the default channels

members get added to, and creating an invitation link.

Diagram those alternate experiences in your user flow.

Now, if we zoom out to look at this from a big picture, we see these two roles

have an overlap in their user experience as well as a few divergences.

This is a tool you can use to present user roles.

As a final note, let me show you another way to diagram this user flow.

Perhaps you're building out a new product that doesn't exist yet.

Or perhaps you're completely reworking an existing user experience.

In that case, you won't have screenshots to use.

You can create the user flow using boxes.

Here's an example.

You can do this with wireframes or mock ups as well instead of using screenshots.

Whatever stage you're at in the design process,

you can use this method to explain user roles.

Great, now you know how to diagram user roles.

In the next video,

I'll present some best practices when it comes to defining user roles.