Problem ❓
How can we digitally connect Footbridge with government and insurance administrators to increase funding?
Footbridge for Families, a local Pittsburgh nonprofit, solves emergency financial crises, but they need more funding. While individual donors provide some aid, the best way for them to get money is through government and insurance administrators. These administrators often use nonprofit websites to make decisions about funding. Footbridge's original website wasn't connecting with these administrators well enough to get funding. How can we redesign Footbridge's website to increase funding from government and insurance administrators?
Solution 💡
A website that tailors clearly and quickly shows government and insurance administrators Footbridge's value, credibility and flexibility
Presenting a clear, step-by-step model of how Footbridge works and creates value so that government and insurance administrators see what they want to know most on the first page they see: the homepage
Showing Footbridge's credibility as a nonprofit organization to tailor to government and insurance administrators through visualizations of its' history, past actions, and financials with complete transparency
My contribution 🧩
Team leader with ownership over user research, information architecture and the design of some pages
As the team lead, I oversaw project management. I also contributed a lot to the user research and information architecture, working collaboratively with my team on content design, prototyping, user testing and visual design. I took ownership over the homepage, history/journey page, financials page and the impact page.
Research 🧐
Understanding (inadequate) current solutions to the problem and our users
Understanding how Footbridge (and other nonprofits) currently connect with administrators
We did an expert interview with the CEO and founder of Footbridge to understand how Footbridge works and how they currently connect with government and insurance administrators.
A model I drew to understand how Footbridge works based on the expert interview and secondary research
Other members of my team looked at how other nonprofits currently connect with government and insurance administrators by looking for trends in their websites in a comparative analysis.
Understanding how administrators navigate and assess nonprofit websites
4
semi-structured interviews
for attitudinal data about how administrators evaluate nonprofits for funding in general
4
think-aloud study sessions
for behavioral data about how administrators navigate and evaluate nonprofit websites
Affinity diagramming to make sense of our data
I led the affinity diagramming, doing a round of grouping and then bringing it to the team to discuss what other groupings they saw.
A screenshot of some of my groupings
Key insights
1
A website that communicates with clarity and specificity saves the time of potential contractors
a. Contractors look for the communication of a clear mission that addresses a specific, well-researched gap and group of citizen communities
b. Contractors quickly want to clearly understand a nonprofit’s model (what it does and how it works)
c. Clearly distinguishing between but also accommodating for all users with different goals and priorities decreases confusion and saves the time of users
b. Contractors quickly want to clearly understand a nonprofit’s model (what it does and how it works)
c. Clearly distinguishing between but also accommodating for all users with different goals and priorities decreases confusion and saves the time of users
2
A nonprofit’s credibility is established through familiarity, transparency, and consistency
a. Contractors value the diversity, capability, and history of the team behind the nonprofit a lot
b. Contractors look for familiar team members, sponsors, and partner organizations when determining a nonprofit’s credibility
c. Consistent visual design and branding add a lot of clarity and credibility to a nonprofit
d. The history of a nonprofit, along with consistency in its operations over time with the people and resources it has available, makes a nonprofit more credible
e. Transparency through specificity in testimonies, statistics, example impact scenarios, and other evidence adds to a nonprofit’s credibility
f. Transparency through clarity of financial involvement and capabilities adds to a nonprofit’s credibility
b. Contractors look for familiar team members, sponsors, and partner organizations when determining a nonprofit’s credibility
c. Consistent visual design and branding add a lot of clarity and credibility to a nonprofit
d. The history of a nonprofit, along with consistency in its operations over time with the people and resources it has available, makes a nonprofit more credible
e. Transparency through specificity in testimonies, statistics, example impact scenarios, and other evidence adds to a nonprofit’s credibility
f. Transparency through clarity of financial involvement and capabilities adds to a nonprofit’s credibility
3
Government agents and health insurance administrators look to form partnerships with nonprofits that are flexible and willing to give more agency to contractors
a. Contractors value forming partnerships with nonprofits that have a history of flexibility and a willingness to be flexible
b. Stakeholders want more agency over who they're impacting after giving aid
b. Stakeholders want more agency over who they're impacting after giving aid
Design goals 🎯
Reframing the problem into more specific design goals
How can we digitally connect Footbridge with government and insurance administrators to increase funding?
How can we present Footbridge as a credible organization to administrators?
How can we be transparent about Footbridge's actions and history?
How can we increase a sense of familiarity between Footbridge and administrators?
How can we present Footbridge in a way that is clear and easy to process to administrators?
How can we present Footbridge differently to different audiences?
How can we present Footbridge's model in a simple visualization?
CONtent design ✍️
Deciding what information to use and how to present it
Exploring many different ways to visualize Footbridge's model
My team sketched out a lot (8+) of different ways (we loosely called them infographics) to present how Footbridge works as a nonprofit and what value it adds to the world.
Two of my sketches exploring ways to show Footbridge's model and value
Speed dating with users to find the most effective presentation of information before increasing fidelity
We speed-dated our infographics with 7+ users to understand which presentation of information was most effective in helping users quickly understand how Footbridge works and its value. Since it was difficult to access government and insurance administrators for testing, I suggested test with users who didn't know what Footbridge was since our intention was to inform administrators who don't know what Footbridge is the way Footbridge works and its value. We measured how well each infographic worked by asking questions about Footbridge and asking participants to identify elements of the infographics that informed them.
Key findings
1. An infographic of the entire model of Footbridge in one screen is too much information for a viewer
2. Viewers found numbered steps to be clearest and understood it the fastest
2. Viewers found numbered steps to be clearest and understood it the fastest
What we did
We changed the homepage from an infographic to a scrollable, step-by-step breakdown of how Footbridge works instead
🤔
reflection 1/3
Recruiting for user testing: when you can't get the target users, think about what you're testing
Government and insurance administrators are a really busy group of target users—from prior projects, I've learned it's best to test with someone than no one. Here, I realized I could be more intentional about who I'm testing with by thinking about what exactly I'm testing or looking for. Since we were testing how administrators can quickly understand how Footbridge works, we could test with people who don't know how Footbridge works and measure effectiveness/
information architecture
Organizing information to be easily navigable
A look at how I organized what content goes on what page
prototyping + testing 🛠
Figuring out what does and doesn't work
Creating prototypes of varying fidelity based on what we wanted to test
Since we wanted to test how well information is organized and how easy it is to navigate, I suggested using low visual fidelity but higher content and interaction fidelity for our wireframes.
A quick excerpt of our interactive prototype
Usability testing to see if content is well-organized and the website is navigable
6
usability testing and think-aloud sessions
2
critiques with Footbridge staff and Carnegie Mellon University students
We used our findings from these sessions to iterate on the design. Some of the changes we made include:
Finding
Government administrators find the next steps for creating a contract unclear.
Government administrators find the next steps for creating a contract unclear.
Change
Showing a step-by-step process for contracts on the page for government administrators and clearly linked to it through 1. the "Get Involved" menu and 2. the homepage
Showing a step-by-step process for contracts on the page for government administrators and clearly linked to it through 1. the "Get Involved" menu and 2. the homepage
Finding
Users often click on pages to explore and want to go directly back but going back is difficult.
Users often click on pages to explore and want to go directly back but going back is difficult.
Change
Adding clear back buttons and breadcrumbs to show users how they got to where they are.
Adding clear back buttons and breadcrumbs to show users how they got to where they are.
🤔
reflection 2/3
Critique: ask for specific feedback about how the object of critique achieves specific objectives
A lot of our feedback from critique and the end of our usability testing sessions (when we asked open-ended questions inviting feedback and co-design) was oriented towards visual fidelity: adding more illustrations, making it less "boring," using a variety of colors, shapes and flowcharts. We planned to already do this with a higher visual fidelity prototype, so it wasn't as useful. Our goal with this prototype was to test usability and content organization, and that was sort of lost during critique. In the future, I think it'd be best to structure critique asking for feedback about how well the prototype meets certain goals rather than leaving it open-ended.
Final design 🔥
How it all came together
Here's a peek at the pages I took ownership in designing—connect with me to see the whole project!
Results
Validating our designs with users
Measuring success by comparing qualitative data from think-aloud sessions using our final design with sessions using Footbridge's old website
We conducted think-alouds with our final design (a high-fidelity prototype) with a few users in order to validate our work. By comparing qualitative data from these sessions with the think-aloud sessions we did with Footbridge's old website in our initial user research phase, we verified our success: users demonstrated a better understanding of Footbridge, drastically less confusion, and felt more comfortable and confident with giving Footbridge more funding.
Thinking about another group of users
We also conducted a think-aloud session with a new user: a foundational donor. We hadn't considered this type of user before, and their goals and motivations were different from administrators. The next steps would be to adapt our designs to work for foundational donors as well.
🤔
reflection 3/3
Testing with ALL users at ALL stages of the design process
Encountering a new type of user so late into the design process made me realize that it's important to consider different types of users more deeply earlier on in the process. Testing with all types of users at every stage ensures that you gain the most insight and don't have to backtrack and work extra hard to patch up holes later on.
reflection 🤔
Thinking retrospectively
I included my thoughts throughout the case study. Here's a reminder:
