The Child Nutrition Outreach Program (CNOP) works with school districts and Massachusetts communities to ensure that children have access to nutritious meals, both in school and during the summer months. CNOP is administered by Project Bread, which is committed to preventing and ending hunger in Massachusetts. The programs that CNOP focuses on are the National School Breakfast Program and the Summer Food Service Program.
CNOP started working with Redfin Solutions in 2011, back when their website www.meals4kids.org was still on Drupal 6. They needed us to update the site to Drupal 8, and they wanted to use the opportunity to redesign their website.
Redfin’s first steps are to discover the goals for the website and how the new website needed to fulfill the client’s overall objectives. Due to time and budget constraints, we shortened this discovery phase by creating a questionnaire for our CNOP partners. We learned that their goals for the project were to restructure the website for clarity, ensure accessibility, and redesign it to look related to the parent site www.projectbread.org.
Redfin focused the redesign on user experiences, accessibility, and responsiveness. With these specific audience goals in mind, we audited the old site for unused components and features. Redfin cleaned up the existing content types and restructured the information architecture to clarify and streamline the user journey. We restructured the overly complex and confusing menu into a clean main navigation and a system of contextual links. The restructured website now directs users towards CNOP’s website goals to help them achieve their larger objectives.
Redfin focused the redesign on user experiences, accessibility, and responsiveness. With these specific audience goals in mind, we audited the old site for unused components and features. Redfin cleaned up the existing content types and restructured the information architecture to clarify and streamline the user journey. We restructured the overly complex and confusing menu into a clean main navigation and a system of contextual links. The restructured website now directs users towards CNOP’s website goals to help them achieve their larger objectives.
Since CNOP is a child of Project Bread and the Massachusetts Department of Elementary and Secondary Education, the website styles, such as color and font, needed to match the brand elements of the Project Bread site. We created a mood board based off these elements and other websites that inspired CNOP. Redfin then helped CNOP choose a new logo, branding colors, typography, buttons, and component styles. Now, the colors and typography are accessible, they mirror Project Bread, and they reflect the spirit of CNOP.
Redfin used the Drupal paragraphs module to create consistency and flexibility throughout CNOP’s content. The module replaces the free-for-all WYSIWYG editor with reusable blocks, which are placeable on any page and supply the content editor with specific fields to fill out. This way, CNOP content editors can create content and customize each page on the new website. We designed a basic pattern library for the paragraphs so that each one will fit within CNOP’s new branding standards. To style the site, Redfin used Sass and CSS grid, while ensuring the site would be accessible for all users.
Since Redfin is dedicated to the long-term success of our clients, we provide training, hosting, analytics, and site strategy after the new projects are launched. Once the Drupal 8 website was finished, we helped CNOP content editors learn to use the new paragraphs system. Redfin continues to host the website and provide ongoing support, training, and strategy.
More recently, Redfin created iOS and Android mobile apps for CNOP called SummerEats, which provides students with a map of locations where they can find meals through the Summer Food Service Program. Children all over Massachusetts can now find the nearest nutritious meal throughout the summer.