Designing for good: How we create user-friendly nonprofit websites from scratch

A nonprofit website redesign is a big undertaking. Getting your board to approve the project is the first heavy lift. Then, you have to find funding, manage the budget, and navigate the project management phase with your team and any consultants you bring on.

The whole process takes a lot of time, energy, and effort from everyone involved. It’s not something that’s easily done — let alone redone if it goes wrong or doesn’t meet expectations.

To ensure that all your stakeholders will be satisfied with the end product you’re investing so heavily in, your website must align with your collective vision, meet organizational goals, and be 100% user-friendly. And, at Bound State, that’s exactly what Martin (me!), our product designer, is responsible for ensuring. 

Martin works with our clients to understand their vision and leads them through the in-depth process that translates it into reality. Worried we won’t ​“get” how you work or what you need from your website? Or that you won’t love the finished product at the end? This process eliminates all the ​“what-ifs” and keeps you in control at every step.

Take a peek behind the curtain and see how our process breaks down!

Step 1: Understanding your vision and goals

Before discussing website features and tech solutions, we need to step back and understand what we’re building, why, and for whom. Without these boundaries, your website redesign project will be aimless. Sure, we could jump in ​“blind” and design a website that looks good. Anyone can do that! But will it meet your organizational goals? And help your organization and its stakeholders? Probably not! So to begin, we establish clearly what the goals of the projects are.

Most commonly, our clients’ #1 goal is an ​“easy to use” website. But what does that really mean? Through this process, we push you to dig deeper — defining actionable goals we can use to hone the design and drive more value. 

Some questions we’ll ask you are:

• What are your goals for your website?

• What do you promote or advocate for?

• What does it do?

• Who uses it?

• Where does it fit in their life?

• Does it solve a problem?

• What’s led people to search for your website? What are they struggling with?

• What’s the biggest benefit you provide?

• What features are important to your team?

• What are the main problems your organization is facing?

• What might cause our project to fail?

• What are your competitors doing? How do you feel about it?

Establishing your goals early on can simplify decision-making when adding and changing features later. Does feature X help us meet a critical goal? If not, it’s not the best use of your budget.

Step 2: Turning ideas into an action plan

A website is only user-friendly if visitors can effortlessly find their way around, enjoy the experience, and get what they need. So when mapping out your website project, we are constantly asking ourselves this question:

“How can we help people take the next step in their journey?”

To answer this question, we define your website’s main aim. (Some examples include having someone register for a program, sign up for a newsletter, or make a donation.) Then, we develop a deep understanding of your users — so we can put ourselves in their shoes and create content and design that resonates with them. Finally, we reverse-engineer the steps they’ll take to get there so we can design a site that nudges them in that direction.

Step 3: Building a user-friendly website 

Now, we get to the fun part: turning your goals and vision into a reality. The first step in this process is to create ​“wireframes” of your future web pages. These wireframes showcase our big design ideas at a high level.

Once we’re happy with the wireframes (and you’ve given us your feedback and approval to move forward) we can move on to the next stage: mockups. This is where the look and feel come into play. We consider your brand guidelines and discuss design-related questions like which emotions you want to convey in your design.

The last step of the design process is creating an interactive prototype that we can use to test with real users. This is where you get to see your vision come to life. It’s also where we test the website design — ensuring it’s clear, efficient, and completely user-friendly.

User-friendly website checklist

A user-friendly website is easily accessible in both its content and design. Every user-friendly website must have:

• An intuitive structure that’s easy to navigate

• Clear menus that keep users from getting lost

• Clean and consistent design

• Readable text and eye-pleasing visuals

• Responsive design that adapts to any device

• Accessibility features like alt text and easy keyboard navigation

• Forms that are easy to complete and submit

• Clear buttons and calls-to-action

• “Help” and ​“feedback” features in case something goes wrong

It must also be fast and completely accessible for all users!

Step 4: Usability testing

One can ensure a website is user-friendly through user testing. Even having five real users test your website (or app) is enough to help us uncover any sticking points and validate assumptions made throughout the design process. There are a few ways to test your prototype with users, but usability testing is the most valuable. During a usability test, we ask participants to complete a series of tasks to identify problems with the design. 

Recently, we worked with 1% for the Planet. The project’s main goal was to improve their certification process with custom tech. To support their thousands of members, they needed a process that was quick, intuitive, and easy to complete. After finalizing our software mockups, we conducted usability interviews with a few of their members to test the design. The results confirmed most of our assumptions and highlighted a few slight modifications we’d need to make before launching — paving the way for the new and improved certification process.

We also worked with AgSafeBC, creating a better Client Relationship Management (CRM) and project management software. (They weren’t using their old version because it had a few tech limitations and didn’t offer a great user experience.) Knowing their staff was hesitant to change, we aimed to secure their buy-in early. We conducted multiple rounds of user testing, gathered their feedback, and incorporated their suggestions before conducting additional tests with the entire team. The result was overwhelmingly positive; the team embraced the new system, making worksheet entry much easier. The upgrade allowed AgSafeBC to report on their programming more accurately and see the impact of their efforts more clearly!

How to run usability tests

If we’re your designers, we can run these tests for you. Alternatively, you can use a tool like UserTesting​.com to run them yourself.

What’s next: Trends in user-friendly website design

Tech never stands still. So at the time we’re writing this article, the user-friendly design features listed here are considered standard. But some new trends are emerging in the user-experience space right now — and we’re excited to see what they bring to the table!

Augmented Reality (AR) and Virtual Reality (VR)

Augmented Reality overlays digital information onto the real world, enhancing the user’s perception. Virtual Reality immerses users in a completely virtual environment. Some nonprofits use this technology to immerse their audiences in the problems they’re working hard to solve — like Stanford’s virtual reality simulation that transports users to ​“the ocean of the future”.

Voice User Interface (VUI)

The rise of voice-controlled devices and virtual assistants (like Siri and Alexa) has ushered in a new era of user-friendly design. Users now expect seamless interactions through natural language. This trend not only enhances accessibility but also opens up new possibilities for hands-free and intuitive user experiences. Like how Fellowship Square-Mesa trained Alexa to help its visually impaired residents ask what’s on the menu today.

Dark Mode

Dark mode has transitioned from being a trendy feature to a design standard. This visually appealing option reduces eye strain in low-light conditions and adds sophistication to digital interfaces.

Generative AI

Artificial intelligence can now create new, original images based on input data. These will continue to grow in popularity and usage across websites and apps.

The goal: a user-friendly website that meets everyone​’s needs

From our years of experience building user-friendly nonprofit websites, we know it’s crucial to start by defining your goals, getting to know your audience, and reverse-engineering a website that helps people take the next step with your organization. Then, create wireframes, mockups, and a testable prototype — and run the user tests needed to ensure our tech and design deliver for your organization. (Without frustrating any users in the process!)

Without that? Sure, we might shave a few weeks off your project timeline. And we could still deliver a website that looks nice. But it wouldn’t drive donations, save your staff time, serve your members, gain public buy-in, or do anything else for your team, your members, or the public. And, call us old-fashioned, but we just don’t think that’s good enough!