Al.Butterbrodt Design Portfolio
WorkAboutContactResume
Accelerate Grant Funding for Academic Institutions
Mobile-First Application Platform
UX/UI Design
Figma
Project Management
Role
UX/UI Designer, Visual Designer, Project Manager + UX Researcher
Client
National Science Foundation
Tools
Introduction
The National Science Foundation (NSF) is a United States government agency that supports scientific research and education in non-medical science and engineering fields.The foundation supports these programs through awarded grants, that user’s must apply for, by submitting detailed grant proposals, which usually take around two months to complete.
Project Overview
Challenges + Constraints
The National Science Foundation is looking to establish user needs and create a mobile prototype that enables users to apply for research grants/funding that would expedite academic and research institutions to conduct research effectively. In addition, they received feedback that users find difficulties to interact with the NSF website due to the website not being visually appealing, which leads to accessibility concerns. Users should be able to apply for research grants for their research institutions without leaving the website and want sites to be better visually organized.
Mobile-First
Our first priority was to design a mobile experience that allows users to efficiently apply for research grants and funding, helping academic and research institutions accelerate their work.
Accessibility
It was essential to consider accessibility from two perspectives: meeting technical standards and ensuring users could easily move through the NSF website to search for and apply for grant funding.
Discover + Research
Comparative Analysis
Through our Comparative Analysis we researched other organizations that issue grants to scientific institutions, such as Grants.gov and GrantForward. We specifically looked at the tasks of researching, finding, and applying for grants of interest. The biggest takeaway from this research, was that all of these organizations had a login feature for users, where they can build and access a user profile before applying for a grant. This is something that the National Science Foundation (NSF) currently does not have. This does not allow users to track grant and funding applications.
User Interviews
What we aimed to understand
We hoped to gain an understanding of the needs, goals, and motivations that shape how individuals from non-medical science and engineering institutions seek funding and apply for research grants, as well as to assess their level of trust when uploading important documents through a mobile website.
Can you walk me through how you would find funding for a project you are working on?
Which types of documentation were you required to supply when applying for research grants, and how did you obtain and need to submit these?
What are your thoughts on searching and applying for funding through a mobile website?
Our Industry Professionals
User # 1
Age: 28
‍Location: Los Angeles, California
‍Occupation: Department Chair Special Education
‍Years in the field: 7 years
User # 2
Age: 52
‍Location: Boulder, Colorado
‍Occupation: Director of Grants + Partnerships
‍Years in the field: 22 years
User # 3
Age: 30
‍Location: Woods Hole, Massachusetts
‍Occupation: Coastal Groundwater Hydrologist -NSF EAR Postdoctoral Fellow
‍Years in the field: 8 years
User # 4
Age: 25
‍Location: San Diego, California
‍Occupation: 4th year PhD candidate in 
UC San Diego in BioEngineering. Applied for NSF, graduate level, GRF P
‍Years in the field: 8 years
User # 5
Age: 42
‍Location: New York City, New York
‍Occupation: Grant Writer for Department of Surgery
‍Years in the field: 15 years
Interview Findings
From our user interviews, we identified three core user behaviors and needs that guided our priorities for the mobile site redesign. Below are direct quotes from the participants we interviewed.
Understand Requirements
1
Give you an example of projects or programs that would be funded,  or see previous grants that have been funded.
2
I try to see if there are FAQs or if there are templates/webinars that need to be looked through before applying but it is just confusing and makes me feel exhausted
Process + Organization
1
You want to know ahead of time what you need, because that collection process can take the most time.
2
If the process was streamlined to where I could see checklists of what I need to be eligible or what I need to submit it would make my life easier.
Use of Mobile Interface
1
Applying on mobile will create boundaries on how you apply, you are excluding people based on their tech knowledge and not the quality of their program.
2
The amount of files and the extent of refinement that goes into this process, I can’t imagine doing it on a phone.
Mapping Out the Responses
Our user interviews revealed that users are unlikely to submit a full grant proposal on a mobile device due to the complexity of the process. They prefer completing applications on a desktop, where they can more easily review requirements and gather the necessary materials for submission.
Understand Requirements
I feel discouraged when applying sometimes because the requirements make it seem unattainable.
I need to understand grant eligibility requirements and relevant application information with ease.
Process + Organization
I have to keep track of several components before and after submission of an application.
I want a way to stay organized so I can make sure I have what is required.
Use of Mobile Interface
I need to feel confident and safe when I submit all of my hardwork and research on an online platform.
View Full Affinity Map
Define
Meet Grace
After synthesizing our data from the comparative analysis, and user interviews the team started to develop our persona. We focused on one persona as the audience of individuals that would be applying for funding or grants, especially from the National Science Foundation, would be rather small. We knew that we could focus all of the users concerns into one persona. While, our users backgrounds and time in the field are different they all shared many of the same frustrations and behaviors when applying for funding or a grant.
I love coming up with topics and ideas to study, but writing and submitting a proposal is extremely stressful.
Grace is driven by her curiosity. She always seeks to answer the "why" in every aspect of her life. She loves to read, study and learn new things. She has many people in her life that depend on her; family, colleagues and the scientific community and can feel an immense amount of stress and pressure.
Grace
The Organized Scientist
👩🏻‍🦰
Age | Gender
36 | Female
📚
Education
B.S. Biology + Geology
📍
Location
San Diego, CA
💼
Occupation
Postdoctoral Fellow
Goals
Receive grants to fund her projects.
Contribute to the scientific community through groundbreaking research.
Investigate the impact of climate change and sea-level rise on threatened coastal environments and communities.
Frustrations
There is not an easy way to search for grants  by keywords or filter by due dates.
She has to research, apply and manage all of her grant submissions on different websites.
Once submitted, months will go by without any notification on the status of her application.
The Problem
Users need a clear and efficient way to search for grant opportunities, but NSF’s website doesn't provide that. It lacks the tools needed to help users stay organized around deadlines, eligibility requirements, and document submissions, forcing them to navigate multiple sites. Additionally, users need to feel confident when submitting their work through an online platform.
Our Solution
Design a clean, visually appealing mobile and desktop website with intuitive navigation for searching and applying for grants. It should feature a seamless document upload process integrated into a user profile. The profile should store saved information and documents while providing clear upload confirmations and application status updates.
User + Task Flow
Current user flow to submit a proposal via the NSF website
Task flow to submit a proposal via desktop computer
Task flow to save a grant to a user profile via mobile/desktop
Hybrid Card Sort
We conducted a Hybrid Card Sort, where users can categorize items in specific categories or create their own category if they feel it does not fit in to any of the categories provided. 13 individuals participated. We provided 5 categories for users to sort the cards into; Research Areas, Education Levels, Profile, Find Funding and Funding Type. Each category had the predicted items sorted at the highest rates. These results help guide how we setup how users filter and search for grants and what features would be available in the user profile.
62%
of participants have applied for research grants or funding.
Research Areas
81%
of participants have applied for research grants or funding.
Education Levels
77%
of participants have applied for research grants or funding.
Profile
48%
of participants have applied for research grants or funding.
Find Funding
42%
of participants have applied for research grants or funding.
Funding Type
41%
of participants have applied for research grants or funding.
Prototype + Test
Sketches to Low-Fidelity
Through sketching we knew that we wanted to focus on making the process of searching for a grant or funding clear and efficient. We made the "Find Funding" page our top priority on the homepage, and the menu. Adding icons help add a visual aid for what area of research the user is searching for. We gave the most important details about the grant prominent hierarchy within the list, and simplified the filters. We also built in a user profile, where the user can login to see their saved grants, grants in progress and grant history. Users will also be able to save important documents needed to apply for grants to their profile.
Usability Testing
For the Usability Testing we also made sure that our users were individuals who have spent time submitting proposals and applying for grants or funding. We set the scenario for our users through the development of our persona. Our users are driven by their curiosity and are detail-oriented. They carry a deep level of passion in their work and goals are to contribute to the scientific community through groundbreaking research. They use the NSF website to search and apply for research grants regularly.
Tasks
Save a grant in Geosciences based on the Arctic to your profile and navigate to your profile to start the application process for that saved grant.
Objective
User will be able to search, save, and start the process of applying for a grant within the experience of one website within 4 minutes and with less than 2 errors.
Results + Insights
The results from our usability testing drove the functional changes that we made in our prototype. These changes helped the mobile site run smoothly and made finding important information effortless.
Unclear Navigation
Readability Concerns
Lack of Profile Access
4 out of 5
users noted the absence of “back navigation” throughout the site, creating roadblocks and interrupting browsing flow.
3 out of 5
users noted that there are key pieces of information that they are looking for when submitting a proposal.
3 out of 5
users wanted the ability to access or create their profile before going through the process of saving a grant.
Revisions After Initial Testing
1
Added access to Login or create an account more prominent.
2
Added the option to save a grant without needing to view the grant.
3
Implemented back navigation through out the site.
4
Made sure that important information is prominently placed.
Design
Style Guide
In the next iteration of our prototype we also added the National Science Foundation branding. We did make changes to the overall look and feel. We simplified the color palette, implemented only one typeface, used bold imagery and added the use of icons throughout the site.
Color
We simplified the color palette to reduce cognitive overload and increase consistency.
Primary
#2461ad
#d7b45f
Secondary
#32738b
#6ac0dc
#0b2451
Iconography
We designed icons to allow for improved information architecture and navigation, as well as delight.
Typography
A familiar, versatile typeface with multiple weights that support a clear and accessible visual hierarchy.
Montserrat Bold
Montserrat Regular
Montserrat Light
Solutions
Our final prototype represents the culmination of our UX design process. By integrating our refined UI, information architecture, and visual elements, we created a design tailored to our users’ needs and behaviors. Through iterative design and user feedback, we refined the interface to ensure it is intuitive and efficient.
Conclusion + Takeaways
The biggest takeaway from our research was that users would not apply for a grant or funding through a mobile platform because of how intensive the process is. Because of this we would add a module within the mobile user flow, to inform users that the application process must be completed on desktop. We would then continue to design the desktop platform in consistency with our mobile prototype, in which users would actually start grant proposal application process and be able to submit their applications within their profile on the National Science Foundation website.
WorkAboutContactResume