CARAT FORMS
The Community & Agricultural Resilience Audit Tool (CARAT)
North American Food Systems Network
Helping community stakeholders self-assess how they currently utilize the assets of their local food system to achieve a substantial level of community resilience.
Role
Fullstack Developer
Fullstack Developer
Team
Myself :)
Myself :)
Tools
Figma
Bubble.io
Python
Figma
Bubble.io
Python
Timeline
Jun 2023 - Present
Jun 2023 - Present
CONTEXT
Turning a Concept into a Reality
What is CARAT?
In the summer of 2023, I was hired by the North American Food Systems Network (NAFSN) to help them create The Community & Agricultural Resilience Audit Tool - CARAT - a web program that helps communities evaluate the resiliency of their food systems.
I worked on the design and development process for the entire program, turning CARAT from a concept to reality. Thanks to the assistance of the agricultural scholars and leaders who created the content of the assessment, I was able to focus much more on interactions and user experience.
I worked on the design and development process for the entire program, turning CARAT from a concept to reality. Thanks to the assistance of the agricultural scholars and leaders who created the content of the assessment, I was able to focus much more on interactions and user experience.
Sample screenshot of my rubric design
PROBLEM
CARAT is an incredibly long assessment, and its users are mostly agricultural communities who are less tech-savvy.
The CARAT tool is a very comprehensive assessment that has over 101 indicators that are spread across seven central themes. Below are some solution spaces that tackles our people problem.
Sectionalization
Divide the lengthy assessment into smaller digestible for better and more pleasant experience.
Familiar Patterns
Keeping the interactions simple and familiar to users of all ranges.
Cut the extras, keep the essentials
Having a simple content structure & making CARAT easily accessible throughout the site to ensure a more efficient experience.
Accessibility in Mind
Designing accessible sub-features was key to make sure everyone gets the most out of the web program.
Live Web Screenshots
Dashboard overview
Rubric
No permission to edit
Assessment overview
Guide page
Profile edit
Bookmark
Authentication
Archived Edits
One Question Form or Multiple Question Forms
One question per page forms are often less overwhelming and incredibly digestible due to always having one question displayed. This layout would allow the user to focus better and lower errors.
Forms that display multiple questions on the same page are more useful when the user can answer the questions in any order they like. In addition, these forms enable the users to go back and forth between questions.
Ultimately, I prioritized displaying multiple questions per page for its benefits. To prevent possibly overwhelming my users, I divided each themes into separate smaller sections. This is a best-in-both-world choice where we reap the benefit of focus as well as the flexibility of multi-question pages. Now, instead of displaying 10-20 questions per theme, sectionalizing them will display only 4-5 related questions at once.
Forms that display multiple questions on the same page are more useful when the user can answer the questions in any order they like. In addition, these forms enable the users to go back and forth between questions.
Ultimately, I prioritized displaying multiple questions per page for its benefits. To prevent possibly overwhelming my users, I divided each themes into separate smaller sections. This is a best-in-both-world choice where we reap the benefit of focus as well as the flexibility of multi-question pages. Now, instead of displaying 10-20 questions per theme, sectionalizing them will display only 4-5 related questions at once.
Safer Input Fields
While the users are filling out the assessment, they have the ability to input their notes and comments to any of the questions for their future reference. I chose to design the comment box with a saving indicator to add an extra level of clarity and reassurance.
Implicit or Explicit Submission Warning
To make it clear that users cannot proceed to the next section unless they completed all the questions in the current section, I added a warning message to make this transition more explicit.
Filled Secondary Button Or Unfilled
Although secondary buttons are usually unfilled, I struggled between the design choice because of my targeted user. Although unconventional, using filled buttons in this case will constantly remind users that they are in a safe space where they are able to save and quit whenever they want & get the help they need whenever they need. Similarly, having an unhighlighted button is very similar to the “Incomplete state” of the continue button, which might be confusing.
Ultimately, I prioritized to not use filled button and used ghost buttons instead. The ghost buttons are less striking to the eye, allowing the user to focus elsewhere where it really matters. Additionally, the user might possibly be confused due to the multiple call-to-action color. Since CARAT is designed with a side bar attached, the these two buttons will always be in the bottom left corner, providing the needed stability and safety.
Ultimately, I prioritized to not use filled button and used ghost buttons instead. The ghost buttons are less striking to the eye, allowing the user to focus elsewhere where it really matters. Additionally, the user might possibly be confused due to the multiple call-to-action color. Since CARAT is designed with a side bar attached, the these two buttons will always be in the bottom left corner, providing the needed stability and safety.
ACCESSIBILITY
Implicit Or Explicit Progress Bar
To ensure that CARAT can be used by people with vision disabilities, I went with an explicit "checkmark" icon to indicate that a section is completed in the progress bar.
Line Width
The golden rule for character count for readability on web is somewhere between 50 and 75 characters. To accommodate to those who are in the older age range, every single question in the assessment is designed with readability in mind.
DESIGN SYSTEMS
Spacing Tokens
To ensure consistency is maintained throughout the entire CARAT program, I worked with an 8pt spacing guideline.
8px between immediate elements such as buttons and related texts.
16px between related elements within a parent element such as progress bar & question items.
32px between larger sections,
60px for margins.
120px between questions to give more breathing room for users when answering.
x px represents scalable spacing that adapts based on screen size to ensure adaptive design.
16px between related elements within a parent element such as progress bar & question items.
32px between larger sections,
60px for margins.
120px between questions to give more breathing room for users when answering.
x px represents scalable spacing that adapts based on screen size to ensure adaptive design.
FINAL PRODUCT
Walking through each individual questions within a section.
NEXT STEPS
User Testing
Currently, CARAT is a tool designed from experience and not testing. To ensure that I am providing the best experience to users, NAFSN still requires a lot of iterative changes through testing feedback.
Implementation
I am currently working on the development of the site. Check back later to experience the site :)