Creating a New Experience For a Nonprofit

Generally when I’m designing a website, I tend to skip over some “nonessential” details, like user testing, creating personas, etc. I usually feel like I should just get something out there as quick as possible. This project was a fantastic exercise in sticking to design techniques that are universally accepted as essential. Through the experience, I was able to gain an appreciation for these practices, and can see myself using them more often in my day-to-day client work.


Project Overview

This semester, we had the opportunity to work with the Ouelessebougou Alliance, a nonprofit based in both Utah & Mali. The overarching goal was to redesign their website, catering to a younger generation who are more prone to give in multiple “micro-donations,” instead of one large sum. We were able to work directly with the executive director of the Alliance and gauge their exact needs & problems with the current site.

What’s the problem?

Our team was able to conduct an in-depth interview with the directors of the organization to determine what they were wanting to accomplish with this redesign. Overall, they felt like their web donations were suffering because the current site wasn’t designed for fast-paced millennials with low attention spans. They told us a few key indicators of success would be:

  1. Redesign the site to appeal to a younger, millennial audience.
  2. Within the page designs, everything should drive towards a donation.
  3. Make donating simpler & quicker, so it doesn’t feel like such a burden.
  4. Keep the focus on the people. The stories are what keep users interested.

Our Game Plan

Content Audit: let’s gather everything that’s currently there.

One of the first things we did as a team was to do a deep-dive into the current website, to get a good feel for what content currently existed. Overall, our biggest takeaway was that the current website was way too complicated, and that they could easily compress much of their content, reducing the amount of total pages.

We also learned that they had an immense amount of great content. The stories of the villages were extremely compelling and we could see a way to potentially use that content in a more organized manner.

Design Principles: what should we focus on?

We then came up with a short list of design principles that would guide us as we created a new website design for the Alliance.

  1. Content Hierarchy: A call to action in regards to the button for donating. We will apply this by finding out where the best place we be for the button to exist on the site.
  2. Consistency: Look & feel as well as the tone of content. This will be applied to the site by making sure that certain colors and designs are in a consistent flow.
  3. Hick’s Law: The fewer option there are, greater the success. This will be applied to site by making sure that there are not too many options for links or buttons.
  4. Aesthetic & Alignment: Visually Pleasing — easier to use. The design will be set up to not only make sure that the website has a pleasing look to the eye, but also should have a simple use for different things. Alignment will also be considered to prevent chaos.
  5. Ockham’s Razor: Of two explanations for an occurrence, usually the simpler one is usually better. With surveys, interviews and research, we will find a way to make it easier to people to find the donate button and use it.
  6. Gutenberg Diagram: Is used to show a user behavior known as reading gravity (left to right or the Z direction). This will be used to design the layout of the site in a way of how a user would view the site when first seeing it.

These principles would help guide us as we created a new experience for the Ouelessebougou Alliance.

Developing Personas: who’s going to be using the new site?

I’m not usually one to spend a lot of time working on personas, but this exercise proved very helpful as we made design decisions as a team. We came up with a few people who we thought represented the target audience for the website redesign. You can see some of them below:

Creating a Sitemap

As a final step in our planning, we spent some time reorganizing all of the existing content on the current website, into a new content hierarchy that was simpler and contained fewer pages and subnavigations. This was probably the most crucial step of our planning phase, as it had the most direct impact on the final product. Through this exercise, we decided to cut entire sections of the website, and combine a few other sections. We also decided to create an entirely new section: a blog-like “Stories” tab, where users could read stories of how their donations were directly affecting lives in Mali.


Our Results

Wireframing

We started our design process with some simple wireframes. Overall we tried to capture the same basic feel of the current site, so that regular visitors wouldn’t be too disoriented. But we definitely changed-up some of the navigational systems, and overall the whole thing felt much cleaner and simpler.

Surface Comps

Then we moved on to surface comps — the visual design of the new website. I tried really elevate their current style by refreshing the logo, changing the typography to something that felt more contemporary and relevant, and even establishing a more distinct photography style.

While these designs weren’t used in the final presentation to the client, I was pretty happy with how everything turned out, and think it would be a great style to use for another nonprofit that I’m passionate about in the future.


Retrospective

As I mentioned before, I tend to be pretty hands-off when it comes to testing out my designs, or validating them in any way with users. I’ve always felt like it would be a waste of time. However, this exercise helped me to understand how important that process is to achieving a successful finished product. The same idea goes for creating personas and making a project plan — it’s not something I would usually do before this project, but I’ve learned the value of these essential practices.

I also found a lot of joy in designing for a nonprofit. I do a lot of work for a varied list of clients, and none of them are nonprofits. Even if my specific designs didn’t get used, it felt good to know I was contributing to something larger than myself.