One of my interests is understanding motivation and building good habits. I recently read Drive by Daniel Pink, and Hooked by Nir Eyal, and learned that the key to building successful habits is when motivation transitions from being extrinsic (some benefit or reward from external sources) to intrinsic (when you want to do something because it personally benefits or pleases you in some way).
For kids, there’s no clear reward for eating healthy food - they don’t understand that better nutrition will make them stronger, and whole foods often don’t taste as good as sugar-filled alternatives. My goal with this project is to create an experience that will provide external rewards for eating healthy, for kids and parents, that will aim to permanently establish better eating habits.
Logistically speaking, schools don’t have massive budgets to provide well-balanced meals every day, and there are strict government regulations governing what schools can provide for lunch. These are potential obstacles that could be solved by a startup that has partnered with the schools and has the ability to deliver meals to schools on a daily basis.
Which phase of the lunch timeline to solve for?
As the main daytime meal during school hours, lunch is the meal that schools can have the biggest impact with regard to encouraging a healthier diet.
I started thinking about the timeline for lunch - from planning, choosing, eating and beyond - and where we could help the most. The planning phase has the most opportunity as that would lead to less waste, would require the least amount of responsibility from the kids and time from school administrators, and provide a regular shared activity for parents and kids.
While thinking this through I did a little research. I asked two friends with kids - one with older kids and one with a young child - what do you think is the biggest obstacle to getting kids to eat healthier foods? The friend with older kids said, “The biggest problem is around education. Not so many people know what foods are healthy. They buy “low fat” packaged foods instead of real foods.”
The friend with a younger child cited the need for education as well, and also lack of time as a big obstacle. He said, “People have fast food because it’s fast and solves an immediate problem. Parents don’t have time to create a healthy meal for their kids each day.”
The primary user of this app will be parents with children between the ages of six through twelve in elementary school. I’m focusing on this age because that’s when kids pick up their eating habits, and it’s where we can have the biggest opportunity to make a difference. The secondary user will be the children themselves, when they’re using the app with their parents.
I also spoke to a friend who’s a high school teacher to try and understand the challenge from their perspective. They were clear that while teachers have the best intentions, they don’t have the time or the desire to use a new service to give kids healthier meals. Teachers want to make sure their students are well-cared for, but they don’t have time to spend checking up on everything they’re eating. If the service could operate independently and not require any additional work on the part of the teachers or administrators, it would have more potential for success.
For these reasons, I decided to focus on a user flow focused on the parents’ perspective for the design solution. While the schools would be facilitating the service by allowing for the meal deliveries, this would require the least amount of work on the part of teachers and administrators.
Framing the problem and solution
Given the design challenge and early research, I had three clear problem spaces to solve for. First, I knew that I wanted to create a product or service that will lead to better habits through rewards. Second, I knew that it had to include some element of education to help parents consistently make better choices for their kids. Third, I needed to keep in mind that parents’ time is limited and creating something to simplify their lives would be a huge win.
I decided to explore a meal planning app that motivates kids to choose healthy foods and snacks over sugar-filled alternatives. Other alternatives I explored while brainstorming were creating a nutrition game and social network that parents could play with their kids, or an app that helps kids with growing their own food in school and at home.
The benefit of a meal planning app is that (for a nominal monthly fee) it can solve the parents’ challenges around education, having limited time and encouraging healthier eating. Each day, or every Sunday to prepare for the week, kids and parents can plan kids' lunches using the app and see the nutritional benefits of their choices together. Kids’ homeroom teachers would be saved in the app and as a reward every month, the classes with top nutritional scores could get an extra recess.
The startup provides a meal delivery service that’s sent straight to school lunchrooms with kids’ names on them, so there’s no work for parents beyond choosing the meals in the app. Also, this could lead to home delivery of certain foods in the future. The ultimate goal is getting kids to eat healthier and this service could have the possibility to facilitate better eating habits overall, not just during school.
For the solution, I wanted to go with a mobile app because parents and kids could do this anywhere, even while on the way to school. Also, I wanted to create a meaningful gesture that would represent their improving nutrition, and interactions that kids would enjoy. I called it “The Carrot and the Pretzel Stick” as a metaphor for positive and (not-so-) negative reinforcement.
I created views for the new app (top row above), which will contain four top level screens - Meal planning, Order History, Nutritional Score and Settings. Meal planning will be broken down into four steps: 1. Choose a protein, 2. Choose a vegetable, 3. Choose a snack and 4. Choose a drink. Once they’ve chosen all of the components of a meal, there’s a data visualization that provides the nutritional value for each component so parents and kids can see an explanation of the nutritional benefits of their choices.
Order history will provide a chronological list of the meals you’ve chosen on each weekday in the past, as well as the ability to favorite and filter by only favorites. Favoriting could allow the service to provide better recommendations in the future, and it would also allow parents to reorder their favorite meals without having to choose all of the components again.
The Score area will provide a breakdown of the meals you’ve chosen through the lens of nutritional value. It’ll provide data for the homeroom class as a whole, as well as the individual. As positive reinforcement, they’ll see an indication in the app if they’re leading other classes in nutritional score for the month (and could be getting a free recess). Settings will contain all profile data including homeroom teacher, school, delivery information, dietary restrictions and preferences.
I explored a few layout options for the meal planning area of the app (second row above). I wanted to create a feeling of play with an artboard at the top of the view that updates with each selection, and the food item options below. Kids could have fun putting the meal combinations together and the app would have friendly feedback and interactions to indicate selections and show progress. The gesture (shown in the third row above) of dragging the food item up to add a meal could trigger a fun success screen with either a carrot representing high nutrition or a pretzel stick representing lower nutrition, before advancing to the next screen.
Establishing design principles and constraints
Before creating a style guide I established design principles for how I want users to feel while they’re using the app. First, I want parents and kids to feel good about making healthy food choices. This could be accomplished with friendly and encouraging feedback in the app - messaging that provides positive reinforcement and delightful interactions to indicate progress.
Also, I want parents to feel a sense of stability and reliability while using the app and throughout the complete lunch timeline. This could be accomplished with consistency and reliability - a strong system of useful nutrition information, reliable data and regular lunch delivery notifications.
In the next phase of the design process, I organized all of my assets and created a structure for the app (detailed in the style guide above). I chose Avenir Next as the primary font because it’s highly legible at both large and small font sizes, it’s friendly enough for kids and sophisticated enough to convey a sense of professionalism for parents. I chose a color palette using lighter and darker shades of teal because it’s made up mostly of the color green, which represents the commitment to health and eating whole foods directly from nature. The brightness that’s created when the tiniest bit of blue is combined with green conveys a spirit of joy.
I established constraints as the following:
- Typography: Create a cohesive feel by limiting the typography to 3 type sizes (5 total styles)
- Color: Use color sparingly and for impact with limited color palette with one secondary plus a light tint and dark shade.
- Layout: Limit the page types to 3 with only slight variations. Create reusable components that can adjust to the needs of content.
- Screen readers: All icons and images would be tagged with descriptive content and alt text to allow screen readers to understand the content and navigation. Otherwise, I tried to place all priority content in an order on the screen to ensure the key information will be easily accessible when needed.
- Color legibility: I’m only using black (#000000) when text is placed on a background color to ensure legibility.
- Accessibility zooming: By using only three text sizes (24/16/12) I can maintain consistency and legibility when implemented as 1.5rem/1rem/.75rem, especially important for users who’ve increased text sizes on their device.
- Touch targets: All icons are 24dp with padding equal to 48dp, to allow plenty of room for parents and kids to successfully navigate the app by tapping.
The main workflow in the app is meal planning for the week ahead. Parents can select the day they’d like to plan a meal for with the date picker in the top navigation. One of my main considerations guiding design decisions for meal planning is to show complete nutrition information for each food item in the view. For accessibility reasons and to keep the app focused on education, I didn’t want users to have to click into another screen in order to learn about their food choices.
Another key aspect of the app is the nutrition score. This is calculated by the startup using an algorithm to combine various nutritional data for each food item. Once kids and parents have chosen all of the components of their meal, they’re given an overall meal score. This score average across all of the meals, kids and classes is what adds up to the overall class score, which is tracked in the app as well.
There were a few design explorations before I landed on the final design above. These included the drag and drop interface that I had conceptualized in early sketches, a vertical stepper and a more visible horizontal stepper. I also sketched out one option that would show all four components on the first screen, and parents could click into each one to make their choices.
I went with the above design despite the fact that it’s not clear how many steps there are, because after using the app once the repetitive workflow will be very easy to understand. With more time I’d explore educational onboarding to help first-time users get the most out of the app. Also, I think there’s a huge opportunity to use fun animations as the meal gets put together. The last screen could give more of a sense of success, and the shopping bag icon could animate to show that the meal is ready for checkout.
Navigation and top level views
For Android, the navigation drawer contains the child’s profile image, name and homeroom teacher. There are six navigation items: Meal Planning, Scores, History, Nutrition Index, Settings and Help. Also, there’s the ability to sign out via the navigation drawer.
It was important to design a layout that would allow for parents to have immediate access to nutrition information for each item. This mockup shows the full page of the meal planning area (the first screen of the top level views), including nutrition info provided by the startup that’s preparing the meals. The second area in the navigation is Scores, as I believe this will be fun for kids to check in periodically to see how their class is doing in the standings. There could also be the ability to drill down further into the class data and see a summary of their nutrition scores over time.
Because it could get repetitive to put together a meal for every day of the week using the app, I created an area where parents can go to reorder their kid’s favorite meals. The History area, the third item in the navigation, can be filtered by favorites and dates. Tapping into an order from here would reveal the last screen in the meal planning workflow with the meal score and graph.
The Nutrition Index was one area I hadn’t thought of during my early sketches, but it really pulls together and highlights the education aspect of the app for parents. Each food item and meal have CPS (The Carrot and the Pretzel Stick) Scores, and it’s in this area that parents will be able to learn more about how the scores are calculated and they can view nutrition details for all of their kids favorite foods.
My next step would be to create a first-time user experience so that parents can set up their kid’s account with school info, dietary restrictions and preferences. I’d also include an educational onboarding screen that appears on your first visit that would provide a clear picture of the journey ahead. It could say something like, “Put your meal together for lunch! There are four steps: Protein, Vegetable, Snack and Drink.”
As a first-time user, regardless of the onboarding I may feel lost on the first screen of the meal planning area, which is also technically the “Home” screen. I pushed myself to come up with a few alternatives that allowed for the four steps to be visible on the first screen but nothing worked quite as well as the progressive disclosure solution I went with. Another solution could be to use “1 of 4” in the stepper, instead of just the number of what step you’re on. To answer any potential questions or confusion from parents, I included a Help center in the navigation drawer. Additional onboarding could be explored if users continue to be confused with this screen, however once you’ve gone through the flow of putting a meal together you wouldn’t need this information again.
Improvements could also be made on the meal score screen (after the components are chosen and the meal is added to the shopping bag). There’s a button when you scroll to the bottom of the screen (not visible in the current mockup) that says, “Nice work! Now choose your meal for tomorrow”. This advances the user to the next weekday on the calendar. In the current design, the user needs to either scroll down to the bottom to see this button, or choose the next day from the date picker, so it’s not easy to immediately understand what to do next.
For the first-time user, when they download the app they could be presented with a food quiz that collects their needs, likes and dislikes. This information would be saved in settings and would drive the recommendations from the app. This would benefit them immensely by providing more relevant food suggestions. Along those same lines, the app could be clearer about why it’s recommending these particular foods. The nutrition score is a start, but the messaging and content could emphasize that this service wants to provide the best possible recommendations to encourage your child on the road to a lifetime of healthy eating.