NONPROFIT WEBSITE REDESIGN
Website redesign for STEM nonprofit focused on underserved communities
In this case study, I reached out to my employer, BCAUSEICAN, and to see if they would agree to participate in research to redesign their website. I chose to redesign BCAUSEICAN’s website because I believe in BECAUSEICAN’s mission to provide equal access STEM education for all youths.
We did a stakeholder interview with the marketing manager, interviewed and surveyed potential users, analyzed the websites of BCAUSEICAN's competitors, synthesized the users' needs and the company's ideas into a cohesive user flow and uniform design throughout the website. From these, we were able to create clickable Mobile and Desktop Prototypes to show the co-founder and CEO, Ron Nicholson. Although the website has since been update and no longer looks like the "before" photos shown below, I believe our user flow and update information architecture did impact their redesign. Keep reading to see how we got there.
Homepage
old website
our redesign
current website
Programs
old website
our redesign
current website
Contact
old website
our redesign
current website
Results and Impact
Although they decided to redesign with their own team, we were able to present our work to the CEO and get their approval. I believe our redesign had a great impact on their new website is overall much more uniform and cohesive across all pages, their design is much more spaced out, and their donate, volunteer, and career pages are labeled clearly on the home page.
I was very proud to have been the main facilitator for contact with the organization and my research in general and I learned the importance of having a daily stand up in every meeting to keep each other motivated.
This redesign validated our hypothesis about the value of clear and central sources of information and calls to action.
Old website (left) vs our redesign (right)
Problem and Hypothesis
After speaking with the marketing manager, we learned that our goal should be a design that leads to a decrease in user help emails, an increase in donations and volunteer signups, and a more modern, vibrant, and consistent website.
We believed that redesigning the information architecture for the BCAUSEICAN website will achieve all three of these goals.
We began in the empathize phase, interviewing potential users. By conducting cognitive walkthroughs, heuristics evaluations and journey mapping we defined user problems and pain points. Afterwards, we brainstormed potential solutions and prioritized features we knew would be necessary for the redesign. We then created low and mid-fidelity clickable prototypes, digitally walking through the new user flow. Next, we conducted usability, first-click, and A/B tests to better understand the opportunities for design improvements. Finally, we entered the iterate phase where we consistently updated and refined our design based on user feedback and insights.
SURVEYS & Interviews
What did users want?
We surveyed 52 current and potential nonprofit donors and volunteers, asking sentiment questions with a likert scale response. We found that 95% of respondents would be more likely to donate to a nonprofit if they knew exactly how donation money would be used, and 93% of respondents would be more likely to volunteer if they were given clear instructions and expectations.
We then conducted 11 user interviews where we learned that users are more likely to donate to organizations they understand and trust, and that their website experiences were a big part of that. We also learned that the most successful experiences were a result of users being well informed and signup processes being simple and intuitive.
Usability Review
We found that there were no clear call-to-action buttons encouraging users to donate or volunteer, the menu was not straightforward to navigate, and there was no information about what volunteer opportunities entailed or how donation money would be used.
Competitor Analysis
We took a look at direct and indirect competitors to better understand what the marketplace looked like. Code.org and Children Rising were prime examples of what our competitors were doing well. They, among others, had clear (CTA) call to action’s, clear and organized information about donating and volunteering, and clean, consistent designs to attract users.
Brainstorming
We then began brainstorming. Based on our stakeholder interview, surveys, user interviews, and competitive research, we knew we wanted to include a few key features in our redesign:
Firstly, A Clear donate and volunteering CTAs,
Secondly, The Apple Pay and Google Pay integrations,
Last but no least, The program and volunteering pages with detailed information
After brainstorming and prioritizing features, we began with digital sketches.
We then evaluated the current flow for a user navigating through the donation and volunteer signup processes.
Wireframing
Our low-fidelity screens served as a basic guide for content prioritization. After testing the flow of our low-fidelity designs with classmates, we moved on to mid-fidelity designs. This is where we drafted new content for the site, incorporated compelling images, and added engaging design elements to entice users.
From there, we moved onto usability and first-click testing. We were left with three main takeaways:
-
We needed to shorten the hero images on each of the secondary pages so users wouldn’t have to scroll for information
-
We needed to provide more context on the homepage hero image, so users would immediately understand what the organization does, and
-
We needed to reduce the font sizes across the site, so it would be more in-line with industry standards
HIgh Fidelity Prototype
From our initial UX audit to high-fidelity mockups, the BCAUSEICAN site has changed dramatically. Click to check the mobile and desktop websites.
For the best experience on both devices, imagine you are a user who has only heard the name BCAUSEICAN in passing but is completely unaware of what they do. Try to skim as much as you can and once you feel you've learned enough, try out our donation and volunteer sign up process.