 Small groups so if you have questions feel free to just raise your hand or shout them out whatever works for you So this let me get a survey of the room. How many of you are designers? Okay, how many of you are small business owners? Okay, great and any developers Okay, and any other categories I might have missed just learning perfect Great It's good to know so this is an so I'll start with introducing myself. My name is Carolyn Thayer I'm a UI UX designer, and I'm a Teacher's assistant at skill crush calm. I'm based out of Portland, Maine Feel free if you think of any questions to Hit me up on email or send me a tweet. Whatever. I'll take questions after too And so the goals of this presentation, so this is going to be an entry-level presentation Before you create a website you need a plan You don't want to just open up Photoshop and start throwing around colors and fonts you need to know what you're doing It's going to save you time and money Well, you could just open up Photoshop, but it's going to cost you a lot more money and a lot more time And you're going to have a lot more expensive mistakes So the goal of this talk is to give you the tools to create a roadmap for your website Whether you're building your own site or you're working on a client site or you're working with a designer agency You're a small business. You're working with someone just knowing the process knowing the steps You can take before you talk to a designer This is going to give you a launch point to build a successful website You might not need to use all of the methods every time that I'm going to talk about But you'll have like a toolbox that you can reach into and grab something that will fit your project All right, so the first thing I'm going to talk about is user personas So I'd like to say that a user persona is a snapshot of a fictional person who represents Research done on a major group of people visiting your website So user personas give you a useful metric to design and critique your site with So rather than having to remember the details of many users You're looking at your site through the lens of three to five fictional characters This tool is really useful then when you have to make sure that a user accomplishes a certain goal such as buy a product Call a number find directions And what makes a good user persona? So a good user persona Focuses on your intended audience while it's possible to have multiple audiences However, if you're asked a question, who is your business targeting and the answer is everyone you're not actually targeting anyone So you want to kind of narrow it down between one and three categories of people who are using your product or service Really knowing your users and their needs is going to help you make effective design decisions As much as possible your persona should be based on actual research So this makes your job easier if it's an existing business or company You're able to do research It's a little harder if it's brand new you have to make some assumptions look at your competitors But as much as you can not make assumptions or make assumptions and validate them with research like analytics Or if it's a physical location surveying people who walk in the door any of that sort that's going to help you out and A good user persona should be realistic This one's really important. So while it's okay to be aspirational You want to keep your decisions based in reality For example, if you're creating a persona for a nonprofit that typically receives many twenty five to a hundred dollar donations You don't want to make a persona. That's a millionaire looking to give away their life savings That's not going to happen and that persona is not going to help you And personas are also great for creating empathy. So if you say When you're citing making a design decision and you're citing research Sometimes that's really hard with your stakeholders to create empathy. So you're saying well 45% of people using cell phones But if you have mark uses a cell phone and you can tell a story about mark Look, he's on the go in his car and he's pulling out his phone That's going to build empathy and be easier for all your stakeholders to understand So this is a Free user persona template I just grabbed off a website, but there's lots of user persona templates out there They can be super complicated in detail. They can be very simple I'll send out a link to this at the end of the presentation But a good persona is going to help you pinpoint your users goals That's what it's going to focus on. What are their goals a little bit about their demographics? Some important things to consider for your persona include what their pain points are and what frustrates and delight your users And also some general demographic information Also, because again, we're using these personas to build empathy Naming them something like John Doe and making it really generic is not going to build that same level of empathy as Just building a more well-rounded persona so that more you can make them feel like a real person based on a Large amount of data the more you're going to build that empathy and have really want to build a goods product for your user All right. So how do we use these fancy personas you ask? Having made up these fictional characters. We have a snapshot of our key audience We've built empathy with them and they're now more than just facts and figures So here are two case studies two samples here This is for an online grocery shopping store. They want to build an app or a website and What they did is they surveyed a whole bunch of their customers. They talked to people We talked to cashiers coming in and they want to add an online delivery to their website So this grocery store looked at their online analytics. They surveyed in person customers They talked to their cashiers and they decided that they have two key personas. We have Joyce here on the left She's 75. She mostly uses a desktop computer. She's retired. She lives by herself in apartment downtown. She doesn't drive She struggles with lugging groceries home and her goal is to get basic supplies easily without relying on outside help Something she might say is it's not worth the hassle and then we also have Laura Smith shopping at the same grocery store She has an intermediate tech level. She uses an iPhone 8. She's 39. She lives in a residential neighborhood. She has three children She spends a lot of time driving around. She wants to pay the shop local and She wants she'd pay more for organic brands and she wants to save time without sacrificing quality So can anyone think looking at these if you had to make design decisions? What are some things you might think of that based on these that you'd make for an online marketing store or? an online grocery delivery service exactly Any other things that you can think of based on these personas that you'd want to make sure your online delivery Includes any features for your product. That's a good one, too. Yeah Yes Yeah Those are all great things and so through these we've had empathy versus just saying a statistic of X amount of our users are this age We now can say Joyce wants this and Laura wants this other examples might be Joyce might want to have the phone number easily accessible so she can call. Maybe she doesn't want to deal with an online form So we need to make sure that phone number is easy to find She also might want a larger font to read We also based on Laura. It needs to be mobile friendly We probably want to look that says more high quality versus discount And she might want to click the call button. She might not want to type the phone number in her phone She might want to just hit a button and place her order because she's in a hurry so knowing this if we hadn't had these we could design a beautiful form like a beautiful online ordering form with all these complicated things and checkboxes and good out there and find that Joyce doesn't use it at all and Laura is in too much of a hurry to click a bunch of buttons and scroll through pages and pages of this complicated online Ordering thing so this is where the these user personas and knowing who is using and building empathy can really help All right next item before you dive into your site is site maps So site maps are a way to organize the information and the navigation of your website After creating a site map you should have a complete map of all the pages and sub pages on your site So how do you make a sub site site map my favorite way? Super simple bring it back to the basics post-it notes One way to tackle your site map is to start by writing down all the names of all the pages You'll need on post-it notes and stacking them in rows under the home page of how you feel They should be organized and then the next step. This is the important step go through write down everything that you think go back And then edit them. What can you combine? What can you eliminate? What's redundant and? So you'll end up eventually with something like this so this is for a landscape business and We have our post-it notes and you can tell that they start on the home page We have our main navigation so in the top. We're going to have an about us and our services a gallery and a contact us Then they're probably gonna have in the format of a drop-down menu a mowing page and a snow removal And the post-it notes and the pen and pencil are great because you can really just move things around You can shuffle them you can even add links if you have a navigation in your footer You can put some down at the bottom Mm-hmm So those are a great way to know before you start building your site know what pages you have how many pages? So site maps are sometimes confused with user flows or task flows. That's something I want to talk about the difference of user flows also known as task flows both take the form of Flow charts the differences in what they represent so a site map is about your pages Specifically and the structure of your navigation and your content a user flow is how a user gets from point a to point B So I think the great analogy is from UX movement calm what they say is That they state that a site map is like looking at a map of a territory from a bird's eye view with all major landmarks Visible on the map and a user flow is like putting in coordinates for directions on Google Maps You can see which route to take where to turn and the miles it takes to get there So I know I mentioned user flows Let's talk about that briefly So where user flows are really it useful they're useful for applications and larger e-commerce sites and That's really how we start thinking about going from page to page What is a process like for our customer for our user using our site? How many steps does it take someone to put an item in their cart or on board to create an account? For example, has anyone ever played or watched zoom the TV show the kids show? Yeah, have you ever seen the clip of the peanut butter and jelly game or heard of the peanut butter and jelly game? Okay, this is I wish I put a video in here So the peanut butter and jelly game is where you instruct someone who you can't see so you stand like this And you have someone behind you making a peanut butter and jelly sandwich and they have to kind of play dumb and Follow exactly to the letter at the steps you take to make a peanut butter and jelly sandwich And maybe you didn't tell them to open the bread bag or maybe you didn't tell them to unscrew the jar of peanut butter And they do literally what you say and you end up with like a jar of peanut butter between two slices of bread or something like that Because they didn't open the jar so that's kind of with a user flow. You're trying to think of all of the decisions you're making and Trying to kind of like play that peanut butter and jelly game where you want to be very specific and Next thing you know, you forgot that that user to put an item in their cart has to click through four pages Or something you find or put something in or something that's a lot more steps than you thought of and we're like, we'll just have them check out It'll be so great. So thinking of exactly what your user is doing Let's get that so when do we need to use a user flow? So user flows are really handy on sites that require its users to complete a task in order to be successful Examples can be creating an account like onboarding adding an event to a calendar Putting a product in a cart and checking out Filling out a form to download an e-book Your user flow should help you see how long and straightforward the process is to completing the task You want your users to take if the task is too long complicated or confusing you can lose your users on the journey Leaving the goal of your website unfulfilled If you've ever visited a website that is so complicated to use that it has an entire page Dedicated to setting up your account or checking out then you can empathize with how frustrating that is and see how mapping out the process You don't want to have instructions for how people have to check out you want them just to be able to do it So here's an example of a user flow here for a checkout process and So as you can see when drawing out all the steps of this is a simple checkout process There's a lot of steps that someone has to go through for a simple basic checkout process Looking at this user flow. We can tell that the longest path to checkout is creating a new user account before checking out That's why having a guest checkout option for users in a hurry is a great option other options we could consider to offer a shorter checkout process could be having social media sign-in This can make that process shorter Having a one-page checkout with billing info billing address shipping address and shipping info all on the same pages I've also seen Checkouts with the step numbers on top so you know you're on step one of three so they know it's coming up how long it takes So creating these user flows super important because it shows you barriers to your users completing the goal on your site After you create your user flow you would want to go back to those user personas So then we're gonna reel it back and go back to Joyce and I believe Sarah and we're gonna see would they be able to do this? Where are they gonna stumble or have trouble? And what can we change to make it better for those two personas so they can complete this easily and quickly and painlessly as possible All right, and the last but not the least step. I'm gonna talk about is content guide documents All right, there are many forms of content guide documents. This is another one of those you can find lots of samples online to pull off You can make your own If you're working with an agency if you own a small business and you're working with an agency Typically agencies will have their own content guide document. They want you to fill out And their own preferred format If you're building sites for clients, you really should create your own custom questionnaire for them to get like The information that's most important for you in your process A content guide document contains all of the copy. That's gonna be on your website This document can be as simple as a word document with a new page that corresponds to an item on your site map And a super simple content guide document will only contain your headlines and your text So why use a content guide document? So if you have a content guide your designer will have an idea and Designers love content guide documents. We very much appreciate this But they'll have an idea of the size and type of your content and then they can design your site to meet your content needs and show It off rather than an empty container that you have to fill So I think like if you think of it like a clear vase if we have your content We can build this perfect box or container for all of the content But if you don't have the content and you build and design the whole website first You then have to kind of smush your content in there and maybe it doesn't look so great and that container We built doesn't show it off the way it should Or say you have too little content and we built this Beautiful website for four or five paragraphs. You then have this little sad content rattling around lonely there, so And this exercise should also give you an idea of all the images and assets you'll need to provide your designer and developer And most importantly this step is the step I've seen Most hold up the launch of a website Getting content can really delay the launch of your site and you want to be able to launch that as soon as possible A site can't launch without content. So Getting that together is a great first step The earlier you figure out what content you have and what you're gonna put on there the sooner your site can launch Also now it's okay to tweak it a little bit. It's okay to write something It's not permanent and adjust it, but just knowing like well It's gonna be about one paragraph. Maybe a sentence here or two will change. Maybe the wording will change It's okay. It doesn't have to be set in stone. It is the internet That's a great part as we can iterate but getting an idea for what's gonna be on each page is so important All right, so this is a sample content guide I made up here Very very basic. We have a page title What's gonna be on that page? This is an about us page. We have the content. So this is for a business So they and they're about us page. So they have a little paragraph about their business They have who they are and their names We have a call to action So they have something they want you to get a quote from them And then we just have a list we don't even have the actual files It's just a list of the file names that are gonna go on this page And you can hand this to your designer or your developer and they're gonna know Okay, I'm a designer. I now know that we have one two three four four images a small paragraph and A few names and a call to action. I'm not gonna design a huge page for 10th paragraphs. I'm gonna make sure that this is shown off as we needed to and You know, it can still be flexible enough. We can add another person. We can take away a person We have a basic idea of what's going on here Okay So important question. What if I'm working with an agency? So if you're a small business owner, you're working with an agency Why do you need to know this? You may be sitting here and saying I'm not a designer. I'm not a developer I'm having my site built and redesigned What good is this for me? Do I really need to know this isn't this their job? And I think the answer is yes or no and no It's kind of a combination a good web designer and developer. They're gonna do all of this process with you They're gonna walk you through at least several of these steps And you can hire someone to do all of this for you, but there's benefits huge benefits for giving it a first go around yourself first of all when you're trying to get quotes you're calling up agencies and You're trying to get an idea of how long your site will take how much it will cost You're gonna have a much better idea of the scope of your project when You know you can say I have seven pages and This is what's going on You're gonna be able to get a much more accurate quote and maybe it'll change maybe it'll be six Maybe it'll be eight with their recommendation. They're the experts and they can recommend some tweaks to your content But having that starter part you can get a much more accurate time quote a much more accurate money quote Also, this is your site in your business So you are honestly gonna have the most firsthand knowledge of your customers in your audience No one knows your customers better than you do And well as a designer I can research your customers and make decisions based on the data You're probably the one who's gonna hear the complaints when it doesn't work for them And you're gonna get their phone calls and concerns and if it's a brick-and-mortar store You're gonna be the ones you know their names you know who's coming in So you're gonna have the most personal knowledge of them. So you're gonna be able to influence What as a designer I would be making up and say like I really know that this person comes in every day And I want to make sure this works for them Also having all this info allows your agency or designer to spend time making Recommendations to refine your site and use their expertise to make the site as best as possible with refinements Rather than spending lots of time on legwork There's a lot of time at an agency that can be spent getting down content and hunting it down and making edits and you know, maybe they make three or four design comps and It's they didn't even need that page So that's wasted money that you can save time and money by having more information about the product before they make something That we need to completely redo So they can focus exactly on what you need All right So I have I have not put my slides up anywhere yet But I'm going to add them my updated slides so you can download and I will tweet that out if you're on Twitter Here's the link to resources Also, oh, do you want me to go back to do you want a picture of that page? Yeah, and I just realized I talked really really fast this same presentation took 40 minutes last time So feel free to ask a lot of questions Does anyone have any questions I honestly just use like Google draw I Pen and paper is my favorite. I'm a big fan of pen and paper. I think with all the tools out there both with wire framing Drawing flows site maps the more you can keep it simple in the beginning the better it is it costs You know, there's lots of fancy apps which are great, but make sure you keep in mind I see this with my students and lot The tools are supposed to speed up your workflow not slow them down And if it takes too much time to learn and slow down your workflow, it's not worth it So that's why I say whiteboard pen and paper stick to the basics first and then If you find that maybe you're not a good writer or you have to give something to a client Then move into a program that will make it a little faster But if it's just for you go for the simple fast and cheap way Any other question Perfect has anyone done any of these sites steps before How have they as there been a time when you haven't done one and it's like Not gone well for your project or Has gone really well and saved your project. Yeah Yeah, go for it. Yeah, I would say so my favorite way to do it So this is hard if the business already exists it makes it a lot easier it is a lot harder for me when the business doesn't exist, but If you're working with a brick-and-mortar shop go in and interview the cuss their customers like, you know If it's a give away some free product to see if you can just ask them some questions and talk to who they're doing Talk to their cashiers. So the people that have regulars if they know your regulars names That's a great person to talk to you who are their regular like I worked at a cafe for years And we had one regular who we even had a button for because he ordered the same thing the every day Like you want to know those people who are coming in you want to talk to the people who are interfacing with the customers as much as possible Talk to the people if it's an online store who are getting the complaints every day on the phone Who's calling in what is their biggest complaint? You know what get that idea about them for online you have analytics, which is great and you can look at that And that should give you a good snapshot, but yeah, and then from there I use like unsplash.com is just a free photography site, and there's some others just grab a free photo and Then if like say you don't have the opportunity you're just using analytics See if you can find someone who fits that demographic So you have an analytics and you get someone in that demographic see if you can find someone who fits that demographic and talk to them What's their name like what do they do? Where do they like to look for other websites? What kind of things do they do there in their free time? Well, I will be here if anyone has any questions You can also Hit me up on Twitter or email And or find me after and I'll be happy to answer anything. Yeah