SNAP-Ed Program
SNAP Education
Real Life, Good Food is part of the Supplemental Nutrition Assistance Program Education (SNAP-Ed) for the state of Minnesota.
SNAP-Ed is the educational component of the United States Department of Agriculture’s Supplemental Nutrition Assistance Program (SNAP), a program that offers nutrition assistance to eligible, low-income individuals and families.
SNAP-Ed decided to advance their mission by creating a website (reallifegoodfood.umn.edu) to promote nutrition and good health to SNAP recipients. The website features healthy and low-cost recipes, as well as tips for healthier living, all while building towards an online community of sharing.
Managed by the University of Minnesota Extension department, SNAP-Ed teaches low-income families and individuals about good nutrition and ways to make their food budgets go farther. SNAP-Ed participants also learn ways to be physically active.
SNAP-Ed needed a vendor with the experience and expertise needed to build a powerful, yet easy-to-use member site. Electric Citizen ("EC") had both a proven track record of expertise with site building and design, and a company mission to serve the public sector that matched mission driven organizations like SNAP-Ed.
Because SNAP-Ed is run by the University of Minnesota Extension, they were also naturally drawn to a partner with higher ed experience, and one who could work with the University’s Drupal platform–two of Electric Citizen’s specialties.
Each project begins with planning and discovery. We worked with the SNAP-Ed team to define project goals, risks, audience, and outcomes. The client shared the results of a series of focus group interviews and surveys, which helped guide the conversation on what this website needed to be.
Several important themes emerged from those findings. The target audience did not want to engage in a traditional online course, they wanted self directed learning. They relied on health advice from trusted persons, therefore our learning platform needs to have a personal voice. Content should be simple, straightforward, and reflective of the lives of the target audience. These findings underscored both the site content and our approach to design.
The primary audience is SNAP participants in the state, including both urban and rural residents, families of young children, teens and young adults. SNAP-Ed wanted the website to function as an alternative to in-person classes, delivering health and nutrition information to a wider audience than they could through in-person meetings.
Challenges and Risk
To measure the success of the website, analytics would be needed to be employed to track site use, and a membership registration to collect user demographics. Challenges and risks included language and cultural barriers to the site content, getting the word out to SNAP-recipients about the website, and creating a site that would encourage lengthy exploration and discovery. For the project to ultimately be successful, an online community would have to form around the website.
Another challenge to the site’s success centered around members-only content. The client required users to login or create an account to access site content. Strategically, we recommended that users get a sample of what the website had to offer first, and then incentivize them to register. We also advocated for a simple registration form, with minimal fields, to make it as easy as possible to capture new users.
The solution was to prompt users to register, but only after a set amount of time browsing. The plan was to give users a sample of what the site had to offer before making the ‘ask.’ For registration, we settled on a sign up form with minimal information required, but one that would ask for additional data at a later date. Our goal was to reduce barriers to entry, so more users would give the site a try.
The site would never succeed without good content, and that also requires planning. Our team worked on site navigation, with a focus on ease of use. The resulting menu is both minimal and easy to understand, focused on three key concepts - eat, cook, and move. We also worked on improving engagement through related content. While a user is viewing content for one particular topic, (e.g. grocery shopping), they will see related content to view next (e.g. meal planning).
Each page leads with a strong and simple headline, and clear, succinct messaging. We studied and discussed other nutrition education websites as part of a competitive analysis, learning what worked and what did not on comparable projects. We also studied a number of cooking and recipe-focused websites for ideas around how to present and categorize healthy recipes for this new website.
With our technical and content strategies in place, we moved into planning the user experience and user interface design. We knew that site visitors needed an easy-to-use and understand site experience, with a trustworthy and friendly look and feel.
As a new site, “Real Life, Good Food” and SNAP-Ed, did not have a brand identity. Because the organization is run by staffers with the University of Minnesota Extension, some university-related branding was required. Specifically this meant each page needed to carry a university-branded header and footer.
But beyond this, the site was open for discovery. Rather than emphasize the University’s primary maroon and gold colors, we chose to explore the secondary color palette, along with a clean, white background. Friendly shades of orange, sky blue and green accent the headers of each page, along with subtle illustrative patterns to give the site some sense of warmth and fun. The client sourced a variety of food and exercise-related images which are featured in banners across the top of key landing pages.
Recipes are presented with large, engaging photos, and generous use of whitespace to make scanning each page fast and easy. All pages are responsive and mobile-ready, and meet the accessibility standards of WCAG 2.0.
The primary content of the website is a growing collection of recipes. From snacks and side dishes to main dishes and soups, the site offers a variety of healthy selections, targeted towards helping SNAP recipients with meal preparation.
We created a content type of recipe, with a series of fields for managing a category taxonomy, photos and videos, ingredients, directions, tips, and other details. Recipes can be associated with other other recipes, through related content and a “you may also like” field. This will then automatically display a summary of related recipes when viewing one particular recipe.
Members of the site have the ability to comment on recipes, as well as rate them on a 1-5 scale. These are managed via Drupal’s core Comments module and the Vote API. Site managers can moderate comments and determine whether to publish or delete if inappropriate. The Antibot module is also enabled to help prevent spam comments, especially from bots.
Users have the ability to share recipes via social media links or print, with a click of a button. Recipes can be discovered by beginning with a visual grid of categories (beverages, breads, breakfast, etc.), and stepping through to lists of content under each category. User can alternatively start by viewing the entire catalog, and then filtering the results by category, keyword, or dietary restrictions. This is all powered by Drupal’s Views, along with the SearchAPI for filtering results.
Site editors also have the ability to flag particular recipes as “Featured”, which then generates a callout block displayed on key landing pages of the site.
The project was funded by the federal government, and as part of the funding agreement SNAP-Ed and similar organizations are required to share detailed analytics that demonstrate the effectiveness of their program, and also to provide SNAP users with time-based learning and education “credits” that are required as part of the program.
The requirements included:
- Track total engaged time on site spent on educational activity
- Create a flag once a user has spent at least 20 minutes actively using the site
- Track the total time spent on site per category (e.g. Recipes, Exercise, Nutrition)
- Provide the ability to track all activity by unique User ID or email
- Create custom reporting tools with exports to a .csv file
Our team opted to use Google Analytics to collect the raw data, and to create a small suite of custom modules and entity types in Drupal 8 to fulfill the rest of the requirements. Here is a short overview of how the system works:
Google Analytics and Google API
Google Analytics is installed with a number of custom dimensions that allow us to track overall site usage across different categories (e.g. Recipes, Nutrition, Exercise). As described below, the Google API module allows us to access all of this data via API and consume it with Drupal. We did not create any reports or dashboard directly via the Google Analytics UI–all of the reporting and data aggregation is done directly within Drupal.
Riveted.js
One critical flaw in standard Google Analytics is that it cannot provide accurate “real time spent on site” data. When a user visits a page, Google will count each minute as “time spent” on the site, even if that user opens a new tab, or has no screen activity for an extended period.
The Riveted.js library solves this problem by tracking actual user activity on a page, such as mouse movement, scrolling, or even watching a video. When no activity is detected, Riveted will stop sending time data. This provides the ability to more accurately measure “time spent on site”, and fulfills one of the key federal government reporting requirements. We were able to integrate this library with the website via a custom Drupal module.
Custom Data API Module
We created a custom entity type used to store analytics data directly within Drupal, along with a custom module using the Google API. Once per hour, we query Google Analytics to pull in any new user activity. This arrives as raw, uncalculated data and is stored and maintained over the long term to create the required reports. The data includes our custom dimensions, one record for each “time on site” event recorded, and a unique, anonymous Google User ID.
Custom User Module
One of the key reporting requirements is the ability to provide a yearly report that shows site activity across categories that is mapped to a real user identifiable by their email address. While Google allows you to track activity by an anonymous User ID, it is against their Terms of Service to track or provide any unique or personally identifiable user data such as an email address, or even a human-generated Drupal username.
In order to meet this requirement while not violating Google’s terms of service, we developed a custom module that creates an anonymous, hashed user ID at the time of Drupal account creation, which is then passed as a token to Google via the Google Analytics module.
When we pull in our data using the Google API, we are now able to map each record to an actual Drupal user using this anonymous ID while keeping the data in Google Analytics safe and anonymous.
Custom Reporting and Settings
With all of our raw data in place, we were then able to provide another custom module that integrates with the Drupal Views module, and the Views Data Export module. With this module, we collect and aggregate all of the analytics data by user and present it in a standard Drupal view that can be sorted, filtered, and exported to CSV files for preparation of SNAP-Ed’s required annual report. The module also provides a small number of settings that allows the SNAP-Ed team to reset the fiscal year, and to clear out old data on demand.