 Hi everybody. Welcome to this webinar, Improve Your Nonprofit User Experience. This is so much needed because we need to learn how the user experience from our website can help with the success of our organization, right? Help them engage with our nonprofit audience. My name is Aretha Simons. I'm the webinar producer here at TechSoup. Before we get started, I'm going to go for a few housekeeping for you. Please type your question in the Q&A. We're going to send you the recording with the slides within four to eight hours. If you have a question, please use a closed caption if you're unable to hear. But I was going to say, if you have a question, you can put it in the chat or the Q&A, and we'll be sending you everything when I said the next 48 hours. Yeah, as soon as the recording is available. So what I'm going to do is turn this over to Kyle and Joe so they can, both co-founders of TAP Network and they can go ahead with the show. Have a great webinar, guys. Hi, welcome, everybody. Good morning. Good afternoon. My name is Joe DiGiovanni. I'm one of the co-founders of TAP Network. And I'm with Kyle Barkins, my fellow co-founder. Kyle and I have been working with TechSoup for over 10 years. We own a digital marketing agency TAP, which serves nonprofits and government agencies. So we're super excited to get started today. I'll give you just a little quick background on TAP and the history and why we're here. And essentially our backgrounds, we're working with, in the B2B, B2C space with Fortune 100, 500 organizations. And we really got excited when we met with TechSoup of how can we port all that knowledge and technology to the nonprofit space. So if you spoke to us a few years ago, you would need an entire team to do what we're talking about today, but with technology and AI and a lot of automation, nonprofits, with just one executive director or just one or two folks on staff can do so much more by engaging their audience and really improving that user experience at every touch point. So today we're going to go through the agenda. We're going to talk about user experience, the core values of user experience, how it's important to your organization, and really focus on the features of a user optimized website. Everything from site architecture to user flows, responsive to design, mobile optimization, typography, iconography, color. Look at all these different pieces that really may come together. So yeah, so we'll get started and we want to start out with a poll question. So how successful is your website's user experience? If you can go into the chat box and you know just give us your answer A, B, C or D. And if you have any questions around these, please take note and at the end of the presentation we'll address specific questions. So here this looks like my grades from college, B, C minus, D, yep, that's it. Awesome. Well, that gives us a good sample size. I think, you know, the website user experience, it seems as good danger zone from everybody. I guess if it was excellent, you want to be here. But yeah, our goal is to get you to move up the chain of command here so you have a great experience. So let's kick this off. This is user experience. It's really how people feel when they're navigating your website and they're engaging with your nonprofit. And in today's world, everything ultimately touches your website, whether they're on people on social media, they're reading a blog, they attend an event, register for an event. So let's go back to the website and it's on the front end how you're engaging them and then the tools and technology on the back end to personalize that experience. And then you have UI, which refers to the screen of buttons, the toggles and icons. So we'll go through all that today. Well, it really helps differentiate your organization. You're competing, not just with other nonprofits, but other folks in your space if you're a diabetes organization. You're competing with the pharmaceutical companies who have billions of dollars who are also going after the same audience with their medications, you're competing with everything else out there. Everything that you can do from user experience is going to give you a competitive edge. And at the end of the day, at every touch point of your user experience, what you want to look at is the conversion rate. So if you're trying to get folks to donate to become members to become volunteers. That user experience, if you can improve that user experience, improve that conversion rate at each touch point, ultimately, you can double triple your ROI return on investment for your organization. So we'll talk about the key elements of a user optimized nonprofit website. Scalability and flexibility user flow, and then we'll discuss responsive web design and I'll turn it over to Kyle for this section. Awesome. Thanks Joe. Yeah, as you said, we're going to we're going to highlight a few of the key areas today so scalability and flexibility user flow and then we'll talk about responsive and mobile web design. So we started though with scalability and flexibility so this is the ability when we think about this over time it's how do we start with something or rebuild something that we that can grow with our organization grow with our needs and grow with our team over time. And to do that we start we look at two things primarily we start we look at the CMS the content management systems this is where you build your site this is the platform you build it on. And then we look at the site architecture sets how you build your site or how you structure the information. I will go through that today. First, we want to pick out a content management system that fits our needs and we know can grow and scale with us. There's, we basically break this down into two types of there's managed CMS is so those are things that you know are hosted somewhere else for you you're kind of limited I'll say limited to what you're able to do with them based on the tools that are available in those platforms and common examples of those would be like wicks and square space, which you probably see pretty pretty frequently. And then there's the open source CMS is those are the ones that you got a little more flexibility with but it's kind of what you build from it right. So, some examples of those you probably hear pretty frequently or WordPress Drupal, and Joomla. And today's conversation is going to focus a little bit more on the WordPress side of things it's it's our recommended platform when you're going to open source route it's also used by about 45 to even 50% of all websites on the web right now so it's very widely supported very flexible and scalable. We'll kick this off though with a quick poll question. If you can answer this in the in the chat. What CMS does your nonprofit use currently is it wicks, square space WordPress or other maybe don't have a website. These are rolling in now. So it looks like it's a pretty good mix here I saw we bleep pop up in there. I saw some Joomla pop up in there. Some wicks and a good chunk of you actually are on WordPress today so a lot of this you know we might talk through might be relevant to you, but we'll go through, you know, playing the right, the right approach from there. And then the second piece is the site architecture so good site architecture is really how how the information is laid out from the top down so what's the structure look like. When someone navigating the site so thinking site maps, thinking navigation structure, thinking even down to the URL so what appears in the browser bar, and then it goes further into how pages are laid out and how common pages are laid out. And what we're doing in this user in overall user experiences we're trying to make it so users get familiar with how your sites laid out they get, you know, used to how that how to use that site. And we take cues from other sites across the web best practices across the web so if you think of sites like, I mean Amazon's a great example. They've got that by now button, you know, so you can just click one time and and get right where you're going you can check out without having to go through all those different steps. That's great user experience and users of Amazon have been conditioned to use it that way, and you'll see that same user experience used across other sites, but that really comes down to site architecture how they've laid that out how they've made that user interface all work cohesively together to get you there pretty quickly. So we're going to talk about you know the ease of navigation and then creating that site methods that's the blueprint of your website. So you can see how that's fraud by you know search engines and how that's used by by individuals and visitors. When we talk about site art when we talk through specifically site architecture, we want to think about this and often a few different layers so we have this top layer which is kind of like the, the, well this is a hierarchy but the top layer is is you know first level so this is where you typically drive people at the top end of a site so that's like your homepage or about us like what we do we would get involved contact things that nature and then there's the things that are below that so how does this content how do these pages tie together and where do we get the most logical sense, not just like a categorization and a reading standpoint but from a browsing and using usable standpoint. So you might have different layers below that so like under about us you might have like mission and board of directors and impact. And then over time, if you have a strong site art if you plan this site architecture correctly from the beginning, as you build this out over time, this will scale with your organization so if you add more, let's say impact and under impact you might have like, you know your annual reports you might have a report 2022 2021 and so on, and over time and then from those annual reports over time you might start pulling out key pieces of that have that featured on on a highlights page or something like that so. So as you're building as you're planning, you know constantly keep the site architecture in mind. We'll go through some best practices of site architecture and how those how those are used and then you know see what might be the best fit for your organization so the first ones this single level. So this is probably the most basic this is what you see, and what we'd expect for a site that's kind of just starting out or more brochure driven doesn't have a lot of like interaction engagement expected on the site. And that's where you don't have you just have everything kind of listed across the top sometimes you'll see that down the side of the page, or on the mobile menu, where it's pretty basic pretty straightforward so you've got like, you know about resources programs events blog and the expectation of a user at once they click one of those pages, that's the last, that's kind of the last step in that in that architecture that hierarchy so when they click about everything about that organization expected to be there, we don't want them to have to click there, go to that page and then go somewhere else with this type of this type of navigation. There should be like a simple drop down this is also you know common when you've got multiple pages and then that kind of hire who talked about earlier. What's important when you do the when you have these drop downs, a few things one, we want to make sure that user when they land on the page they know right away that if I hover over this thing something there's going to be more there and we can do that with little cues like the little care you might see or that Chevron next to these that should tells the user tells the visitor that means if they hover over that I click on that there's going to be more there's more there, or you might see a plus sign or maybe different colors. For that navigation that would just kind of let the user know what to expect. This is, this is a great use case for when you do have you know something that you want to scale over time so if we could go back to the first one you saw about but as you grow maybe you switch from that single level to the multi level down where you've got some more pages under that about section. And then the last, you know, kind of common one is what we call a mega menu which is much more complex drop down we really see this on sites that have, you know, tons of lower of inner pages. You know a bunch of different related content, but they don't want to put in like one really long drop down. They don't want to put in long sites like I think like Best Buy right so they might have like, you know, products and then they have the different categories and under those they've got like subcategories. It's a great way to get someone there really quickly without having to take them multiple steps away so in this example, we don't want someone to have to click on about us, see a drop down, have that say all these different things on it using this mega menu structure. We can put up, we can put a lot there without having to drive them to multiple clicks away and then they can get, you know, one to two clicks away from their, their, where they're trying to go throughout the site. Once you talk once you've gone through that site structure. Now we want to talk about how user user flows through that site structure so this is the path they take went to get to that you know page to the donation page or to the, you know, join membership or volunteer page or something like that. And this is outlining, you know, once you've created that structure, it's outlining the expected steps to get there. And then, over time we we optimize the entire user experience to try to get them there faster so back to that Amazon example. I know there was a kind of a case study on that before where talked about they wanted to get there. We want one click checkout I want one click checkout, and the developers kept coming back and they would have like okay I've got four steps but we've really shortened this checkout process down. And they go back and if they know one click checkout one click checkout we got to get them there faster. So it's you know looking at that user flow looking at what what's happening now with the expectation is the outcome expected was one click checkout, what they ended up with was something where it would store your information you know the editor credit card and all that stuff every single time, you would check out, but they gave you the ability to go back and change something if you wanted to instead of making you fill that stuff out over time. And they really optimized that user flow for someone seeing a product checking out without having to take all those extra steps. And that user flow managing that user flow can help you identify like problems and help you reach your goals. As you see like how people are actually using your site versus how you expected them to use their site so come up to start all that with the plan. This is what that user flow might look like so we like to do it through a through diagramming, you can do it you know right if depending on how complex your website is this works great like on a whiteboard. So having something like this with that set that you work with your team you work with your marketing agency on to really see all the pieces of this, you might not realize how many steps it is taking someone right now, or you might, you know, maybe over simplifying what you think is a common example I always see is, you know, across websites, a lot of nonprofits or organizations put the big donate button in the top of the, the top of the browser. And this is anecdotal but from our experience with, you know, thousands of websites, that gets less than 2% of all our website clicks. And that's not because people don't use it. It's a really great way to reiterate the fact that like this organization accepts donations, but your users probably going to your impact page and seeing what where the money goes and then donating or they're reading a blog, and then they're seeing a call to action that blog and then donating so thinking about that and the overall user flow is important too so not just what you hope they do, but what the you know what the actual logical path is mapping that out and how many steps there are and then optimizing and improving that over time. Once we've kind of optimized for that that experience that user flow that experience we start to talk about how we're going to design the site and one of the key elements of the design is going to be the responsive web design I'll kick it to Joe to take this over. Yeah, responsive web design. A good example is if you're ever, you know, trying to order some Italian food online and you and you and your Google strong bullies near me, and the menu, all these menus pop up and you got to grab your phone and you're trying to open it up and read it. So that's a bad user experience. But a lot of a lot of nonprofits and small businesses still have their website set up that way. And responsive web design is when a web design is built and a lot of, you know, Wix and Squarespace WordPress they have these features now built in but you still need to design for them So it's a web design. It's, it's an approach where depending on screen size orientation of the device being used, you'll be able to view it accurately within your browser within your laptop, your tablet if you have your phone whether it's horizontal or vertical, it's going to adjust and be responsive to that type of format So that's what, you know, responsive web design is the other piece of that is not just, you know, can you visibly read it and not have to pinch and scroll, but is it loading fast enough and making sure all that works. If not, if you run your Google Analytics, you're going to see very high bounce rates that means people come to your site and bounce within seconds or it doesn't even load and they don't get there. Let me give you an example on the next slide. You know, really what we're talking about here mainly is, is mobile optimization. So like I said, we're talking about speed, the sizing of your graphics, the layout of all your content, the activity that you're trying to drive in the engagement all this needs to be taken into consideration. The mobile phone with the X, that's kind of what I was talking about with with the menu. So when you, when you do design, you know, hopefully you're using a WordPress, Wix or Squarespace, they have these tools built in, but thinking through how all this is going to load, you might have the best graphic designer in the world that they developed this beautiful brochure looking website. And it's just one big, you know, image, or it's all these different images, but it might look beautiful on your laptop or a computer. But once you start squeezing and, you know, really changing the size of that on a phone, it's going to stack, and you have to really design for all that stack. So here, help home healing. That's on the left, you've got the photo on the right, that's what it looks like on your computer but as you look on your phone. These things begin to layer on top of each other so you have to design in that manner knowing people are going to scroll down, and then the buttons as well where are those buttons going to pop up are they going to cover a certain, you know, important piece of information or a part of the photo that's critical or taking all these into consideration is really going to improve your user experience. And then the next thing we look at is usability and accessibility. You know, we do a lot of work for government sites as well, where we have to comply with the American Disabilities Act. So anything that we create has to fall within that range. We'll share a URL so you can really look at the specifications to make sure your site is, is viewable and usable for folks who might be colorblind or have some type of physical, medical, mental or hardware disability. So the goal here is focus on text clarity, really think through, you know, if you go back to digital literacy, health literacy, financial literacy, whatever you're addressing, make sure that the content you're writing is, is even understandable at the right level there as well. Don't rely solely on color, your colors have to be at certain gradients, so they don't you don't lose, you have a dark text on the dark background of white text on a lighter background that might be invisible to someone who has issues with with recognizing a distinction color. So all these different pieces need to be taken into consideration. And the other thing you want to do is test your web pages using only a keyboard so you're not using your fingers and poking around on your screen, you're able to navigate on on a keyboard. Add labels to fillable fields. So if you have a black field, a blank field, it is, you know, almost an light gray scale filled out so people know where, where, where and what to fill in into those fields, especially, you know, if they're becoming members or donors or volunteers, help them along the way. And then the last piece really is, you know, making sure that your website is identifiable, identifiable, but by the language that that your audience might might be doing might be, you know, speaking. And, you know, a lot of sites you can put that Google translator at the top so it can switch between Spanish and English and other languages but but definitely take that into consideration as well. Which brings us to really implementing a UI and UX optimized design so we'll go through some some best practices now give you some real real life examples. One thing we have to look at is typography. And this is where the art and science of design comes in you're really focusing on your messaging, and then you're focusing on the way you know the human brain. So if you look at this, it's real, it's funny, and it's pretty accurate. You know, your eyes start out on the left, and then they move down and to the right in terms of messaging. So you really want to get your, your main point your bold right up front in center to the left, and then the call the action on the, on the lower right so that's where your call the action to donate to to volunteer etc comes into play and what's interesting once once you see these, you know, tips and tricks and the science behind it, you know, it's great to look at ads brochures websites and you'll start to really see some great practices, even on television when they're putting imagery up so keep an eye out and you'll start to see some really great examples, but some best practices, don't have too many different typefaces, you know, keep keep that to a minimum, and choose typefaces that complement and contrast with one another, just like you have the color palettes that you know the different colors within your brand guide all compliment each other. Same with your fonts, you know, have your main font family. Use that family. Maybe you have a second font that complements it but but make sure it does actually compliment it and you can work with your, you know, your branding agency to do something like that, and keep readability legibility and accessibility top down. And again, the we get gets back to user experience but this is where the visual hierarchy comes into play so looking at an ad looking at your homepage, looking at your donation page. Keep this hierarchy and typography in mind when you're building all these different elements. The next slide. So I'll jump in this example. So, great job covering that Joe so this we take a look at this is like a site we've done one of the sites we've done where we we I wish I had like the before picture this but just showing how how that that typography and that that hierarchy is used. So, personally you see when this when you come to this page is obviously these great graphics will touch on imagery as well. But you know, like the main headline welcome to pineapple land and you might skip over that, that that piece below that you often will just miss that that paragraph below that, but then you see the next steps the next actions we want you to take and they really they really drawn out from the page as well so you either order now, you know, or locate applyables. And that's just just kind of show how that would that would work so we structure the page accordingly. You also what the other thing you might see is how the, how that text is aligned so along with the topography is alignment. Everything sort of center line even the buttons are center line below that so that you know your eyeball your eye your view the way that you the browser's page is going to go sort of funnel down in that format as well. And the piece that we're going to look at as color and using color so just not from usability standpoint as well make sure contrast are correct you're not putting colors. You know two colors over top of each other that make it hard to read or make it hard to engage the site, but color can also you know really convey meaning. There's a there's a number of great studies out there and research that's been done the past of what different colors. And in different situations so you often see in the medical space you'll see like light greens and light light blues and grays and colors like that that are used because it's mostly give you like a sort of a calming feel. And then in a lot of brands like you know kind of in your face brands like Monster Energy and Coca Cola Nike and things like that you'll see much more vivid colors like reds and oranges and like the really bright greens get used because that's mostly like elicit action right or asking to take an action. You know make sure that the colors you choose the colors you choose your web design, not only fit your brand but also fit what you expect the user to do and the action expected to take on they evoke moods so it can simply go saying like, you know, getting them into a calming place or getting them into a place where they state they trust your brand is it or your organization very important, you know, for if it looks like you have using like reds and blacks and dark colors and things like that and you're asking them to donate. And actually that those colors actually will change moods and make you less likely to, you know, you know, attribute money to a cause or, you know, volunteer for the organization if it's not, you know, structured correctly, and making sure that they are also well aligned with your cultural organization so you're, you know, whether that that's the the your local demographic your local market or whatever the culture might be that you're trying to attract or providing source resources for one thing that's important here it says you know it's also talks about personal preferences when choosing colors. It's important to take yourself out of out of this out of the UX out of the UI when you can when it's your specific preference and think specifically about your audience and your brand preferences so yeah you might like you know these colors maybe like using teals and purples and greens together, but your audience is more likely to respond to react to a different color palette. So keep that in mind and you want to be designing for your audience designing for your user and not just your, like your current audience but what you're expected audiences to find that scalability approach, as you grow as you want to attract more people, what are they going to to engage with and what's going to work well for them. On these slides you see some examples this is another one we did for the city of warmington Delaware, where we were trying to get people to to take an action to, you know, get back out in the community this is like before and then even and then following code or during and following COVID, like get back out there it's time to get back out there it's time to be active in your community it's time to live and work and play. And then move to the city of warmington you'll see these colors are sort of bright and vibrant and have that underlying connotation of that's what we expect the city to be now to get the slide. Here's another example of using those colors and action so first site we work with the death penalty focus, as I was talking about like the blacks and the reds that really are kind of in your face. So if you're relevant and specific for this organization if you think about what the organization does they spread awareness about, you know, death penalty unfairness and death penalty and legislation around that. And then we use other colors that really pop out on those backgrounds like using, you know, white as the call to action there with the red the red text over it so it draws attention right to that in that. And then that black and white imagery kind of sets sets the mood for this being like a, a sad powerful, you know, cause to contribute towards. And in this this example leads into the next, the next, the next piece of this and imagery as well, using this imagery was somewhat abstract. And it also has called calls you to action so like there's no justice no peace. This is a very strong very powerful image, and we're and you see we laid the call to action over that to become a volunteer so we could by becoming a volunteer the expectation is get justice, get peace right or you don't kind of contribute towards this, this organization. I love mentioning imagery images and graphics, you know you can use this all different ways the one I just showed you as a background as an abstract image. You can also use this for illustrations like concepts like the ones you see on the right side of the screen where we actually have, you know we built we designed this, this, this shape, I guess, that fits within the brand and logo of this, this company, and as you actually hover over each one of these more information pops up about this so it becomes like an interactive thing. And as you can see this does is it also helps to enhance that brand identity so we've connected the shape we use to the logo in their brand it's not exactly the same but you see it's got that same sort of the shape to look and feel the colors and it really helps connect that to that brand, and now this same, the same imagery can also be used on billboards can be used in print hats it can be used in you know social media posts it can be used all across the digital landscape and across your different collateral and it will connect them back to that brand. Additionally using imagery helps you communicate data so like you can you could have a study that you've done or maybe the impact that you've had or show, you know, show growth or something like that over time, using imagery to convey that is a lot better than just writing out a bunch of stats and writing out a bunch of you know background data that no one's really really read through. And then what it also ultimately does is it creates visual interest so you know draw your eye to that. So it can get you kind of like oh it starts to think of how you how your organization's position, the type of audience your organization serves if you use like this community type of images are, you know we always we know like from from social media from engagement like puppies and babies get get tons of clicks tons of action but having those on your site if it's relevant to your site, that's going to really, you know create that visual interest and tie them back to your brand. Another example, another great example I think I thought of you know using imagery and action is this one this is an art organization in a community one of the websites that we help them work on, and there's two pieces of this like if you go to the site you actually see like this moving imagery in the background there's like a video that moves behind this but also there's this static image as well that if you know tie into that you can see like what this organization is about what this community is about through the image the text in the image and the text over the image the text over the image tells you, you know we're activating states to strengthen these communities, the text in the image is about the community what they want the community to be about like it's vibrant like family emotion and hopeful love like all this positive. And that's the that's the what we want you to feel what they audit what the organization wants you to feel when you come to that website. And then you'll sit you also see there that call to action it's not such a strong call to action just thank you for your support. So we've activated this fake me this community that we've got this bright vibrant space. Oh, you know, find out more about this about how you can support or find out how you supported us or find out how others have supported us in the past. And then we roll that into iconography iconography is you probably see these all over the webs now all over the web now but when you go to a website and it's like got your different services and every different service have a different icon if you go to our site we've got icons all over the place. So we all tie into a different service or a different solution that we might provide or different outcome for an organization. And this is a great way to like convey complex read off the side concepts or actions clearly so you know having in this example there's a picture of like a house with like kind of a soft background behind it, and it talks about, you know that that that specific part of what this organization does that that services organization does, or if you look at the like there's an image of like a bank right and so it's talked about foreclosure prevention, so it ties you to that like now you're thinking okay that's about money this is about finances is about, you know, a positive, a positive part of that to using that color green, you know green green the usualist it's like a positive a positive emotion as well. And then using these repeatedly throughout the site so if you think about this we put on the homepage, we've got our five icons. There's no page about that throughout the site if we continue to use that color and use that icon. Now we can really tie that back together so now you've created this user experience where your users are clicking on something. They're seeing that that green image of the bank, and now they know this is about foreclosure prevention, so all the blog posts can have that same color on as well. In your emails you can subscribe have users subscribe to email alerts about you know foreclosure prevention and all those might have that same iconography across with it, and then you've started to kind of create these sort of sub brands with that. Here's an example of how we use this kind of a larger scale to for 211 metro Chicago where visitors come users come here to find out about you know. Community resources available with them, and we've got a strong icon tied to each one of these, and then they also then as you go through the site or navigate through this site you'll see the same thing that's carried throughout. So if you click on childcare, all the childcare results are going to pop up you're going to have that icon in there for childcare, but you can see from the very beginning, what's what's featured in in in that example. It really ties your eye to that so you might not come here first and see the see that text you might see that icon that Oh, that's healthcare is a heart in there I know this is about like, I know to expect and you but it is very important when you are taking these that you are selective and you do understand. You know what that is meant to be or what that can be used for you don't want to be trying to push too hard and like say oh this is, this is healthcare and it's got like, you know, a graph or something like that it's not really as as well tied to that. This can certainly be your friend, it's very helpful in the web is very helpful to create visuals it's very easy to tie things back together as you evolve that out over time. So I'll jump was after covering that will kind of start covering our systems and methodologies and how we go about, you know, optimizing use user experience and working with organizations. Before we do that I'm going to jump into a quick poll question and ask you, what's your biggest challenge now in updating your current website. Is it knowing where to start. So again just drop these back in that chat. Is it not having a resource who can update the site so you know you either you either spread to thin or you know you don't have someone on staff that can do that. You don't have time to dedicate some to this improvement so you know what to do but you don't have the time to do it, or your website doesn't allow you to do it without breaking it so it's outdated it hasn't been kept at the speed it's using an old technology it's not responsive. I saw someone just said a B and C. That's probably pretty common to seek to see more than one example. So I give you guys a all second because you guys look like you're pretty active on it now. And then I'll kick back over to Joe to talk to talk to you guys through growth driven design. So let's go. Yeah, everyone, you know, it seems super common that, you know, A and C are the most common and really to address that it comes down to where to start. You know, if you do have limited resources and do have limited bandwidth and finances with what's the best way to build this site that's continually to grow. And, you know, if you put your entire investment into a website, it might take, you know, six months to get done and you're missing out on a huge opportunity and you're really making a risky investment because you're not testing your assumptions and what's going to work so we use a growth driven approach when we're creating websites. So that way your website is in a constant state of improvement. And you're always improving the messaging design you're measuring you're seeing where people are going when they, you know, depending on what type of site architecture using, or, you know, how is what that typography the colors the iconography, looking at all these a B testing them along the way so your site is in constant flux but in a good way because it's it's improving and you have the financing. Yeah, you have more financial liberty and more time to do all that and make those improvements. So the next slide is kind of a schematic of what we're suggesting here so like I was saying, if you build a website. And let's say it's a $20,000 website and it's going to take six months to a year to build. And once it's launched, you know, you, you're making assumptions that people are going to follow a certain flow they're going to respond to certain colors, and you just spent your entire budget, and now you're just crossing your fingers this thing is going to to work. You've seen a lot of nonprofits go down that road businesses government sites it's it's not the best approach. So what what's really taking over now is this new approach where it's, it's an agile process. So you come up with the strategy of and really look at your goals and you are alive what what you want to do with your nonprofit, and you launch a launchpad website what that means is it's a website that is addressing all your needs, and all your need to have some assumption to have. That's the other 20%. And that's what we'll A B and test stuff so we'll launch the site, and we'll learn from it. And we'll see how people are clicking through. And then we'll transfer that knowledge back to the team and say okay listen let's. let's not put all the effort into the blog. People are really responding to these webinars or these live events that we're posting on the site. Let's drag people there and put our energies there. So that way your site is, you know, every month, every quarter, you have your new plan, you have your assumptions, 20,000, even with the $2,000 website, regardless of your investment, it really comes down to not putting all the money in at one time. It's putting a fraction of that and saving your funds aside to continue to improvement. And you'll see improvements, you know, at the end of the year, two years as all these improvements compound, your donations are going to be compounding accordingly, your membership, your followers, and your subscribers. So that's kind of the approach we take. And if you really go back and look at everything we talked today, it's impossible to really guess everything's going to work. The user flow is the design, the typography, the colors, what framework do we use? We're going to put in place best practices. And we know from a percentage standpoint what's going to work best. But at the end of the day, it's always better to continually improve along the way. So that takes us to kind of the end of the presentation. We just want to share with you some really great tools that you can use to get started. Like Aretha said, we'll send out the deck as well in the recording. But if you go to TechSoup's website, there's a website wellness report. And if you click on that link, it'll take you there. You just simply enter in your URL. It will scan your website, tell you, cover a lot of the things we talked about today, give you a quick report on page speed and usability and some SEO feedback. And then what you can do from there is it'll actually give you best practices to improve all those. So that's the website wellness report on TechSoup. I think David just put a link into the chat as well. And you can access that there. Next slide. Website development. So like we said, we build TAP network in partnership with TechSoup over two 300 websites a year and support close to a thousand of them. So if you go to TechSoup's website, click on services in the drop down menu. Going back to site architecture. You'll see website services and digital marketing. That's TAP network. Click on website services and you'll see a full suite of services, the website wellness report tools, a lot of great blogs and resources right there to get started. And we'll just cover one or two of them right now just to give you an idea of how we can support your efforts. On the next slide. I don't know what I did. I clicked backwards and I locked the screen out. There we go. So we have a couple of different services. For some of our clients, if you want a growth driven custom website development, that starts at $10,000. We also have programs and retainers for nonprofits who are seeking support. So if you already have a website and you need ongoing support, like many of you said, you don't have the bandwidth, the time, in some cases, the expertise to do all these. If you go to the next slide, we'll give you an example of what we do. So for custom website development, it's kind of everything we talked about today. The strategy, the content design, the wire framing, understanding the goals, growth driven approach to development and then launch and testing and continue improvement. So this is just a quick outline of what we'll do or if you're working with any developers, the services to look out for for custom website development. And then on the next slide, website maintenance services. So like I was saying, this gives you your part times chief marketing officer, chief technology officer, CTO, you have a team of folks that are there every month with a set amount of hours to support your website. So if you're on Wix and you want to go to WordPress or Squarespace and now you want to move up to WordPress. So you have a WordPress site and you want to move to HubSpot and marketing automation or just make changes and add donation platforms and things like that nature. That's that's what this service is starting at $499 a month. And it scales up accordingly just depends on on how many hours you may need. And again, if you're just getting started with your website and you go to website development page on TechSoup, there's a ton of free resources and content to get started, or you could just book a free consultation and we can walk through your specific scenario and needs. So that about wraps up our our show. And if you guys have any questions or if there's some questions in the chat box, we can do our TechSoup Jeopardy here and answer as many questions as possible. So yeah, let's see what we have in store here. Yeah, so John asked, will there be someone that can contact me? He had his email. I think it's probably best for him to contact you all right or somebody can grab his email and contact him. Yeah, so that that so we'll share this this presentation afterwards. It's got the links that we kind of talked about today and it's got the link right to our landing page. And if you just fill it out, just quick information, somebody on our team, we'll get in touch with you. Awesome. So Annie asked, do you have any suggestions for brand font that you didn't mention? You meant you mentioned a lot of different brand fonts. Yes, I saw that one. Instead, can you, what do you do if your brand font's not available? So I'm not, if you can add some context to that maybe and in the chat, that would be helpful. But if you're if you're saying that like you guys don't have access to it anymore because maybe your your developer is not available or something like that. If it's on the website, if it's on a website, we can we can probably take a look at it and see like what it is and help you help point in the right direction of that font. But a lot of times we just recommend, you know, starting from the basics and and using one, using Google's fonts, they're free. They work, they're supported across the web. There's like 1500 or something like that of them out there. And there's a lot of like common like fonts that can be used that that might that you might see somewhere else. And just make sure that that you know it works with your brand, works with your colors, works with with your styling. And don't don't ever complicate it. Okay, this is a great question from Mark. He said, how can we post a free item of interest or value like a PDF that has information on it for our visitors to download where they can put in their name, email and phone number, and automatically gets into an email CRM such as MailChimp or Constant Contact. Yeah, that's a great question. So I mean, depending on how your site set up, like if it's on WordPress, we would we usually use your contact form seven or gravity forms, which allows you to kind of keep a database in the back end of those submissions. And then you just have to tie that into either an automation of some sorts at your point like MailChimp, or the CRM you have in place, which will say, okay, this, you know, this person fill this information out, we can set up an automation to look for anybody new in that list. And then when someone's in that list, we have an automation that goes out and says, Hey, thank you for your interest. Click here to download your guide. Automation is so great. So a Robinson said, what color would you say are the easiest on the eyes for people that are colorblind? So that's a good question. So I'll share a link to a couple links for this. Colorblindness isn't always as much about that just the colors, but it's also what you do with those colors. So like having contrasting colors like that are used together or used to showcase like an action or what you want someone to do. So like common example would be like on websites or on applications used where like on is green and off is red. If someone's colorblind, they can't tell it's on or off. So using an icon on top of that to show like on or off or like words over top of that show on or off help you kind of navigate around that. And then colorblindness is often specific to different users or different people can see things, maybe they can see shades, but they don't know, you know, deeper, deeper or light, they might be able to see color over certain things. So it's really specific kind of to the user, but I can share some best practices on these on these slides as well. And David said, how do you test and measure the user experience? Like what tools do you use? Yeah, that's great. So the easiest tool to use this phrase is Google Analytics to track like how people use your site. So user flow, what they're clicking on to understand like they're how they're navigating through the site. We use tools like hotjar, which allow you to do heat mapping and smart look smart, smart look or smarter look, which also which kind of take a step deeper to see how someone's using the site. And then there's just some practice and practices you can use. So like, as Joe was talking about the accessibility checker to see how your site rates in there ranks in there, looking at your looking at your website in grayscale. So like using the browser tools to like look at it in grayscale is helpful if you're trying to see how how it would appear to someone who is colorblind to check for you know user experience usability from that as well. Okay, and John Avarado, I see you put your phone number in here. You are very, very serious. So I hope you see the contact information from Joe. Awesome. Okay. There's a question in the Q&A for ecommerce sites driving big metadata, what are the best ways to avoid the site being hacked or tampered with by third parties? Um, that's, you know, that's a secured more security question that all kind of depends like what the site where the site's hosted. So make sure you have a secure host a host that is that can manage that for you, and then locks those files down locks those those services down, making sure you have like a a full SSL in place so that that has end to end encryption. So we can kind of like hijack that. And then, you know, keeping keeping everything keeping your your plugins, tools, scripts, things like that up to date. So that you know when something's exploited that hacker doesn't get access to it. RC says if our volunteer doesn't have time, would you be able to help with our website and how much the costs and such? Yeah, that's a great question. So I'm happy to help. We work with thousands of non-profit organizations. Joe, I think Joe mentioned that said on these slides, there's a there's a link there to kind of jump in either have a conversation with us get started. One of the first thing we always want to do is just have like a quick consult to see like what you actually need and what your goals are. If you a lot of times we'll see non-profits that have like a list of here's all my nice to have the need to have. So if you don't have something like that help with putting something like that together, this is also very helpful for this conversation. And then we can wrap you the pricing around that we price things out all different ways like we either have just a monthly retainer where you know you've always got access to it. You have access to our entire team. We've got everything from senior designers, creative directors, senior developers, software architects, all the way down towards just you know people that can do data entry and content. We kind of blend that stuff all together so you have access to a full team depending on what you need at what time. And then we also just do you know kind of per project or per engagement pricing as well. Nice. So that's the end normal questions here. I want to give you Kyle or Joe the final words for anyone. I did see one more question. I see I see a couple questions in here I think but in the chat actually I'll answer real quick. What Lily's asked a couple questions I think she's asked they've asked if where they can find website templates like outlines on how to structure our website for nonprofit organizations. We actually have I don't think it's published yet. We actually have like a best practices presentation for structuring a homepage design which is like a tell helps you tell the break tells you tell your story about your organization. How to tell that story and then how to structure that site. So you can reach out to us we can help we can share that with you and then I also noticed that there's a question on are there discounts for nonprofits. So yeah so parting with TechSoup we actually we discount all our services 20 percent across the board for nonprofit organizations going directly through TechSoup. So if you follow this link you'll get a different price different different engagement than you would if we were kind of going to go direct. Awesome. That sounds like it's it. This has been a great you know great questions from you all. As I said you know we'll share this this will be out to you guys the next 44 48 hours and then we'll have make sure we include you know there's there's links either in the email or and or in the presentation so you guys can get directly in touch with us. Bye everybody. Thank you everyone.