Mike Franke
Senior UX Designer

Helping feed the community

SchoolFood is a cross-platform program that helps provide food assistance to children K-12.

Image alt tag

Welcome to schoolfood

SchoolFood is a service to connect families that are struggling to feed their children. One of the many lessons I learned during the pandemic was how many families rely on public schools to help feed their kids. SchoolFood takes the stigma out of the process by making a simple and discreet way to find support for your children. At SchoolFood, we want to ensure every child is fed, whether during the school day or the weekend, we have you covered.

The problem

It is difficult for families to find food assistance for their children.

The goal

Provide an easy and discreet way for families to sign up for food assistance through their children's school.

Passion Project - Helping feed the community

Target Users

Our target users are parents who are in need of food assistance for their children. Many of our users are at or below the federal poverty line. 

Passion Project - Helping feed the community

Research Conducted, Our Findings, and Persona Development

I interviewed my wife who is a Public Defender to inform our Persona. My wife helps many clients who are at or below the federal poverty line.

My user persona, Sharon, is a 28-year old working single mother with two children. She has had trouble making ends meet and feeding her family consistently.

Sharon is trying to get financial assistance to help her family and improve their lives. She would like to find an easier way to make sure he children are fed during school (morning and lunch), as well as over the weekend.

Crazy Eight sketches

Crazy Eight sketches

Ideation

I utilized a Crazy Eights exercise, sketching ideas quickly.


My first round of wireframes, before testing

My first round of wireframes, before testing

Wireframe Development

I took my sketches and wireframed digitally. This gave me a great place to build a low fidelity prototype for testing. 

Note taking during Usability Testing which led to insight generation

Note taking during Usability Testing which led to insight generation

Usability Test Details

My goal was to find out if the service and form are easy-to-use and understand. I conducted a moderated Usability study in the US. I recruited 5 remote users and each test lasted 15- 30 minutes and included an intro, scripted test, and follow-up questions.

Affinity mapping from our testing notes

Affinity mapping from our testing notes

Usability Testing Results

I learned that there were some pain points for users. The biggest issues were:

  1. Users not having enough information about the assistance available.
    I solved this issue by adding more content around the types of help available. I also added a new section for “How it Works” to reduce the friction for users.

  2. Confusion around editing the “review and submit” portion of the form.
    I added an easier way for users to edit their info.

High fidelity mockup of our website

High fidelity mockup of our website

High Fidelity Mockups

Now the design really begins to take shape: actual text is used, colors are applied, and images are added.

Additional High Fidelity Mockups

Additional High Fidelity Mockups

High fidelity prototype created in Adobe XD

High Fidelity Prototype

The design is fully developed and gives a complete picture of the completed design. It addresses the user’s needs for a simple, yet engaging and uncluttered design.

Feel free to "try out" the prototype.

High contrast copy and buttons to help with accessibility

High contrast copy and buttons to help with accessibility

Accessibility

In order to provide a fully accessible experience the site will utilize alt tags for all images, simple hierarchy, and WCAG 2 compliant contrast on buttons.

Challenges

  • Better understanding an under-served demographic

  • Providing simple explanations

  • Removing my own biases and focusing on the user and addressing their needs