Diagramming the Flow of User Roles

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