Anatomy of a Mission-Driven Website

Your website is holding you back.

It may suffer from cognitive load, a phrase used to describe an overabundance of information. Or maybe your donation form /membership sign-up isn’t optimized, making it difficult to move through. It could even be that you just haven’t given your audience enough reasons to care.

We’ll explore what makes for a successful mission-oriented website, from content to user flow to thank-you pages.

In this practical webinar full of takeaways, you’ll learn:

• How to write clear hero messages that encourage your audience to take action.
• How you may be creating confusion through your messaging, user experience and/or forms (and how to fix them).
• Tactical tips for quick website fixes that result in immediate improvements.

Transcript

Jarrett: Alright, good afternoon from Austin, Texas, my name is Jarrett Way, and I am the Marketing Manager here at Mighty Citizen. We’re here to the “Anatomy of a Mission-Driven Website” Webinar. At this time, I would like to introduce you all to Mike Steckle, our User Experience Director here at Mighty Citizen, who will be leading our Webinar today. Mike brings 19 years of UX experience to our agency, and we are excited for you all to hear from him on this subject. Mike?

Mike: Thanks Jarrett, good afternoon everybody. We’re going to talk today about how you can make your website more effective; but before we begin, I want you to think about how you would answer this question - How effective is my organization’s website? Often, our websites are less effective than we wish they were. And today, we are going to talk about some concrete and practical things you can do to answer that question in a way that might make you happier with how you answer it. And to get there, we’re going to use a very light ‘Anatomy’ theme, don’t worry it won’t be anything like - “and your liver is like your social media strategy.” We’re gonna go lightly through the head - which we think of as strategy, the heart - which we need for emotion, and the circulatory system - how to keep moving things along.

But first, my name is Mike Steckle I’m the User Experience Director here for Mighty Citizen here in Austin, Texas, and my role tends to be around information architecture and user research. And I’ve been doing some form of UX work for around 19 years. So, by the end of this talk you’ll be able to: establish goals and strategize solutions to improve engagement on your website, develop compelling content, understand what makes for a better user experience, and then make some quick website fixes that should result in immediate improvements. But there are some important trends that you should be aware of, and this can help you understand a little more about why what we’re talking about today really matters.

So, first of all, remember that the behaviors that built your organization are increasingly moving from offline to online. So, this is an example from the non-profit space, but the principle applies across the board. People are doing more and more of their giving online. They want to interact online more. Online memberships really would follow the same trend, and so would student applications, and requests for information are going up as well. An 8.5% might seem small, but note the trend, the trend is steadily rising from 2013-2018. And think about what it might be in 2021 or in 2025, we expect that same trend to continue to rise for years to come. But a more immediate way to think about it, might be - what would you do if 8.5% of your fundraising or revenue disappeared? That would be a noticeable hit, right? And here’s another important trend more and more people are giving from their mobile device. So again, just like before, 24% may not seem huge out of all online donations, but the trend is pretty strong; and like we said on the last slide, what do you think it will be in two years or in five years? The trend is, without question, gonna keep going up. And this is especially important if you’re looking to attract a younger audience. So, if your team isn’t strong in the mobile space, this is something that you should be giving some attention to.

So, when thinking about your site, you need to start with strategy. You can think of strategy as the brain, and strategy is a complicated topic, so I’m gonna start with - what is strategy anyway? So, we like to think of strategy as the making of an integrated set of choices. So, you pursue this audience rather than that audience, or you use this method rather than that method. And then these choices are captured in a written plan that states how you will achieve the strategy and how you’ll measure your results. Having a written plan is important, and it builds consensus across your organization, and helps your staff understand why a certain decision was made. So, be thinking about what your goals are for the site. What are you really trying to accomplish? And the goal of your site should be pretty obvious. This helps you get early buy-in from all stakeholders across the organization. And then, document your goals and how you’ll measure them. And we like to think of your website, as we would an employee. Your website should have a job description, which is regularly reviewed and updated as your organization grows. Is the job of your site to bring in new members? Or new donors? Or to keep existing donors happy? Or to advocate for the profession? Think about how all the different jobs your site might do and then try to build consensus around the primary ones. So, I did want to address one question we hear from clients a lot, and that is - awareness as a goal. If the job of your website is to raise awareness, really awareness is something that happens outside of your website. It happens through ads, or digital marketing, or SEO, these are activities that drive new awareness and activity to your website. A new site typically doesn’t drive awareness. You need to pair the new site with some of these related activities. So, think of it as you want to drive awareness so that ‘X’ can happen. And then the ‘X’ is what you want your site to do for your organization, it becomes the job of that site, for you.

So, just to get a feel for thinking about website’s goal, I’m gonna play a little game. It’s called - what’s the goal? I’ll show you a couple of websites, and you think about the primary goal of that site. So, what’s the primary goal of this site? ‘Volunteer,’ that’s pretty obvious. You can notice that there are other secondary goals on this page as well, like ‘Donate’ up at the top, but ‘Volunteer’ is clearly the primary. What about this site? ‘Donate,’ the goal of the site is to ‘Donate.’ Or, to fall in love with a puppy and then donate. What about this site? ‘Schedule a Visit.’ And what about this site? This one’s a little bit different, it’s like the others, it has a prominent CTA, which is ‘Learn More.’ This is a little reminder that your prominent CTA doesn’t just have to be clear, it also needs to be compelling. ‘Learn More,’ just isn’t very compelling. And we struggle with this a lot. And I wanted to pass along a quick tip, that we use, which is to think about the whole sentence. In this case, the sentence might read, “Learn more about dates and times,” or, “Learn more about reserving your spot.” And then you can kind of just lop off the beginning of that sentence, so you have a better CTA. Which might be, ‘Reserve your Spot.’ Which is certainly more compelling than ‘Learn More.’ I know this is hard, so hopefully that might be a useful tool for you in the future. What about this site? This one’s a lot more difficult because the main thing you want them to do is not very clear. Your eyes are pulled in a lot of different directions. There’s ‘Learn More,’ there’s ‘Donate,’ there’s ‘Become a Volunteer,’ and your eyes are looking for a place to land. This means you get a little bit disengaged from the site, so your messaging really gets lost.

So, you want to have a clear goal for each page on your site. Think of your website as a collection of goals; both overall, and for each page. Think about what are you trying to accomplish with this page? That becomes your call to action or CTA for the page. This really is a great opportunity for you to get buy-in across the organization. If you’re in charge of your website, you are really in a good position to work across the whole organization to help people understand where their messaging fits into the bigger picture. So, have clear goals for each page. I want to talk a little bit about a spreadsheet that we typically use to help our sites become more strategic. So, we might call this accounted matrix or accounted inventory, but it’s a simple spreadsheet with one row for each page on the site. It’ll include an ID, a page name, the purpose of the page, what you want the user to do, and then the audience. What type of audience this page is directed towards? So, this is a really good way to keep your pages simple and focused, the purpose of the page is to do this thing, it also helps you understand how the pages work in relation to each other. So, if we walk through this example - the page name is, ‘Join,’ the purpose of the page is to make the case for membership, “why should I become a member of this organization?” the desired user behavior is to get someone to sign-up to become a member and it’s good for general prospects. And this is handy because it might help you remember not to use too much maybe jargon, or some things that maybe members would know but general prospects wouldn’t. So, if you think about the next page, it would be your ‘Advocacy,’ page, so the purpose of this page would be to show your advocacy work. To learn more about advocacy issues, as what you want the user to do and this can work for both members and general prospects. Your ‘Education,’ page might be to feature available professional development programs. What you want the user to do is click-through to an individual event, so everything about that page should be driving the user to do that thing - your content, your layout, all are to push that one step. And it’s for members and general prospects. And then once they click-through to an individual event, then you can share learning objectives, and sign-up for the event.

So, this is a great opportunity to look at your analytics. So for example - if you’re on the individual education event, if people are not clicking that ‘sign-up for event’ button from the page, then you might want to rethink the layout of the page, or you might want to rethink the content on the page, but it’s an indication that something is not working about the page. Because the page is not meeting the purpose you laid out for it. So, it’s a great way for you to spot where you kind of need to focus some of your attention in making improvements. And there’s a lot of other benefits to having this spreadsheet workout, so I’ll keep referring back to it as we go; but the tricky part comes next, how do you pull all of this together so that users can navigate with ease. Also known as cognitive ease. You might hear me talk about that in a minute. So, the success or failure of your site often depends on the ease with which visitors can navigate through your site. And so, your job is to sacrifice for the greater good. By sacrifice, I mean really sticking to that purpose that you’ve outlined in the spreadsheet. So, you want to remove superfluous content, and then make the journey pathways clear. This is what a page looks like when it really has no purpose. Everything is kind of, of equal importance. There’s no real page hierarchy, no one created a spreadsheet and said, “hey why don’t we just put everything here?” So, when you look at this page, I want you to notice your eyes. They’re shifting around without really having a place to land. So, as a user, you’re quickly becoming disengaged from this page, it’s really just not an effective page. It’s a page without a strategy, because it doesn’t know what it’s trying to accomplish. So, we’ve talked about strategy, and now we’re going to put that into practice by talking a little bit about the heart.

So how do we create a website that makes our users care? Remember that every decision is emotional, and reason is really a secondary part of how decisions often get made. But this is especially true for a mission-driven organization, where the decision to engage is more emotionally driven than in many other decisions. So, you want to really think about the emotions especially for mission-driven organizations, so we’ll talk a little about how to do that. So, for every page on your site, you want to be asking why should anyone care? Your mission-centric messaging needs to be woven into your website’s DNA across the board. Think of all the ways your users will discover you and put your mission-centric content first. Tell the stories your users want to hear. So, you really want to focus on your stories that really pulls on the heartstrings, keeping them front and center is the best way to kind of engage people emotionally. So, thinking about compelling content, you want to focus on your user’s top questions. Who does your organization serve? You want to show this at a glance. How do you improve the lives of your members? So, include a statement about the impact of your work. And then, how can I participate as a user? You want to give the user clear actions that they can take to participate. So what we’re talking about here is part of the ‘hero message.’ So, people after to care in order to act, and so your ‘hero message’ is one of the first things they encounter to make them care. Your ‘hero message’ is a short intriguing statement that captures the essence of what your organization does. So, you want to stay simple, compact, and concrete, without getting overly flowery.

Let’s look at a particularly good example. So, this is an example from a non-profit. Look at what’s happening here, the first thing you’d probably notice is the general tone that’s set by the images. One of the reasons we like to include a really strong image, is that it creates a mood in the user. In this case, it grabs our attention; the mood open users to more effectively take in the message you want them to understand. So really before you read any of the words, the image is changing your mood in a subtle way, and once that’s there, then you notice the headline, “let’s take childhood back from cancer.” There’s a story here, there’s a good and evil story here. “Let’s,” includes you as the user of the site, and the rest is a good message too. Rescuing childhood from the enemy, it’s great storytelling in one image. Here’s another example - right away, the image affects your mood, you can tell who this organization helps, and the copy is strong. There’s also a feeling of community, that you can perceive even as a user. And here’s another one, strong image, great copy, and you can tell a lot by the picture, you want this kid’s future to be bright.

And now I’m going to take a quick detour, so if you look at the 2018 Association Communications Benchmarking Report combatting information overload is one of the biggest communication challenges that associations face. And I’m sure this is true for non-profits, and universities, and other mission-driven organizations, but the point is that mission-driven organizations often struggle to present a focused message. So, with that, I want to say be very cautious with homepage sliders. These might also be called, carousels; but they really lessen the emotional impact of your homepage’s ‘hero message.’ So, I’ve done a little bit of research into this and there’s actually not a law that says association websites are required to have a slider. Yet in my experience, nearly all of them do. Think for a minute about how the sites we looked at a minute ago would be if they suddenly changed to a different message. It would really feel like clutter, the emotional impact would go way down, and another way to think about it is your metrics. Typically, click-throughs generally go off a cliff, after the first item in the carousel. So I wouldn’t say never include a carousel, but I would say be very cautious with when you do.

So, homepage essentials - you need a ‘hero message’ that should be clear and front and center, you should have some obvious calls-to-action, users should know what you want them to do, include some clear contact information, show your impact, and it’s a great idea to show some social proof like: testimonials of third-party people so that way it’s not just you saying you’re great, you can say, “see, other people think we’re great too.” That tends to be pretty persuasive to users when they’re going through your site.

So, the next section we’re gonna talk about is ‘how to keep it moving.’ We talked a little bit about strategy, which is the head, and making audiences care - the heart, and now that we’ve got their attention, how can we keep all this moving? We’ll call this the circulation system. The first thing we’re going to talk about it something that really deserves more time and attention - your forms. Often these are your donation forms, or your membership forms, or renewal forms; this is really the connection between your users and their money. You need to keep your forms as simple as possible. Notice what the private sector is doing; you probably fill out forms on the web pretty often, start kind of noticing what people are asking and how the private sector is keeping things compact, because you can often kind of take ideas from them and use it on your own forms. They’re a good place to look, don’t just look for what other mission-driven organizations are doing, look for excellence in forms across the entire web. And, this is something we also often tell clients, try to keep research questions separate from the information you need for someone to donate, or become a member, or renew. Some of those questions that are maybe demographic questions often those can be done through, you know, a survey, social media, or some other ways, but adding those questions will slow people down and it might actually cause some people to not fill out the form. So, you want to keep those crisp and short. This for example - keeping your forms simple, what do you notice about this layout? This really looks like a mobile layout doesn’t it? A mobile format works really well for forms when you port it over to desktop. There’s a trend in design called mobile first, where you might build a mobile version first, and then you build the desktop version, and it really helps keep things simple and focused. Which for forms, can keep them easy to complete. So, this form, is really easy to navigate, there’s a pre-selected amount and there’s not other information that distracts the user from taking action. Once they start down this road, you wanna keep ‘em running.

Another thing to consider is multi-step forms. So in this case, when you start the process of becoming a member of the ‘American Library Association,’ the first thing they ask for is your email address. And then when you click ‘next’ you go to another form where you complete another chunk of information. The great benefit to this is, not only do you get their information so you can put them in a pipeline for them to maybe be marketed to in the future, but you can also see where users drop out. So if people say between step two and step three, if people drop out heavily on step two that’s another great place for you to look and see what might be causing people to drop out. So it gives you a really good way to kind of do a little bit of analytical review of where things might be going wrong, where you can make some improvements. Also, do you see that little line at the bottom where it says, “most people are giving $35 monthly, please give what you can,” that’s what you might call a ‘nudge.’ These ‘nudges’ can really help people make the decision of what they’re going to donate easier. So, if they’re like stuck between $25 or $35 sometimes this can help people just pick the default. You want to keep it reasonable; you want to keep it pretty much based on what people really are giving but it can help people make a decision faster, which makes the form feel easier. Another thing about your forms is, you always wanna be testing. Assume your forms can be better, no matter how much time you spend on them. But just be sure to test one thing at a time, so in this case, there was a test to see whether including the PayPal option improved sign-ups, which it did, but the idea was once you’d figure that out now you test another thing like - maybe the way the credit cards are laid out or something, but always be making little tests on your forms because as we’re saying the forms are really important.

So, what are some things you can do today to improve your website? One thing is to put your ‘thank you’ pages to work. People really never feel better than in the moment after they donate or join, and you want to really capitalize on that thinking. Right now, a lot of the ‘thank you’ pages that we see from mission-driven organizations really look kinda like a receipt. And a receipt, is totally the wrong metaphor, for mission-driven organizations you don’t want your interactions to feel transactional you really want them to feel relational. So, you want ‘em to feel like you’re stepping into a group of friends, and this is also a really good time to start showing people some member-specific content that they now have access to, which they didn’t have access to before. So really, give a quick look at your ‘thank you’ page and make sure it feels like you’re welcoming someone into a community.

Here’s another test that we like to put in front of users, it’s called the ‘five second test.’ So, to do a ‘five second test’ you wanna show someone a page for five seconds, then cover it up, and have them write down what they remember. So, think about, say a homepage, you wanna be sure that within five seconds, I can tell who this organization serves, why I should join, and why I should give. So, let’s try it, I’m gonna show you a couple websites and then, I’m gonna ask just a few questions - here we go. Ok, think for a minute about what you remember about that page. Do you remember who the organization serves? Do you remember why you should join that organization? I’m not so sure that that page is very effective, because usually when we ask people that, they don’t really remember very much about that page. The main thing people will say is, “I kinda remember purple.” But that’s not probably what the organization wants you to remember. Let’s try another one. So, what do you remember about this page? Who does the organization serve? I think you have a general idea about who they serve, you probably remember a kid. Why should I join? You can probably think, “Oh to help the kid, the kid seems to have a college thing,” so you at least get an idea about what that organization is trying to accomplish. How will I benefit from joining? You get a feeling for that too.

So, this one does a little bit better than the first one. Alright, let’s try one more. Alright, what do you remember? Why should you join this organization? It talked about membership benefits on there, do you remember what they were? Ultimately what we are trying to get the person to do is remember the purpose of the page. So, if you give someone the ‘five second test’ what you want them to do is remember what you wrote on the spreadsheet under the ‘purpose of the page.’ When those line up, then you know the page is working. So, give your site the ‘five second test’ - show a page for five seconds, then cover up the page, and just have someone write down what they remember. Does it articulate the purpose of the page that’s listed in that spreadsheet? If so, then you’re in great shape, if not, then you need to do a little bit of work to make what that page is about more obvious. Typically, the issue is that what the page is about, becomes diluted with other things, and a spreadsheet can help you keep focused on that. Another thing we’re often telling clients is to keep pages with shorter paragraphs and more titles or headings, ‘cause people kind of skim through your pages, they don’t really read them like they might a book. This also can help with SEO, ‘cause your headings are a really important input to SEO.

So, some other quick and easy updates - make your phone numbers tappable on mobile. This is a relatively easy thing to do in code, and it’s surprising how often phone numbers are not tappable on mobile devices. Include powerful, professional images even if you change nothing about your site in the layout if all you did was replace stock photography with professional images, your sites sophistication will go up significantly, so that’s one thing we’re regularly pushing clients to consider. For the most part, you can move social icons to the footer, unless your strategy is very social-oriented, a lot of times that’s really where people look for them when they want them, and sometimes they can by a little bit clutter-y on a page. As we talked about before, simplify your membership form, this needs to be just the basics, and keep it short and sweet. So, don’t require a phone number, unless you call people, which most organizations don’t, you really don’t need a phone number. A lot of the times clients just kind of include a phone number without really giving it a lot of thought, but that’s something that you rarely really need. And as we said before - improve your ‘thank you’ page. So, we’re wrapping it up.

Summing it all up, we began asking ourselves how effective our website is. So hopefully, we have some ways you can move your website forward and answer that question with more confidence. So, we want to start with strategy - what are your goals? who has buy-in? and how do you measure that? Let the hard lead, people really don’t take action unless you give them a reason to care. Keep it moving - smart, iterative improvements will lead to additional engagement. So, before we take questions you can get the slides and an additional website evaluation kit at MightyCitizen.com/anatomy and then there you can also see some bonus tools and templates at MightyCitizen.com/tools.

Jarrett: Alright, thank you Mike, and well done. At this time, I’d like to go over some questions that some of the audience had for you Mike. We’ll start with Eric, asked “how do you balance a site that requires multiple calls-to-action? I am the web admin for University, so I have to have calls-to-action that speak to enrollment and recruitment primarily, and secondarily to giving.”

Mike: Yeah, that’s a good question, I’m gonna go back to the spreadsheet for that really, because a lot of times, the issue becomes - someone in your organization maybe doesn’t see where their messaging fits into the big picture. And building out the spreadsheet, can really help people decide, “oh this needs to go here, and that needs to go there,” and you can help your whole organization see how what they’re trying to accomplish fits into the whole, it doesn’t have to all be the homepage, because then you really get that clutter-y site we saw before. But above and beyond that, you will have to set some priorities for which CTA’s are more important than others. Just from a hierarchy perspective. And the argument I would encourage you to give, is that once you start having multiple purposes, or multiple primary CTA’s, you bring them both down. Is that - I hope that made sense. They both become less effective because they start to cancel each other out as far as like how user put their attention towards them. So I hope that helps.

Jarrett: Thanks Mike, and Leslie S. asked, “we have fundraising campaigns set-up on our ‘donation’ page, is it too much to have ‘more ways to give’ at the bottom underneath the main call-to-action?”

Mike: Ah, the thing I love about that question is ‘more ways to give’ beneath, see that implies that there is a hierarchy in play. That you have a main one and then you have some that are maybe under that and are hierarchically less than that. So, that sounds effective. You’ve got - this is the thing we want you to do, but if that’s not right for you, here are some other options. That’s a real clear hierarchy, that sounds like an effective way to go.

Jarrett: And Mike, this next question was asked by Meagan C., and she, I believe, asked this one when you were going over how every single page should have a purpose, you said that that spreadsheet app, and she asked if you should “create a matrix like that for big websites,” so perhaps ones with 300+ webpages, “or would you just identify your top pages to do that with?”

Mike: That’s a great question, because it, obviously it takes a long time, I can think of a couple ways to approach it - obviously over time you probably will need to build the large matrix for 300 pages, and I know that’s huge, but I would recommend the way to get there would be, what I would call, a rolling content inventory. So, maybe start with the 20 most important pages and write those out, and then start putting in some of the sub-pages for that, maybe over the next quarter, you know. And kind of build it out over time so that you’re getting to the smaller pages later, so I know that it’s a very time-consuming task to build that whole thing out, the payouts will be huge, but doing it in a king of rolling fashion might help you get there effectively; and it might help you take more thought into each step along the way too.

Jarrett: Alright thank you so much Mike and thank all of you for joining us today. Please remember that we will be sending out the slides and the recording of this webinar to everyone who registered. We’ll also include a link to a feedback forum for our Webinar today and hope you’ll take a minute to tell us what you think. If you have any questions about what we talked about today, please feel free to email us at hello@mightycitizen.com thanks.