dart foundation refresh


Dart Foundation


Redesign the Dart Foundation website to match the new style for their Annual Report and make it easier for people to get the correct information regarding the grant process.


Web Design, UX


Please note, this process and reflection are the ideal outcomes for the design changes since this refresh has not been implemented.

I had not heard about Dart Foundation before this project, so I had the advantage of coming into this with a fresh perspective. After meeting with the Dart Foundation team members I got the main goal—to receive fewer calls and emails from potential grantees. The staff was spending a lot of time answering questions to emails and calls that are answered on the website. To make things easier for staff and potential recipients I changed to the way people digested the grant requirements.

I was also asked to incorporate the style used on the printed Annual Report. The colors stayed the same, but there are other illustrations and elements that the team wanted to use. They thought the friendliness of the illustrations added to the messaging. There are a lot of elements in the report that look well on the printed version, but they didn’t translate well to the website. Instead, I used pieces of specific illustrations to enhance the design.

I asked the foundation staff members about their average grant requestor, and I learned most are administrators and local non-profit staff. I was told they aren’t always tech-savvy, and they don’t have a lot of time to sift through screens of dense text. Makes sense, I don’t usually enjoy dense text unless it’s an academic article or a great book! This insight led to the biggest design change on the Grants page.

Dart Foundation provides funding for STEM-related projects in very specific cities. To make those requirements as clear as possible I broke up the Grants page to act as a quiz. It has simple screen transitions and simple “yes” and “no” questions. This provides better progressive disclosure and the person hopefully feels more knowledgeable about why they are or aren’t a good fit for the grant.

The FAQ page got the next strategic design change, since the foundation members kept mentioning the plethora of questions. After reviewing the initial page, I made the hierarchy bolder and made the questions more obvious. That way someone scanning the page could find their question, and the respective answer, easier.


Now that I write this awhile after this initial comp process, there are several changes I would like to make. One is to add the FAQs to the contact page. I feel having them on a single web page would make people at least skim through the questions before reaching out. Another change would be to dig deeper into the process for the applicants. Between this and now, I’ve learned more about UX strategies that I think could help.

like what you see? want to work together?

shoot me an email — erin@erinknapp.com