Effective Design Mapping in 30 minutes

Hey there. What is up? We're about to do a workshop, a 30 minute workshop on workflow mapping. So we're gonna set the timer right here and we're just gonna jump right into. We're not gonna waste any time. But the first thing we are gonna do is we're gonna connect for a second. So we have five minutes for just connecting, getting to know each other, five minutes for why mapping is important. We're gonna do 15 minutes of the workflow mapping, show you how fast and efficient we can be, and then the last five minutes we'll do next steps. Sound good? Sounds great. All right, awesome. So the first thing that I want to talk to you about is why, why, why are we here? What are we doing? Why are we product designers or why are we makers or why are we creators? Well, the idea is like we're a designer or if you're aspiring to be a designer, you're aspiring to be get to your next level at design. System thinking and product thinking and product strategy is something that you're going to need to get better at and better at every single time you take on a new project. And when you're taking on new projects, it feels really good when you, when you have clarity, when you have an understanding of how to approach some of these big challenges and big problems. So mapping to learn is about understanding and breaking down and information so that you can identify the problems, you can identify the opportunities, you can create strategies from those opportunities, and then you get to go create a lot of ideas and do some product creation. And by setting yourself up, by having a plan with a map, it helps you, it helps you understand where you can take it, what you can do with it. But if you were just to go in and start drawing and sketching off of one idea, you, you might lose out on a lot of other opportunities. So that's why we really want to make sure that we're doing this and that, you know, it's an important part of the process. So if this is your very first time getting into mapping or thinking about mapping, we're going to start today with just doing an audit of an existing experience and start identifying what the potential workflow map is. And the website that I chose for this is. Let me just show you. So the website that I chose for this is a Durango visit, Durango, Colorado. And I chose this because I don't want to get a lot of heat right now from a lot of other products and ecosystems like out in the market, like SaaS, products that you know when we start picking apart some of their products, I don't want to go there. So what we're going to do is we're just going to start with this traveling website and, and show you how easy it is. You know, it's very visual and it's about traveling and it's about taking on, you know, the adventures of Durango and understanding a lot of different things. They have meetings and events, they have travel guides and just a lot of other fun things to do. And if you've never been to Durango, then, hey, this could be a nice little tour for you to really understand what Durango is all about. And, you know, that might be kind of fun for you. So we're going to go through that, we're going to map it out. We're also going to kind of give some tips and tricks along the way and some keyboard shortcuts and things that you can do to make this incredibly efficient. Because when you start to learn how to kind of maneuver through tools like Figma or Sketch or other tools like InVision, it's so critical to know your tools, know how you're going to maneuver through things, know what assets you have at your disposal. And right now we have these really amazing tools that we can use to really move really fast. So that's what we're going to do in this workshop. All right, well, you know, we have about a minute left till we get to that five minute mark. But I do want to do want to say if you have questions, comments, or any of that, please feel free to just directly DM me if you have questions about any of the content that you experience from Next Level ux. Because this is all about you. This is all about helping you get to your next level. This is all about you helping you become a better system thinker, become an accelerator when it comes to your projects and getting things moving and going. So I'm here to support you and I want the best for you. And so it's just going to be a lot of fun to partner together and work together. All right, so the next thing that we're going to kind of shift over into is like, why is mapping important? Well, mapping is important because of all the different projects and services that we need to take on on an ongoing basis. Now think about the last project that you started. Like, where did you start? Did you start in a place where you got an assignment from your manager, or were you told that you needed to go and do some visual design for an experience and then you just jumped right into the problem, and then you just started designing. Maybe, maybe not. But I've met and talked to so many designers that they bypass this mapping, this mapping part of this experience because they're in a rush or because they don't have time to do it. But I'm here, and I want to show you how simple it is to actually do this work up front where it can take 15 minutes of your. Of your day to at least get your foot in the door, at least start understanding how the system works. Because once you start seeing how a system works, you can start seeing all the other connective tissue and the connective parts of it and around it. And that's just a critical thing for you to be able to know how to do. And you want to be able to talk about your products. You want to be able to understand them. You want to be able to be like, oh, yeah, these are all the entry points into the experience. These are all the ways that somebody can buy. These are all the opportunities in the product where we could make more money or we could improve this experience. So these customers are having a more delightful moment. I mean, there's just so many reasons why we want to understand the entire ecosystem. And this isn't just for, like, designers, right? Engineers, product managers, and everybody can see this work along the way. So let's. Let me give you a really quick hypothetical. Let's just say tomorrow you come into the office and then they're like, hey, hey, hey, Drew, we have a new project for you. And it's definitely going to take. It's probably like, we have a three month window. Okay, you have 90 days. We have a three month window. You have 90 days. And then you ask, well, you know, what is it? And then they say, well, we're trying to redesign this experience. We have a little bit of research, we have a little bit of an understanding of what we're trying to do, but we need to start on it right away. So what is the first thing that you do? Is the first thing you do just jumping in and start sketching out ideas with your team? Do you start forming a brainstorm? Do you start, like, have a kickoff meeting with your team? You probably do a lot of these different things, but one of the top five things that I think you need to be thinking about and doing when you get a new project is, is start laying out all the ingredients to that project. What are all the problems that you're trying to solve? And if there's like a hundred problems, then you need to dwindle it down, right? You need to dwindle down to like three or four. Because if everything, if you're going to work on everything, then you're probably not going to really have a dramatic impact on the specific problems that you're solving. So we want to make sure that we understand those problems. And if, if your team's like, we don't know what the problems are, we're just, we were tasked to do this. That's when you can initiate research, you can go in and ask the questions. But what you can do is start showing the product, start talking to customers, start understanding how this all works. But it all comes back to a map because you can start seeing, oh yeah, we can plot this, we can plot this, we could plot this, we can work on that, we can work on this. This is really weak, this is really strong. Let's stay away from the strong stuff. Focus on the weak with the weak parts of the product and then bada bing, bada boom. You have structure, you have guidance, you have a plan. And then you can plan of attack or create a plan of attack and then take, take it on. So what we're gonna do now is we're gonna shift gears. We've been talking for eight minutes like you've been sitting here with me for eight minutes already. And we're gonna switch the workshop. Now you got your precursor, we're gonna go into this content and just kind of have some fun. All right, so we got the current experience, so we have this over here on the right. So what I'm going to start doing in our first step is I'm going to end up mapping this out. But to do that I'm going to jump back over into figma. Okay, so now what you see is Figma. And this is kind of like a little just worksheet that I have. And if you are enrolled into the program, you get a lot of these types of templates and you get a lot of these types of resources if you're, you know, inside mapping to learn and Next level ux. So this is like one of my starter templates that I have. So something that I want to. Something that I want to map. Well, I want to map the Durango Colorado visitor visit visitor site. It's the core site. It's durango.org durango.org alright, so what is this? It's a tourism website. And then I'm going to reduce this. Go really small. It's a tourism website. And why are we doing this? Tourism website? Because we might consider moving to Durango one day. All right, so we have that. What it is, why is important. And then how does it work? Well, it is a series of events. It's a series of events, activities and places to experience. That's how the site works. All right, cool. I'm going to make this. So I like centering things. Right. Making it kind of nice. Okay, cool. So my task for today is I'm going to map out the general ecosystem. I'm going to map out the general ecosystem of the product. Okay. And then also what I want to do is I can come back to these things later to understand like the context of this product. Like. Well, the context of this, like why is it created? Well, it's. It's used to help educate the community and visitors on what Durango has to offer. Right. So you could do this to your product as well. Right. What problem are they trying to solve? Well, and there could be more of these. What problem are they trying to solve? I think that they're trying to solve. They're kind of trying to elevate how amazing Durango's nature is. All right, cool. We got it. Questions? What do we need to learn? Well, we need to learn the variety. Well, let's just say we were tasked to redesign this page. What we would want to do is we need a quick map. We need a quick map of how many page types and types of content we have to work with. We also need to know like we have video format, we have plans. I'm just looking to my other monitor over here to the right while I'm doing this. I know you might not be able to see me right now, but we also want to know just maybe if there's any logic and systems already place. Right. So maybe there's like sign up flows, maybe there's like calendars that you can integrate with just whatever is like the functional functionality of that sort of stuff. All right, cool. All right. And then what success look like for this project? Well, increase Durango's revenue and in this site probably has ads. So increase. Increase value of ads. Ad spent. So there we go. We have a general idea. Right. This took us a couple minutes. Now we're ready to move on to the mapping. So I've created this just to help us get the ball rolling. And what I'm going to do first is take my first screenshot and if you're on a Mac, Then Control Option Shift 4 takes a screenshot and copies it to your clipboard. And, and if you copy it to your clipboard, then you can come in and you can paste this piece into it. So this has a ton of pages, but I'm just trying to capture the first homepage. Okay, I know there's a homepage. Now what I'm gonna do is come over to the events. So I took a screenshot of this page. Now what I wanna do is take a picture of events, okay. And events has like this big giant hero. So let me just make this a little bit smaller so I can actually see a little bit more of the page. And then what I'm going to do is take another screenshot. So I take a screenshot. Pow, pow. And then I paste it in and I'll come back and then I'll go to outdoor and then let it load. And now I have, boom, outdoor. I'm going to do it. The things to do. And then I'm just going to keep going through these real quick. Right? You see how long this is taking me. This is giving me an idea right now of just the index. And I could, I could literally just type this out, right. But I'm a designer and my responsibility and goal is to really start absorbing the entire product ecosystem. So things to do. And I can already see they have a little bit of a page type here where they have this hero graphic coming through. But really, is that the best use? I'm already calling things out. Is this the best use of this real estate? You know, is this the best use of the real estate? So I come back, paste it in, paste it in. Boom. We're going to keep going. We're going to go to restaurants and then we're going to go to plan. So what you're also doing, when you have this ability to go in and map an experience, you're able to start seeing why certain decisions were made. And if you have one of these to start with, then it looks like the page isn't loading. Let's go. Performance, performance, performance. Alright, cool. So we have our restaurants and you know, restaurants is a really important part of the culture in Durango. So that's something that, you know, is it, is it being represented in the best way and then planning a trip, right? We got huge text over here. And so we have these seven and then we have these other minor pages like meeting and events. So we'll go check that out. All are using the same page type. So for right now we have two page types that I see and that I'm sure you see as well. And then we have. This is our travel trade, right? Travel trade and the news so, you know, this might feel a little tedious, but what happens is your architect. You're. You're an architect of this new vision of wherever this is going to go. And it's important for you to honor that, because what. What you do now is not just the work that you're gonna. You're not just gonna affect the work over the next three months. You're gonna be affecting the work over the year, years to come. This isn't just like, you know, if you're a product designer, these products last. And, you know, one thing that I'm already starting to realize is there's just. There's just so much on this website. It's. It's overwhelming. You know, it's kind of overwhelming. So you have the fall, we have the blog, and then my itinerary. Let's go see what my itinerary is. There is a certain aspect of my itinerary that looks like it has a little bit of an experience tied to it where you can share your trip. So then we have 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11. So we have in the news. And then what I might go really quickly and just do is just like, home, home. We have events, and we have outdoor. We have things to do. And you can see, look, the titles aren't consistent from, like, the page names and stuff. So that's, like, something, you know, we might want to call out. We have meetings. Let's see. Meetings is meetings and events where, you know, if we had restaurants, plan. I wonder if that was. Yeah, okay. All right, so we have these. We have plan. We have restaurants, we have hotels, travel, and we have 10 more minutes left. So you're already starting to see, like, how all this is. Can happen so pretty, so fast. So in the news, we have news, blog, plan. A lot of actions of what you can do. And these two things are very similar. Right? So after restaurants, we had. We had plan your trip. Let me just see if I just had a duplicate or maybe they were just showing different photos and they might have been. The site's a little slow, so we might have. We might be good on the plan side. So we have our core. Our core pages. And then if you looked even down below, there's a couple other, like, partner login about. Let's see, what about. Right, we should take a. So these are all, like, secondary pages, and then we can keep going. So we just go back to the bottom of the bottom of the site. We have press room, but the press room might be very similar. To what we have in the news. So, you know, that might be something we want to figure out. Like, why do they have different a press room in the news room? Like, what's the whole reason for that? All right, cool. And you know what, I hope you're enjoying this. I hope you're having fun. Golly, it's so much fun designing with you. And okay, press room. Cool, cool, cool. So we have press room and if we go back down to the very bottom of the site again, we have three more, four more that we need to make sure we capture. Right. So you're starting to see like, okay, wow, if I was going to redesign this page, I have to start thinking about all of the different pages and the different pages that would need to be supported in this experience. And then how are my, how are my users? Like, how are my guests that are going to be using this experience? How are they getting served? Like, how are they getting served in this experience? Like, maybe, maybe there's a lot of other ways to serve people on a tourist website that makes sense and that can, you know, best support the actions that people typically take. Like, I'll talk about that simply a little bit. But you know what, we're just taking a quick little audit. And now we do a partner and it looks like they have some PDFs and this goes to a completely different product where they have an intranet. Makes sense, Makes sense. Alright, partner program. Maybe they have like affiliates and like for people that are advertising, this is where they go. So then the partner program, you get signed into the partner program and then you would take screenshots of all those sorts of things. So already I'm starting to see that out of all the page types, there's only one in the blog where they have the topics listed underneath. So that's like one different type of page. So I'm gonna mark that real quick. Alright, so we're gonna mark this one because that's a different page type. And then all. And then this is a different page type. And then we have three page types. We have another one down here that just shows a list of information, but it's probably in the same exact format. There's just no title card. And then we have a whole other product that we would need to look at. And if I come back here, you know, there is a search results page which I saw up here, but let's see if I searched food or good. Just say good. And then it looks like they probably are using like a Google search for that. All right, cool. So what we did, and we have about five minutes left of the session. So what we already did was we tackled, like literally tackled what is this site, what is its purpose? What does it do? We captured the different parts of the site and then what we would be able to tackle from next, the next thing as next steps. Like what would we do next? Well, what I would, what I would really like to do is I would like to go in and uncover. Let's see, next steps. And it's always important to know what your next steps are. What are the next five needle moving steps? Well, I think one of them. Let me just paste this. One of them would be two to review the data and analytics of the product and see how the product is performing. Alright, so we need some data. We also need to know what our primary revenue streams are for this product. Okay, we need to know what our primary revenue streams. We need to know how do we make money and how do you. We lose money. So that's a question. This would be for questions, this would be for insights. Right? So we have insights, we have questions and we probably also need to know like platform, which platform is or how frequently is the content updated and who manages the assets. Right. I'm kind of curious like how like you come back to this page and how frequently is it, is it there? It's not collecting people's information or email. So if you are running a business like this, you want to be able to collect emails so you can send people tips and notes and things about Durango. If this is all about Durango, there's a lot to share, right? I mean we have 1, 2, like 4, 12, 16, like there's a lot of content on here that is buried because the content on the site is really, you know, it's vast. So how would we be able to get in there and see what our primary users are looking for? And then you know, those would be more like opportunities. So once you have like a generic set of questions, Maybe there's like 10, 15 questions. There's like 10 to 15 plus questions. You could get those from an owner, from a CEO, from a product manager. You just ask a lot of questions. Then what you would also want to do is get your opportunities. But you can't uncover opportunities until you have problems. Like what are the problems? And then you would go to the opportunities and then we would even break that out and do like our strategy, our new strategy from this and oh my gosh, like this is the stuff that I love to do. And then, and then basically what we would be able to do is after we have this, this certain elements of our work, right, we were looking at Figma here. Let me see why that. My, my, my face right now is not on there. Camera and XD2. There we go. There. I'm back. Sorry about that. So literally, if we have these, these elements now, what we get to do is we ask the questions, we get the answers, we look at the data, we talk to customers, and this is like the sweet spot where we get to go fish, figure out the problems, like detective mode. We get to figure out the opportunities from those problems. Right, with these tactics and trainings that we can, that we can unleash, like brainstorming sessions. And then we would formulate a strategy for how we're going to go and tackle this and knock it out. But the thing is, you've got to see, you can see the overall picture of this. And then once you go in and start tackling these things, you can start just crushing it with your approaches. And, you know, if we were just focused on a signup flow, just take screenshots of the signup flow. If you're just focused on one area of your product, then just do that. There is, there's no really wrong way to do this besides not doing it. Like, you don't do it and you don't understand your, your platform, your system. And that's the challenge. So I hope this helped you and I hope to serve you. This was a really quick crash course in workflow mapping. And yeah, if you have any questions, please feel free to DM me, reach out and I wish you an amazing rest of your day. All right, see you later. And yeah, that's it. All right, later.