Live project
CLIENT: STATE OF NEW YORK
OVERVIEW
This is an ongoing work with an agricultural NGO based in the Northeast area. This project involves designing an efficient grant management platform to help farmers gain access to more resources.
We are working toward the launching of the MVP, making iterations and updates throughout the project. I will be updating the case study based on any recent changes made.
Duration
May - Aug 2024
Role
Product Designer
Team
3 Product Designers,
Graphic Designer,
Product Manager
ABOUT THE CLIENT
Our client, NEFOC (Farmers of Colors Land Trust), is a non-profit agricultural organization. It is a farmer’s alliance of more than 600 Black, Latino, Indigenous, and Asian farmers. Their mission is to promote regenerative farming and support cultural preservation.
To enhance their mission, I collaborated with other product designers to design and develop a digital platform for the farmers.
NEFOC members working together to bring land restoration
Northeast floods sweep away months of farmers' labor & crops
Northeast farmers grapple with worst drought
PROBLEM
With a goal to restore agricultural system in the Northeast, the client (NEFOC) asked for fundings from the government. The State of New York decided to raise financial aid for the client. However, there is no easy access for NEFOC farmers to apply for these grants. The farmers have not applied for this kind of grants using a digital platform before.
SOLUTION
In order to help NEFOC farmers get the financial support they need, we created a digital platform. The platform will allow them to easily navigate through the complicated application process and manage their applications for various grant programs.
MY RESPONSIBILITIES
Designed the core screens for grant dashboard and workspace. (more than 10+ screens)
Took charge of streamlining the UI elements/components for the final mock up screens, including making the UI Spec Sheet, ensuring consistency and quality in the design system before stakeholder presentation.
Led internal meetings with 2 other designers, receiving and providing feedback and making ongoing iterations.
IMPACT
The grant platform is estimated to save the client $12,000 in their initial budget for this project.
This will be the first implementation of a digital dashboard for potentially more than 500 users.
CURRENT PROTOTYPE OF THE DASHBOARD (EVOLVING)
RESEARCH
Project kick off with stakeholder meeting
We started off the project with a meeting with the stakeholders. During the meeting, we discussed the product concept and the basic requirements for the grant platform. However, due to some sensitive information, the client couldn't provide a lot of research data. There was a lot of open space when it came to design and the structure of the platform. Previously, similar processes were done manually, and this was the first digital platform they were developing.
THE USERS
But first, let's identify the different user types
Based on the initial discussions, I narrowed down to 4 types of users who will be using the grant management platform.
Applicants
Farmers who are applying for the grants. Has full access to fill out, invite others, and submit applications.
Representative
Second user which the farmer can involve to fill out certain parts of the applications.
Contributor
Can make changes to the application such as attaching a form.
Committee member
Decision makers who are reviewing the grant applications.
EARLY EXPLORATIONS
Exploring different versions of dashboards
Given that we had only the basic requirements and the overall workflow, I decided to jump straight into research. It was important that we explore various dashboard and workspace interfaces as early as possible, before entering the design phase. The point of exploration was to get ideas early on, so we can start designing as early as possible. We explored the designs of the main pages, navigation bars, and various components necessary in similar platforms.
TECHNICAL CONSTRAINTS
Keeping the constraints in mind
Platform decision - at the early stage, the stakeholders were still exploring different platform options. We continued designing in Figma and focused on creating wireframes with a clear structure, and decided to stay open and flexible to any changes in UI design.
Design style - the client expressed that they want to put higher priority in functionality and accessibility of the website, and keep the design simple and minimal. Keeping this in mind, we used variants of the primary color "blue." We explored various dashboard designs to draw inspirations and proceeded with simplicity in mind.
Minimize maintenance - the client doesn't have a lot of internal technical staff to upkeep the website. We were mindful of this as we were designing.
INFORMATION ARCHITECTURE
Developing a site map
I developed the first draft of site map with the minimal information that was given, and updated the site map as I progressed in the project. Here are some changes made along the way:
Initially, Opportunities and Dashboard were separated. I decided to keep "All Opportunities" under "Dashboard" to streamline the workflow.
I added "Grantee Portal" section. This is where the applicants can go when their submissions are approved and process the payment. It made sense to separate this as a section in itself, since it was a completely different phase of the application.
DESIGN PHASE
Diving straight into Mid-fidelity wireframes
Our approach was to start creating mid-fidelity wireframes right away due to a strict deadline we were working with. We worked under 1-week timeframe to finish the early mock ups. I set up daily internal meetings between designers to communicate effectively, facilitate design feedback, and ensure consistent UI designs.
In week 2-3, we made iterations based on the feedback from the stakeholders in our meetings. The iterations and improvements are as shown below.
Key challenges
At this stage, the client didn't give us a lot of data to work with. Given the limited amount of data to input, we made our best educated guesses to fill in the gaps of information we were lacking as we designed specific core screens.
KEY ITERATIONS
Iterate, iterate, iterate
We finished the first iteration of mid-fidelity within timeframe. After presenting the first version to the stakeholders, we gathered more feedback and data to further iterate on the design. By this point, we had more clarity on the structure and necessary data/fields to include. For the second and third week, we spent time making key iterations, as captured below.
DASHBOARD - LANDING PAGE
GRANT INFORMATION
MY APPLICATIONS
APPLICATION FORM
TEAMWORK
Collaborating & communicating with others across different time zones
Throughout the design phase, we split up the screens to collaborate more efficiently. During the first few weeks, I initiated daily internal meetings between the designers to align on key design decisions and iterations needed. Due to all of us being in different time zones, we also communicated heavily via Figma comments. Every time I made iterations on a screen, I left a comment to document the progress and let others know what changed.
Taking lead on UI design
During the design phase, I took initiatives on UI consistencies by creating components and UI Spec Sheet. It was important to keep an updated spec sheet since the design was constantly being iterated, and we needed to make sure the components were also updated accordingly. I proactively reviewed the UI elements and spacing to ensure the updates were consistent.
SPEC SHEET
COMPONENTS
Heading into development…
We are currently in the stage of deciding on the implementation platform. This section will be updated soon.
