Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
As you design an experience, diagram the user flow for each user role to visualize the user role's journey for a given task.
Resources
Slack
Screenshots in Google Chrome
- Step 1 - Open the Command Menu with Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS).
- Step 2 - Start typing "Screenshots" and select "Capture full size screenshots".
- Full-Page Screenshots in Chrome (video) - walkthrough showing how to do it via the menu instead of using commands
Screenshot browser plugins
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
Let's diagram user roles.
0:01
It can be confusing to think
about the various ways
0:04
different user roles will
experience a product.
0:07
To keep track of it as you design
an experience, diagram the user flow for
0:10
each user role.
0:14
A user flow depicts a user's
journey through the product.
0:16
It's especially helpful for
visualizing complex apps,
0:21
with different available actions and
screens depending on user roles.
0:24
Let's create a user flow for Slack.
0:29
I'll be demoing the free version of Slack,
so feel free to create a new workspace and
0:31
follow along.
0:36
Note that Slack may look different for
you.
0:37
The product may evolve to look or
0:40
operate differently than it does
at the time of this recording.
0:42
I'll be using Adobe XD
to create the user flow.
0:45
I recommend downloading
the project files to follow along.
0:49
We'll diagram the user experience for
two user roles, admin and member.
0:52
Specifically, we'll focus on the process
of creating a private channel and
0:58
inviting a new user to it.
1:02
As we saw in the previous video,
these roles have similar and
1:04
differing capabilities.
1:08
Let's take a closer look.
1:10
The first thing to do is to document
the experiences for both of these roles.
1:12
I created a free workspace.
1:17
Naturally, I'm the admin
of this workspace.
1:19
Then I created a separate account,
which is a member account.
1:22
I can switch between these two
logins to see what they see.
1:26
Next, I'll go through the process
of creating a private channel and
1:30
inviting a user to it.
1:34
I'll take a screenshot of each screen.
1:41
Try to keep your browser the same size so
the screenshots are the same width, so
1:44
they look neat and consistent.
1:48
You can take a screenshot of the full
page by using Chrome DevTools.
1:52
Go to the three dots menu in
the top right, select More Tools,
1:57
then click Developer Tools.
2:02
Now, open the command prompt by pressing
Cmd+Shift+P if you're on a Mac,
2:05
or Ctrl+Shift+P if you're on Windows.
2:11
Type screenshot,
then select Capture full size screenshot.
2:16
Then wait a minute or so, and you'll see
a prompt to save the screenshot image.
2:21
If you prefer a plugin, check out
the teacher's notes for an option.
2:28
Collect screenshots for every screen
in the flow for both user roles.
2:32
Then drag the screenshots into Adobe XD.
2:37
Take care to denote where
this screenshot came from.
2:41
Was it the member account or
the admin account?
2:44
Add color coded notes and
arrows for each user role.
2:48
Here, you see how the admin is pink and
the member is blue.
2:52
Next, add labels for each screen.
2:57
It was interesting to discover
the process to create a private channel
3:02
is the same for admin and members.
3:07
So instead of duplicating that flow for
3:11
each role, I combined the arrows to show
both roles experiencing the same flow.
3:13
This shared experience splits into
two in the invite a member flow.
3:20
For the member, there's an invite modal
set on a darkened background, and
3:25
there are limited options.
3:29
For the admin, there's an invite
overlay that spans the entire screen.
3:34
And there are additional actions, such as
the ability to change the default channels
3:39
members get added to, and
creating an invitation link.
3:44
Diagram those alternate
experiences in your user flow.
3:49
Now, if we zoom out to look at this from
a big picture, we see these two roles
3:52
have an overlap in their user experience
as well as a few divergences.
3:58
This is a tool you can use
to present user roles.
4:02
As a final note, let me show you
another way to diagram this user flow.
4:07
Perhaps you're building out a new
product that doesn't exist yet.
4:12
Or perhaps you're completely reworking
an existing user experience.
4:16
In that case,
you won't have screenshots to use.
4:21
You can create the user flow using boxes.
4:24
Here's an example.
4:27
You can do this with wireframes or mock
ups as well instead of using screenshots.
4:32
Whatever stage you're at
in the design process,
4:37
you can use this method
to explain user roles.
4:40
Great, now you know how
to diagram user roles.
4:46
In the next video,
4:50
I'll present some best practices when
it comes to defining user roles.
4:51
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up