 Okay, so the topic of this talk is going to be about before design. So everything you need to do before you even begin to open Photoshop or Sketch or whatever you're using for your design program. My name is Carolyn Thayer. I am a UI UX designer and educator based out of Portland, Maine. Feel free. If you have any questions, I'll leave time for Q&A at the end. But also you can tweet me or email me and I'd be happy to answer any questions if I don't get to them during this talk. Okay, so before you jump into building a website, you need a plan. And the goal of this talk is to give you the tools to create a roadmap for your website. So whether you're building your own site or you're working with a designer or an agency, this talk should give you a launching point to building a successful website. You may not need to use all of these tools that I'm going to talk about, but knowing what they are and having them in your toolbox in case you need them is always helpful. So the first tool I'm going to talk about before you dive into building and developing or designing your website is user personas. So a persona is a written representation of your website's intended users. That is the official definition from usability.gov. I like to say that a user persona is like 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 are looking at your site through the lens of three to five fictional characters. So this tool is really useful when you want to make sure a user accomplishes a certain goal, such as buy a product, call a number, or find directions. So what makes a good user persona? A good user persona focuses on your intended audience. While it is possible to have multiple audiences, however, if you're asked the question, who is your business targeting? And your answer is everyone, you're not actually targeting anyone. So you want to make sure that you have someone you're looking to target. 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 and our analytics. Without research, it is possible to make false assumptions about your users and therefore make faulty design decisions. And a good user persona should be realistic. While it is okay to be aspirational, you do want to keep your decisions based in reality. For example, if you are creating a persona for a non-profit that typically receives many $25 to $100 donations, you would not want your persona to be a millionaire looking to give away all their worldly goods. Not only is this unlikely to happen, you could risk making design decisions that cause you to lose your core audience and alienate them. Yes? I would say it's kind of tricky. If you're building something for a company that already exists, you could go from their current website. You can talk to even in general who their audience is, what data they have on their customers. If it's brand new, you have to make some assumptions. So if it's something that never has existed before, you have to maybe research competitors, look at your market, talk to who is making those decisions and who knows the customer's best. But if it's brand new, you're going to have to make some jump somewhere and hope that it's right and then maybe go back and make some changes later. Exactly. All right. Here is a simple sample user persona template. It might be a little squished. There are a lot of free user persona templates to be found on the web to help you get started. This one is a free resource from creativecompanionwordpress.com. And I'll link to this at the end of the presentation. It gives you a boilerplate for creating your own user persona. A good persona helps you pinpoint your user's goals and motivations. Important things to consider for your persona include what your user's pain points are, what frustrates and delight your users, and also some general demographic information. So you'll see a lot of different ones out here. Some of them may be really fancy. They have, like, you create a fake little picture. You put in quotes and goals. And some of them are really bare bones. So how do we use these fancy personas? So here are two examples. These are two sample personas for a small grocery store looking to add an online delivery option to their website. This grocery store looked at their online analytics, surveyed in-person customers, and talked to their cashiers in order to group the majority of their customers into two key personas. So we have Joyce here on the left. And she is Joyce Webber, 75. She has a tech level of novice. She uses a desktop computer. Joyce is retired and lives by herself in an apartment downtown. She does not drive and struggles with lugging groceries home. Her goal is to get basic supplies easily without relying on outside help. A quote that she might say is it is not worth the hassle. And then on the right, we have Laura Smith. She's 39. She's a tech level intermediate. She uses an iPhone 8. Laura lives in a residential neighborhood with three children between the ages of 7 and 12. She spends a lot of time driving them to after-school activities and sports. She prefers to shop local and will pay more for organic brands. Her goal is to save time without sacrificing money. A quote she might say is my time is important to me. So as you can see, both personas have different motivations and pain points, even though they are using the same service. So design decisions that we might make based on Joyce. We might want a larger font that is easier to read for accessibility. We probably don't want too many pages to click through in order to make her order. Joyce may want to call in her order to speak to a live person. Rather than fill out an online form. So we need to make sure that the phone number is easily found. And for Laura, we need to make sure that the site is mobile friendly. We probably want a design that looks high quality versus discount. And Laura may also want a click to call button located in a primary position on the site versus a form so she can easily order from her phone on the go. So how did these personas help us? Well if we had designed a beautiful multi-page form, even if it was designed perfectly, it would probably not work for either of these users. And it would be a waste of time and money and at worst, alienate our primary customers. Also, having made up fictional characters helps us easily remember snapshots of our key audience so we can think, hey, I don't think that would work for Joyce or hey, I don't think that would work for Laura. Instead of pouring through pages and pages of data and numbers and say, I don't know, 35% of these people would like larger text or a click to call, but, okay. Next item I'm gonna talk about before you design your website is sitemaps. So sitemaps are a hierarchical diagram showing the structure of a website or application. And that's the official definition from the uxreview.co.uk. Sitemaps are a way to organize the information and navigation of your website. After creating a sitemap, you should have a complete map of all the pages and sub pages in your site. So how do you make a sitemap, you say? One way to tackle your sitemap is to start by writing down the names of all the pages you'll need on post-it notes and stacking them in rows under the homepage of how you feel they should be organized. The next step is to examine everything you have so far. Redundant information can be consolidated at this point and information out of place can be reorganized. So your first row will end up becoming your main navigation and generally should not be more than seven to eight pages. So this is a sample sitemap for a landscape business and if we were putting our post-it notes on the table, we have our starting homepage and the next row we put our main navigation pages which is about us, our services, gallery and contact us. We have two sub pages that would be in a sub menu under our services for mowing and snow removal. So from the sitemap, we can tell we need to design seven pages total and that is the final amount of post-it notes we have. And then we have these two sub pages. And this can be handy when you're doing it on paper with post-it notes because you can rearrange it, you can stick it, you can get other people's opinions about how they would order it. Something that I find kind of confusing online when you're looking up information about sitemaps is they're sometimes confused with things called user flows or task flows and they all kind of have a similar name and look. Something we'll talk about next but not to be confused with it are user flows and user flows are also known as task flows. The difference is in what they represent. So a sitemap is about your pages and the structure of your navigation. A user flow is about how a user gets from point A to point B. So I think a great analogy for this is from uxmovement.com. They state that a sitemap is like looking at a map of a territory from a bird's eye view with all major landmarks of visible on the map. A user flow is like putting in coordinates for directions in Google Maps. You can see which route to take, where to turn and how many miles it takes to get there. So now that we mentioned these fancy user flows things, talk a little bit about those. So also known as a blueprint, journey, narrative or map, a user flow is a deliverable that demonstrates the step by step elements required to allow the user and the business to accomplish their objectives. Okay, great. So when do we need to use user flows? Well, 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, aka onboarding, adding an event to a calendar, putting a product in a cart and checking out or filling out a form to download an ebook. Your user flow should help you to 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 use, you can lose users on the journey to leaving the goal of your website and field fields. If you have ever visited a website that is so complicated to use, that has an entire page dedicated to setting up your account or to checking out, you can empathize with how frustrating it is and how mapping out the process of a user flow before building your site would have saved some major headaches and frustrations. So here is a sample user flow for a checkout process. And this is a pretty simple common checkout process and you can already see how complicated the user flow is and how many options there are. So if you add an item to your cart and then you view the cart and proceed to checkout, you then come up with three options. Do you do a guest checkout? You can sign in or if you're a new user, you can sign in with social media or create an account. After that, you have to add your billing info and then you have an order confirmation. You can add your shipping if different from your billing address, select your shipping type and checkout. And so that's a lot of steps before checkout. We can tell the longest path from looking at this to checkout is creating a new user account before checking out. That's why it's great when you do this, you can see that adding a guest account is the quickest option and that's something that you may want to recommend to your clients or recommend for your site. And creating a user flow is so important because it shows you barriers to users completing a goal on your site. After you create your user flow, you would want to go back to those user personas we talked about and see if they would be able to or even want to complete this process. And if you find roadblocks, it's at this point before the site's designed that you would want to go back and maybe change how your site works. Okay, and last but not least of the steps before you design your website that we're gonna talk about are content guide documents. So there are many forms of content guide documents. If you're working with an agency to build your website, they will often provide you with their own preferred format to complete. If you are building sites for your clients, then you should create your own custom questionnaire for them to provide the information that you would like or will need. A content guide document contains all of the copy that will 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. A simple content document will contain your headlines and your text. A more robust content guide document can include the file names of photos to be placed on each page, SEO information, calls to action, and other information that's going to really be the meat of your site. So why should we bother with content guides? So if you have a content guide, your designer will have an idea of the size and type of your content and can design your site to meet your content's needs and show it off rather than an empty container that you later have to try and smush all of your content into or a big empty site with just a little tiny bit of content rattling around sad and lonely. So this exercise will also give you an idea of all the images and assets that you'll need to gather and provide your designer or developer. And also, most importantly, this step can often hold up the launch of a website as your site cannot launch without content. So working on this step as early as possible will help ensure you launch on time. So this is a very, very bare bones example of a sample content guide, but it can give you a great idea of where to start. So we have the page title. So this is for an about us page, the content. This is their paragraph here and they list the name of their CEO, COO and manager. They're going to have a call to action on the page, which is need ACME services, contact us for a quote today. And they know the images they're gonna need for this page are their team photo and the headshots. And they already have these images ready so they're just writing the name so they can keep it in a folder to hand off. And again, to repeat myself, doing this work before you design, even if you need to go back and edit it, this doesn't have to be set in stone. But it'll result in a much stronger design as it puts your content at the forefront of the most important star of the show. And the important thing to remember is that content guides are less about layout and more about what information must be included on each page. All right, what if I am working with an agency, you might ask. If you're not a designer or developer listening to this talk, you have your own website. You're working with an agency. Do you need to do all of this? Or any of this? I would say, like you say, isn't it their job to do all of this? I would say yes and no. A good web designer or agency is going to walk you through at least several of these steps and show you can probably hire someone to do all of this for you. But there are huge benefits to giving it a go yourself first. First up, when you call up agencies or freelancers trying to get a quote, you're gonna have a much better idea of the scope of your site and what you need and get a much more accurate quote and time estimate. It's also much easier when you can say you need a site of approximately seven pages even if that number changes a bit with the professional's recommendation than trying to get a quote with no idea of what you have or need. Just, hey, I need a website. How much does that cost? Also, a huge point. This is your site or your business. So you have firsthand knowledge of your customers and your audience. Well, as a designer, I can research your customers and make decisions based on that data. You're the one who most likely hears their complaints. You hear their concerns and if the website doesn't work, you're gonna be the one they're calling complaining. And you also have insider knowledge about your industry. So having everything together before you start can ensure your site is built quickly and on schedule. And finally, having all this info allows your agency or designer to spend more time making recommendations to refine your site to be as speedy and as effective as possible based on their experience versus trying to guess what you want. So they can use your legwork as a starting point and make edits and recommendations as needed to make sure your site is super user-friendly, delights your users and achieves your goals. So now I have links to these resources but I'm gonna switch it to this one. We're gonna have a few Q and A now. Any questions? And if you could please speak into the mic, that would be great so the video can pick you up. That was an excellent presentation. I'm very sorry I interrupted. No, no worries. I guess what I was asking was, so my company runs a few sites that have a lot of content and one of the things that happens is bloat and it's very difficult to stop it once it starts. That page that showed the call to action which is really important but I was wondering what point in your process do you look at a page and say this needs to be here and this doesn't need to be here sort of justifying its existence and if that's an important part of your process. Great so you're asking about bloat specifically and at what point do you look at that content and kind of edit the content and make sure it focuses on its goals that I would do that as early as possible before you even start building, before you design, when you have all that content guide I would try to focus on the goals before you even get to the content guide. I usually do that in my interview in my process. What are your, you know, we pick two to three primary goals. What do you want your users to do and then all the content you get filter it through those goals. So is it meeting those goals? You can edit it afterwards especially if it's a site that already exists. I think it's easier to get all the content at once and then put those goals on a board or on a piece of paper right next to it and make sure, edit it by looking and make sure it's meeting those goals and meeting the needs of those personas. Oh, over here. When it comes to user personas, is there a recommendation you would make in terms of the data that you do use? Obviously you can gather a lot of data using Google Analytics through affinity categories, stuff like that. But there's also like the other approach using surveys, using interviews. Is there an approach that you recommend? I think you should do a little bit of both and I think you should also look at what kind of site is it? Is it an e-commerce site? Do you have lots of Google Analytics or heat mapping on how people get to check out? Is it trying to call them? Is it really a customer service site for a physical location? And if it was like a coffee shop and it's their site, you might want to talk more to the people who are coming in the coffee shop and what are they looking for versus if it's an e-commerce checkout site, you really want to see how the checkout is working. So I think it depends on your goals and where your location is and what kind of site it is. Thank you. You're welcome. Anyone else? Since you're there, I'm gonna ask a question. Perfect. Can you go a little bit more in the user persona with Google Analytics? What are you looking at? Can you give you an example of what you look when you actually use that platform? I think it really depends upon the site and what your goals are. I think it all comes back to setting those goals and think with your client or with your site. But you can look from everything from demographic data. Who are your users? That's a big thing to sampling, knowing who your customers are or who your users and visitors are. Also knowing what devices they're using. Where are they? Things like that. Would you use the Facebook platform to have a look at your audience too? I'm sorry, can you repeat that? Can you, do you look at the Facebook platform? You have advertisement data in there too? Are you saying Facebook? Do you look at Facebook? Yeah, I think you could. Yeah, it really depends on what you're looking for and how full you want your, where are you marketing if you're marketing on Facebook versus if you're marketing more in person or on your site. So it would be who you're marketing to, where you're marketing, who you're looking to attract or to see who you are attracting. Great, thanks. Is there a question down here? Yeah, no broken legs, please. Sorry for making you run. In terms of user personas, how would you approach user personas from a specific aspect of the design? Like say if you were having a project to improve the speed of your site, the speed loading and whatnot. Haven't done much on speed. I think the first thing, if it's a site that's existing or a company that's existing, the first thing is to know who your audience already is and what are their wants and how will any changes you make may or may not alienate them. Cause if you have a great user base already, you don't wanna make changes that makes you lose that user base. That could be very bad. If it's a site that doesn't exist yet, you wanna narrow in more on who you want to target and what you can do to attract them. So there's kind of two ways of looking at it. Do you have an existing customer base and how do you not alienate and lose those customers? And if you don't and you're trying to start a brand new thing, how do you attract the people that you want to attract? Perfect, thank you. You're welcome. Anyone else, sorry? Any more questions? Oh, over there. Thanks. Yeah, I have a question about like, you're talking about the preparation before starting a project, but do you see a lot of modifications of these plans through the project? I mean, it's normal, but is there something that happens a lot? I think you should have slight modifications. I don't think you should have major revisions unless you've made some large false assumptions and then you find out that your assumptions or your research was off point. If you've done all your research correct, a slight modification from a picture or a slight layout tweak, but it should be tweaks, it shouldn't be giant overhauls. Yeah, I work out. So yeah, I understand you're from Maine and the name of like the government statistics bureau there escapes me, but what is your opinion on using third-party data from like examples, statistics Canada or other like third-party sources? I don't have experience with that personally, so I can't say too much. I think the more data you have, the better. You want to base everything on research as much as possible rather than assumptions and it's the assumptions where you're gonna get those false information and make huge things. So the more data you have, in general, the better. Cool, thanks. Yeah, so the question is, is there a way to design for optimal interaction? Do you mean how interact, people physically interact with your website? Sure, so a lot of what I would do is, I don't know if you're familiar with prototyping and wireframing, but what I do is start with a wireframe which is like a blueprint of your website and then do some prototyping and testing and you can test with those prototypes so you're not sinking all the time and money into designing and developing if you need and you can survey people and physically watch them use your prototype and then you can see some assumptions that you made maybe wrong or maybe your data is off and you can watch how they physically use your website and then you can adjust that wireframe from there. You're welcome. You're close enough, you can have it. So, how would you go about re-assessing the buyer persona that you've created or re-evaluating how well-aligned it is with reality? Are you making tweaks and checking engagement metrics and things like that? Yeah, I would do after some time, check and see how successful everything is doing. How, for me, I would check in with my customer who I'd be designing the site for. How well are they converting? How well are their goals being met? And then run analytics, has something changed? If something isn't working out, so if one of their goals was to convert people or have them buy a product and it wasn't working out and all your analytics show that your design decision should work, I think that's what it would be. If you didn't do in-person testing before, it would be in time to do in-person testing. So whether you sit down physically and watch someone over their shoulder, there's websites, I think like usertesting.com, and you can digitally have people use it and record it. I think it would be time to move in something like that and try to really dig down into what is going wrong there. You're welcome. Last one. In terms of user testing, I guess it wasn't covered entirely in the presentation, but is there like a, I know it's different for different websites and different purposes, but in terms of like a sweet spot, in terms of how long you should test something, do you have like a golden rule or like something that you follow for that? I don't have a golden rule necessarily. I think for me it's important to do, I try to get for one item about five people, but you don't want to have too small of a sample size but you also don't want too large of a sample size. A handful of people is gonna give you usually, you start to hear the same things over and over and if you find those patterns, but yeah. So if you just test with one person, they might have needs that are not the group, but if you test with 20, you're spending a lot of time and money, but I found about five, seven, you can generally find what you're looking for. You're welcome. Thank you. All right, well thank you all very much for coming and thank you. Thank you. Feel free for a tweet or email me or grab me after if you have any questions.