 How's everyone doing? How was lunch? Good? Yeah? I thought maybe the after lunch group was going to be tired because you get that dip after lunch. Because it'll look like you're awake still. So that's good. So yeah, we're going to talk about the whole process, whole web of the process today, hopefully cramming this into the next 35, 40 minutes for you. So from discovery all the way to design, we'll talk about all that different stuff collaborating along the way for a user-centric website. So just a little bit about me. Obviously, you heard a little bit. I'm a UX UI designer. I started as a print designer. Kind of came over to the website of things just because I like to have my hands a lot of stuff. And lots of that involves a lot of that deeper thinking, analysis, which I like as well. So kind of bringing that together with the visual design, too. I work at a company called TealMe.com a lot on nonprofit and ad-libs website. So that's some of the stuff you'll see here that I'm talking about when I get into some examples. So just a little background of that. So collaboration. Who likes to talk to people? Who hates to talk to people? Yeah, 50-50. Me too sometimes. So it sounds like we have lots of different types of people. A designer in the crowd. All right, awesome. Who's the developer? Awesome. Who does like UX, the, oh, good. Awesome. I know, right? Yeah. Let's see, let's do. So who's worked on a web design project before that went bad? Yeah, yeah, most of us probably. So a lot of times when those projects go bad, it's because there's not a lot of collaboration. There's not a lot of talking, working with clients, working with the rest of your team along the way. So that's why it's super important to do that in order to have a successful project. So we're also going to talk about user-centric design. So what does that mean? Anyone? Yeah, yeah. So we're really thinking about what the, there we go. All right. We're really thinking about how are we creating this website for our user. So little definition, this might be Wikipedia. I can't remember, I got it. But user-centric design is a framework of processes in which a user's characteristics, habits, preferences, and goals are given extra special attention at every stage of the design and the development process. So we're doing that in order to create the best user experience possible. So that's what is critical of this whole process. So why do we need to collaborate for user-centric design? As my mom says, because I said so. Just kidding. Does anyone else's mom say that? It was always the reason why we couldn't do stuff. So when clients, users, and creatives. So I've highlighted these in different colors because those are kind of like the big buckets of people that are really critical to the whole process of creating a website. When all of those buckets of people have common consensus, then decisions become obvious. So we start to get away from, well, I want this. And I want this. When we start to talk about what are the user needs? What are the user's goals of the site? Then we're focusing on that. And decisions are always geared towards how is this going to be the best experience for the user. And then decisions start to become more and more obvious as we go through that. So looking at just kind of a general web design process, these are the steps that we're going to talk through. Discovery, starting out with that research and gathering our information, doing some user mapping. I'll get into all the details of this stuff. Mapping how is the user interacting with the site? What are their goals? What do they look like? IA or information architecture, UX, is that user experience? So that typically comes kind of in that wire framing phase. And then we'll get into some stuff about visual design. So step one, discovery. Like I talked about, anyone do a lot of the discovery research stuff? Yeah. Yeah. Super important. Not always the most fun, unless you really like that stuff. But if you are a developer or a designer, this is not the most fun. So doing things like their needs, what are they trying to get out of the website? Designing a website, you might ask them what their pain points are on the current site. Also surveying stakeholders. So your client that's maybe paying for this whole project, they probably have some goals of their own. It's more organizational type of goals. Doing design surveys. So colors, we need to stick to. Branding requirements, things like that. Looking at Google Analytics or any other sort of analytic data. Maybe looking at other competitor websites. Kind of seeing what's out there. How do we make our site better than what's or at least stand out from other websites in the space? Usability testing. We could do some testing on the existing website. And just observing people using the site. Seeing where they're getting hung up. Establishing what pain points might be and what goals might be. And then after doing all of this research, it can take weeks, months maybe for larger sites. Really, really good thing to do is have a written website plan. That's hard to say. Written website plan at the end of it that says, here's what we did. Here's all the stuff we found out. Here's our goals. And then coming together with your team. Maybe asking your client for sign off even. So we're all on the same page before we go to the next step. So we found out some stuff. What happens next? So the next step would be user mapping. So that's thinking about who are we designing for and what do they need? So we're going to go through some of these things together looking at some user personas, empathy maps, and journey maps. So this can be a really good way to help put some color and some flavor around who you're designing the website for. So who are we designing for? What do they need? So this is Arthur. Arthur is an aficionado of superhero stuff. If you guys are not big into the superhero space, today is a national superhero day. So did I lose my thing? Uh-oh. Someone's taken over my. I don't know who this is. I know. I'm plugged back in. OK. I'm not sure what's going on here. OK. Someone is really getting into this collaboration aspect. There you go. Nice. So now it should just be in line. Is it? Right. Well, I'll tell you a little bit about Arthur as hopefully they can get me back up and running here. So Arthur, I had this set up in kind of a persona light. So yeah, cool. We'll see if that works. So a little bit about Arthur as we try to get this working again. Arthur is a 44-year-old computer data engineer. So as we're thinking about our users and who we're building this site for, I think I got distracted, forgot to mention that Arthur being a superhero aficionado, we're going to build a website for him for superhero stuff, Heroes of the Month Club. So Heroes of the Month is going to be, go along with me here, a subscription service. There we go. Awesome. So Heroes of the Month is going to be a subscription service for folks like Arthur to sign up and get a new superhero program every month. So that's our task. So we're going to pretend to build this website today. So this is a little bit of a persona about Arthur. We've given him a picture so we know what he might look like. Some information about him. He's 44 years old, computer data engineer, perverted, would not like this collaboration workshop here. He's socially awkward, but has a serious girlfriend that he met online. High-focused on what he cares about. Everything else is just noise. So as you can see, he spends a lot of money on superhero collectibles. This is his passion. And he really loves dressing up in superhero costumes to impress his small group of friends when they get together. So what is it like to be Arthur? Now that we kind of know, oh, we'll be Arthur joke. Now that we know who he is, let's think about what it's like to be him. And these exercises that I'm kind of running through quickly, like developing a persona. And this is kind of an empathy map exercise. I recommend doing these types of things with your team or with your client. Then we start to really, like, again, collaborate with that common understanding of talk through the prizes along the way. So Arthur, in this empathy map, is showing a little bit more about him, some of the things that he might be feeling, some outside influences that he might experience, what his pain points might be, and his top goals. So we'll kind of chat through this a little bit together. Thinking and feeling, so he might be thinking and feeling that I want to have the best costume for the next party. Hearing and seeing, he likes to watch movie talk. There's a lot of drama going on about the latest Marvel release not being true to the comics. So he's got some outside influences that are affected. What is he saying and doing? He's looking at other websites, superherostuff.com. That's a competitor of our new website. Looking at that, considering that instead. Pain points, he's swamped with work. He doesn't have a lot of time. And then his top goal would be that he wants to find what he needs very quickly and then move on. So does anyone else have maybe some ideas of what he might be thinking and feeling or experiencing that we could kind of add to this list as we start to think about Arthur? Yeah. Yeah. Yeah, so that's like a motivation. He wants to kind of impress some of his friends. Yeah. So along those lines, we want to make sure he's wearing the right brand. Yeah. Yeah. Right. Yeah, he wants to be authentic. So it's got to be really good quality stuff. Price point, yeah. Thinking about that. Because he does well as a data engineer. But he spends a lot of his money on other stuff. Anybody else? Maybe one more? Yeah. Along those lines, we might be looking for something that nobody else has. Yes. He wants to wear something that nobody else is wearing. Yeah. Yeah, so that's really great stuff as we start to think about content and how are we building this site for our user that's really concerned about finding a really good costume, an authentic costume, looking at cost and price. Awesome. So what does that experience start to look like for him? So now we know who he is. We know his pain points, his desires, maybe some other influences he's experiencing. So this here, if you can see it, is kind of a journey map. So we're mapping out his journey. And of course, as a user, we should also be thinking that he's probably not everyone is going to go through this exact path through the website. But this at least starts to get us thinking about content, functionality, coming back to what the goals are with our team as we go through these exercises. So starting with this first step here in this map for Arthur would be discover. So he discovers the website somehow. So how might someone just discover a website? Search, yeah, Google, Facebook. So they still your answer? Search, cool. Yeah, convention or trade show ads. Yeah, yeah, that's really good too. So thinking about how your user is finding your website can really drive some of that strategy as well and maybe even some additional marketing strategy behind the scenes. So once he finds the site, he calls the site and he starts to engage with the site. Just initial step of getting familiar with the site, getting familiar with the brand. So I first come to the website, what might I as Arthur do on the site? What might I be looking for? Look for costumes. Yeah, so he probably wants to search or shop. Yeah, he might be looking for. He even wants to sort by different, yeah, by different ever. Anybody else? So that's like how he's getting there. He wants to, we have to have some sort of functionality to allow him to search for stuff or to understand what we're doing on the site, what we're offering. Once he gets familiar, hopefully he likes what he sees, we get to the next step of converting, so conversion. So he's ready, he found a costume, he likes the site to allow, yeah, that's super smart. Yeah, I wasn't even thinking about that. Awesome. Great, so he's put his costume in the shopping cart, gone through the checkout process very securely. So he's happy with his purchase. So then of course, we're hoping that, we're hoping he's happy. We're hoping that then he comes back and we're retaining him as a client. So he might want to buy again or kind of re-engage with the site. So if we're thinking about content or functionality for what might be different from the time you come to the site. Yeah, yeah, that's great. Yeah, so like other people bought this or something like that. We're seeing at this like mental level of what we need to have on our website. Also that he advocates or shares this website with his friends so we'd want to include what? Or this offer, yeah, really good stuff. Okay, so a couple of pro tips. As I mentioned, empathy maps, journey maps, creating a persona. Really important to do this with your client. Otherwise you're just talking at them and they probably don't get it. So if you go through this process with them, they have to actually like the shoes of the user and really understand why we're doing it this way. Because the user add this to the shopping cart really fast and then check out in a seamless way. And it's not so much about what your client wants. It's more about what the user wants. So putting yourself in the shoes of the user, forgetting about personal preferences, it's always difficult, always a point of contention. Thinking about the user's experience from different angles. So that could be that maybe he started his shopping experience on his computer and then he got distracted. So later he's on his phone, goes back to it. Maybe he started through a search and then when he went back he just clicked on a promotion that was on the home page to get to a product. So there's different paths to improve as well. And then of course documenting all of this stuff and getting sign off before moving on to the next step. So step three, information architecture. So this is really where we start to think about how are we gonna take all these ideas that we just started talking about and thinking about the user journey. How are we gonna make a logical sense? So this is a simple site map that I had used on another project. We've got our home page and then we've got our top navigation at the top, this client resources and tools, trainings, reports, et cetera. So we're looking at what's the most important information? What are those key landing pages gonna be? And then what lives in all of those sections? So this is just a really high level breakdown of how to organize your site and the pages of the site. So if we think about Arthur and our, was it Heroes of the Month Club? What, we'll just talk about kind of top level sections of the website. What might those sections of the site be? I don't like the key student or the star student of the class. So the top would probably be like, I don't know if I can think of this in my head, but I might be on the, uh-huh, shop and discover, anybody else? Yeah, sorry. Community, okay, so like community space where he could talk to other people. Okay, cool. Categories, yeah. So ways to shop, but then breaking that down. So maybe it's like, I'm in, searching by men or searching by, you know, different type of Marvel versus DC and just dropping on my superhero knowledge today. I mean, else that we missed. Yeah, yeah, I think that's really important. A lot of times that's either like the first go-to thing that people wanna see or they, so just like basic information. How does this even work if this is, for example, a subscription service type of site? How does that work? You know, how do I sign up? You know, information like that too. So a couple of tips here in the architecture, information architecture, making that time in the project schedule to iterate, to go back and forth because what I find really critical is that as a web design expert, I think I know what I'm talking about and then I go share this with my client and they're like, nope, that's not it because they're the expert on their subject matter. So I can kind of guide the process of how to organize information but there's probably gonna be stuff I forgot or if it's really a complicated subject matter I might just not get it right away. So making that space and time to go back and forth. Thinking page template. So as, you know, talking WordPress, web design, single page, if you make it to you. So thinking about, okay, this is like the search page and we're gonna use this type of page on multiple areas of the site. So just having that frame down and then you could change the headline and change the body copy or whatever but using that same page layout will be important. So thinking about where we can reuse stuff. That sort of thought process starts to come in in the site mapping and information architecture step. Making sure that you're accounting for all the pages in the site. Okay, under tools and resources, we need this, this and this. So making sure we have everything accounted for as well. And then as you are just kind of making this outline of how your site's gonna be organized, just making like bullet points of, okay, I need to search function. I need social media sharing function, just bullet pointing those things out and checking in with your development team, making sure that we're not coming up with some crazy functionality that wasn't scoped in the project to begin with. All right, so user experience. Of course, the whole thing is user experience but a lot of times we think of user experience as this wireframing step. So these are some wireframes that I've worked on by recently, I think. So wireframes are really, really important for getting hierarchy of page information together. Make sure we have all the content on a specific page account. But we're doing this in a fairly quick way. You can see this is all black and white, grayscale. So I'm kind of like blocking out like, okay, you know, a hero image up here and then I'm gonna have this map section down here. You know, so I'm kind of chunking out information just to make sure I have it all in the same way. And I'm starting to think even more about functionality and about actions. Yes. Somewhere in Illustrator and I've been using Sketch lately, yeah. Yeah, Sketch is great, I'm just, I'm new at it but it's good. So yeah, and then, so typically the projects that I work on we don't have enough budget to do like a full on grayscale prototype but that's always an option if you're working on a large budget project. You can actually, there's tools out there where you can actually like build your site in an interactive way without having the design elements on there. So it's like black and white and kind of clicking through from page to page to make sure that the content is all there making sure that the navigation makes sense. So a lot that you can kind of expand upon there. Oh, and one other quick thing. So I tend to work in pretty detailed with pretty detailed wireframes but you don't have to. You can just do like simple, here's a box for this and then the box for call out and that kind of thing. So it really can be a big range. So real quickly, if we're thinking about our superhero website, this is obviously a very scaled back wireframe but let's say we've got, we wanna be sure to have space for like a big, beautiful image up at the top. We wanna have a headline and then we've got some call outs that we're gonna put on there. So what might we just have for like those three main call out boxes? Yeah. Discover what's new. Discover what's new. Yeah, that's great. We talked about that. You got an idea? What was that? Oh, like a graphic that says like shop now or something like that. Yeah. Sales, yeah, that's a great idea. So we're thinking about, okay, what are the three most important things that I want Arthur to have access to right away and then putting those on the homepage, front and center. So then we've got obviously the rest of the content. And then I just did a little mobile thing here too. We wanna of course be thinking about how does this stuff translate to mobile as well. That's gonna be really important because a lot of times you don't think of it and then you start designing stuff in a minute, that's not gonna go well at all. So making sure to think about that really. It's gonna be interesting. So I've heard the concept. Yeah. I myself have not designed that way. Mostly because where I work, our clients are primarily desktop, like their users. It's like 85% of users are desktop. So we tend to design desktop first. But I think it's an interesting way to do it depending on who you're designing for. Yeah. Yeah. Yeah. Yeah. Which is, yeah. Yeah, yeah. So if you guys are here, what was your, Dave? So Dave was working on a project where they started with desktop. And then once they got into that, they realized 60% of their users were on mobile. So that's where it's really important to do that discovery step even and look in, you know, like, how are people gonna be doing this? So yeah, that can help, you know, minimize those kinds of things. So I'm gonna cruise through the rest of this. Couple of tips here. Prepping clients for what wireframes are, what they are not. Tends the feedback I always get is, it's so boxy. It's just a wireframe. So it's not gonna be annotations throughout to help it to your client and also to your developers. Working out the major content issues, features, functionality, doing that in the wireframe stage, because then you're not getting hung up on like design details all the time. High fidelity I talked about. And then I always like gut check developers with my wireframes before I even show them to the client. And then once again, like right before we start design at a minimum just to make, okay, we on scope and crazy, that kind of thing. So getting into design. As a designer, you're often involved in most or all of these steps. So you're gonna be the one project. So it's your job to advocate for the user and also sell these ideas to the client to convince the client that this is what they wanna do. So a couple of things to think about is that you're using consistent design patterns. You know, not like too many headline style. Thinking about interactions. Are there any animations? Hover instances, thinking about that kind of stuff. And then usability and accessibility. I think there's a talk on that afternoon. Color content, can people with disabilities use my website? That kind of stuff. So just a couple of quick examples of stuff that I've worked on just show translated from wire to visual design. Most of these are straight forward because I like to work out issues of even, you know, some layout type of stuff with the client before adding in color and style and that sort of thing. So any quick ideas on design elements we might wanna use for this guy. Comic book stuff, yeah. So maybe even like cartoony style or something. Anybody else want more? Yeah. That's a great idea. So a lot of, since a lot of the costumes might be really colorful and you'll get noisy, the design can be very simple to allow like the photos and the, you know, costumes to really stand out. So again, advocating for the leaving personal preferences out of it. If it loves blue, you're gonna have to deal with that. Using as wisely so it should experience, not annoy people. Thinking about how you're gonna translate this to code. Maybe even thinking about like content types. How are they gonna even build this? Being very, very prepared to and you should never just email it over without any explanation because 95% of the time they're not gonna get it. So and then every decision should be intentional, have a reason behind it. Of course, got chatting with development along the way. So then handing this off, handing your design off to your development team and it's used as a designer to translate the user's needs and goals into that design. And then you have to make sure that your developer can do all this, understand what you're into were. So making that really clear and doing that with, you know, some sort of handoff development specs or something like that. So I've done this before where I've just done bullet points in a Google doc but being very specific on, you know, I want it to do this, this and this. Giving them the design file and just adding little annotations of, you know, okay, this is the navigation and when someone clicks on it, it should just take them down the page or whatever. So adding in those details. So for that handoff, nothing should be a surprise at this point because we've been collaborating hopefully, got checking with development along the way. Talking, like I said, about content types, how those might work, interactions, any of those animations, sharing examples of how you want to, or maybe doing a mock-up if you have any animation skills, desktop and mobile specs, how are things going to convert to mobile? And making sure to have time to QA the site, design audit of the, just develop and provide to your client. And this is maybe the most important thing. Be as nice as possible to your developers for you. So, got a few minutes for. So like different parts of the work. How do you tell your story to your user? Yeah. Be as a home fan. Because I'm a lot of a fan. Right. So when you're saying that, you're being the most important thing kind of a way. Yes. But everything else, how would you usually keep people like that on you? Yeah, so that's a great question. I was asking about how do I place calls to action or the important stuff on my homepage on the website. So that's where we can start pointing back to that discovery stuff that we did at the very beginning or the surveys, user personas. We should all know, by the time we get to wireframes and design, we should all know what the number one goal is for the user. And that should be the biggest thing on the homepage. It's often times that once you get into visual design, then the client is, oh, but I wanna say this, this and this about my organization, front and center. It's like, well, that's not what they're looking for. So that's again, where you can keep pointing back to, well, we've already talked about this. We've already come to this consensus. So a follow up question. Yeah. If you have a site where people, I think for example, the school site, where teachers are gonna have to be ones with the big action, respectively, most schools want a big marketing, respectively parents wanna come to this site. Right. Or invisible. Yeah, yeah. So I worked on, the question was, how do you balance serving multiple audiences, I would say, or multiple users? I've worked on a lot of sites recently where there are three or four types of audiences and they're all equally important. And we've kind of started playing around with like a curated experience type of thing where I come to the homepage and it says, I am a parent. There's a box for parents. I am a teacher. I am a prospective student. So then on the homepage, it's a little bit as a parent. And I get to almost like a sub-site of that, that's just information for me. And then you can kind of follow that typical process of, okay, then this is the most important thing for the parents, that sort of thing. Yeah. Yes. Very messy. Yeah. I started as a print designer, but I was always really interested in web and recognize that it was going to be sticking around for a while. So I did, I don't know. Almost 15 years ago, probably like just taught myself dream weaver. That was like the thing at the time, you know, from a book. It was dream weaver in a weekend. So I did that kind of learn some stuff and then growth for me was just getting a job at a web design agency and learning their process and learning from other people. So like finding those groups of people that you can learn from. Do you have a question? Oh, how do we, participants? Yeah, that's always, it's all hard. We typically try to ask the client to provide, however many they can, yeah, and then we would done some stuff where it's like onsite user testing where we, you know, have a checklist and kind of try to have people complete a task, see if they will or not. I know there are different websites too that you can do like even usability tests. You can probably do some more background research of computer sites as well. Sometimes it's hard to get. Uh-huh, right. Yeah, yeah, I mean, you could even, that is, but it's something like, you know, if you interview 10 people, you're gonna get about 80% of your data and then the, sort of, reinforce that. So you can work from a small sample size if that's all you have, to at least some, inform you. And then it's, you know, really important to go through those steps of like, the, I'm gonna try to pretend that you are that user and like go through that process instead of going through it just like as yourself too. So I think that's about it. I'll be hanging out in the back if you guys wanna ask me more questions, but I got some more stuff, more sessions. So thank you. Thank you.