Case Study: Children's Lunch Money Solution that parents can get in on.

Parents today have little time to prepare meals for kids before school and with school lunches now reflecting restaurant quality, injecting technology just makes sense. Enter Lunch $ Buddy!

 

Designed to solve for multiple aspects of lifestyle improvements, this application allows parents to capture mornings with children vs rushing to prepare foods. 

The Personas and User Goals

 

User Goals:

 User Quote: Samantha

“We want to keep our children healthy and happy.”

SAMANTHA, 37
 

  • Quick access to lunch calendar and menu
     

  • Convenient access to filling or refilling lunch account
     

  • Access account through mobile while on the go
     

  • A way to help track kid’s favorite school meals
     

  • Alerts to warn of low balance, or a way to set up auto replenish

 User Quote: Henry

“I do my best to give my grandson a strong foundation”

HENRY, 70
 

  • Easy, clear and straightforward navigation
     

  • Easy to learn
     

  • Ability to check or add funds in one simple step, without additional sites or apps
     

  • Simple to set up and use

Subsidized lunches in the US today

The National School Lunch Program is a federally assisted meal program operating in over 100,000 public and non‐profit private schools and residential child care institutions. It provided nutritionally balanced, low‐cost or free lunches to more than 31 million children each school day in 2012. In 1998, Congress expanded the National School Lunch Program to include reimbursement for snacks served to children in after school educational and enrichment programs to include children through 18 years of age.   

Link: NATIONAL SCHOOL LUNCH PROGRAM (PDF)

The Problem
 

Parents today struggle to find time to make lunch and prepare meals for the children. Additionally the cost of meals is increasing and government programs have been put in place to assist the low income with compensating for subs to dies food options for families.

The Challenge
 

A challenge has been made to craft a mobile app with multiple allowances. They are as follows:

  • Add one or more payment methods.

  • Add funds.

  • Select a primary payment method.

  • Change a payment method.

  • Delete a payment method.

  • Select whether they’d like balance auto-replenishment or not.

  • Turn auto-replenishment on/off.

Other considerations:

View account balance

The parent can view their account balance.

 

View school lunch menu by child

The parent can view the upcoming menu of school lunches for any school at which they have children attending.

 

View subsidy status

If they participate in a school lunch subsidy program, the parent can view the status of their school lunch subsidy program account.

 

Favorite a lunch

The parent can “favorite” an upcoming lunch for their child or children. The evening before the favorite lunch will be served, the parent will be alerted. (As the designer, you will need to decide how this works - e.g., an app badge, alert, banner, text, email, etc.)

 

Close account

The parent can close their Lunch Money Buddy account, which will delete all payment types and auto-replenishment orders.

Initial Ideation Process and User Journeys

 

The Context - Journey 1

Samantha is busy making breakfast for her kids on Tuesday morning. She has forgotten to download, register, and fund the lunch money buddy application.

Emotion

Samantha is feeling stressed because she already knows she's on organized and is late ready for school. Samantha guesses even though she's forgotten to download the application and put money into it for her child, that probably other mom’s mothers have failed to do the same task.

 

Device

Samantha is currently using a Samsung galaxy four. Additionally, her husband uses an iPhone for work. Uses the Samsung because it was on sale and they needed to save money, at the time of purchase, for other things like school clothing for kids.

The Context - Journey 2

Samantha is in a wait line in her car waiting for school to end and pickup Hailee and Brenden. While she waits she opens the Lunch$Buddy App and to look through several features while she has time to until the bell rings. 

Emotion

Samantha is feeling more relaxed now because she has about 30 minutes to kill while waiting. Sometimes she window-shops on amazon for deals and looks at the news sites while waiting. Samantha’s phone is on the dashboard of her car in compliance with new state regulations and as a habit she uses her finger the navigate the app in that fashion. 

 

Device

Samantha is currently using a Samsung galaxy four. Additionally, her husband uses an iPhone for work. Uses the Samsung because it was on sale and they needed to save money, at the time of purchase, for other things like school clothing for kids.

The Context - Journey 1 Henry

It’s 2pm and Henry is walking to the school in the afternoon to meet his grandson Joe there and walk him home. Henry stops at a local coffee shop along the way to grab a coffee until 2:30 and look over the app he set up last week. He is couscous to allot 30 min to do this due to not being very tech savvy. 

Emotion

Henry’s emotion is relaxed but also a bit stressed as he’s not sure what the state of the app is and what to expect when he opens it. 

 

Device

Henry is using a new IPhone 8. He loves it but doesn’t really use many apps as he is not very tech focused.

The Context - Journey 2 Henry

Henry is walking to the school in the afternoon to meet his grandson Joe there and walk him home. Henry stops at a local coffee shop along the way to grab a coffee and look over the app he set up last week. 

Site Mapping

"It’s a way to visualize the organization and labeling of content. It gives clients and project-team members an overview of the Web site and how all the content will fit together. Some designers seem to be confusing site maps with other types of UX diagrams. Site maps typically use boxes to represent pages or page states and arrows or lines to show connections. But UX professionals, developers, and others use boxes and arrows in many other types of diagrams."

Source: http://www.uxmatters.com/

Initial Ideation Process in site mapping the Lunch $ Buddy app

Our initial site map - Rev.1

Our site map has gone through multiple iterations. We started simply with index cards and concepts that addressed all of the User goals including business goals. Shown to the right is our ideation process utilizing colored index cards. Colors were used for screens that included different types of interaction concepts and requirements.

Our Site map - Rev.2

Utilizing Sketch3, we moved into a digital format with far greater detail including potential user interface design detail to allow for a deeper depth of understanding regarding the conceptual as well as design challenges.

Our Site map - Rev.3

Utilizing Sketch3, we moved into a digital format with far greater detail including potential user interface design detail to allow for a deeper depth of understanding regarding the conceptual as well as design challenges.

Final Sitemap - the final site map includes more that just screen UX and UI Ideas.

Final Screens - Using Sketch 3, the final screens are crafted to reflect all the required screens from the sitemap.

“Good design is actually a lot harder to notice than poor design, in part because good designs to fit our needs so well that the design is invisible”  

- Don Norman

The Solution

 

An iPhone navigation solution was chosen due to the majority of our users adopting the iOS iPhone platform.

Our solution chose bright colorful color palette so as to inspire and excitement our membership. Purple, green, and gold are the primary colors in the user interface design. Additionally, a white background helps to accentuate the photography of the food shows in by individual schools.

 

Our focus is on the food because our students look forward to social experiences with foods during the day at school. Additionally, at night with their family, students can choose to rate and relive their experiences during the day with parents.

Registration

Registration in a four step process

Our registration process and it's meant to be fast and easy. 

 

  • Step 1. Exposes the user to visual imagery that it's meant to delight and excite the parent as well as the student in the schools food options.
     

  • Step 2. The registration process allows for I forgotten password but emphasizes the registration button option. 
     

  • Step 3. Asks the user for the first and last names as well as email.
     

  • Step 4. The final screen asks the user to confirm their password choice.

 

One additional screen is shown to allow for login via password submission is inaccurate.

Design Challenge


But design challenge was to make the initial registration process this fast and painless as possible but also encompasses the security and protection required in terms of quantity of data to be collected from parents to ultimately protect their children's identity and information.

Due to this security and expedited registration need, only two screens were designed as a initial registration page. Other registration-based information regarding the parents address and credit card information will be collected upon payment set up.

Primary App Navigation
 

Simple for step navigation

Are navigational element is designed to be easy to understand in addition to being easy for the phone to access for one handed navigation on iPhone.

 

  • Nav Button 1. The balance screen. The balance screen allows users to at a glance understand accurately the amount of money they have in their account for date today food requirements for their children.

    Additionally, the member can also choose to add funds to the account, Apply for the school lunch subsidy program, and re-acquire their school lunch program code.
     

  • Nav Button 2. Payment set up screen. The payment set up screen allows the users to accomplish multiple tasks. And a high-level the payment set up screen allows a member to set up a new credit card or subsidy infusion. Additionally the member can choose to make edits to the credit card or program they're part of, or simply delete the payment solution altogether.
     

  • Nav Button 3. Menus screen. The menu screen at a high-level is divided into two primary forms of functionality. The billeted to move from week to week by date span. Also the ability to move day today throughout the days of the current week.

    The navigation is designed to be easy to understand and to allow the number to scroll or use the previous or next button to go to the next days menu options for children to see.
     

  • Nav Button 4. Rate launches screen.
    This series of screens is designed for children to apply a rating system to each individual lunch they chose in the past week. Debility to rain and lunch is only available once the lunch has been paid for moving backwards in time from week to week.


     

  • Hamburger Drawer - One additional screen is also included allows the user access to the hamburger style or hidden drawer navigation in the top left corner. Multiple options are available within the screen.

Design Challenge


The primary navigation element of the application was very challenging to ultimately refine. This navigation has gone through multiple iterations and has ultimately end up in an iPhone centric lower navigation area close to where the thumb will have the most control on the phone.

Design decision was made to allow the user to always know the balance in the navigation itself. Therefore the primary left-hand navigation button labeled balance displays the members monetary balance in their mobile app.

A hamburger style navigation system has been chosen to allow for other aspects of account information location to be easily hidden. Additionally a grouping of navigation on the balance page allows the user to easily add funds, apply for the school subsidy loan, as well as acquire their school key code.


Hamburger Drawer - One additional screen is also included allows the user access to the hamburger style or hidden drawer navigation in the top left corner. Multiple options are available within the screen.

Login, password reset process
 

Simple for step navigation

The password reset process is a combination of screens and dialog boxes. Please dialog box windows act as interstitial pop-up experiences for members and users to utilize versus the creation of multiple screens.

 

  • Screen 1. member chooses to login with the incorrect password.
     

  • Screen 2. Incorrect identity dialogue Window is surfaced to alert the member.
     

  • Screen 3. Member chooses to change their password is taken to change password screen

    The member changes their password and a confirmation dialog box is served. This dialogue informed the member that in fact the system has changed their password as a feedback mechanism.
     

  • Screen 4 After successful login, the members take him to the app and left on the balance screen.

 

Design Challenge


The login process has been refined to encompass one screen. There is a branding/screen that allows the user to have a joyful experience of the refrigerator logo for one second before the login screen appears. The login screen and compasses some haptic feedback mechanisms that allow the user to enter their username and password with the feedback that response to their finger tap entries.

The Menu system
 

Simple for step navigation

The password reset process is a combination of screens and dialog boxes. Please dialog box windows act as interstitial pop-up experiences for members and users to utilize versus the creation of multiple screens.

Choosing a Lunch
 

Simple two option solution

Choosing on launch is easy. The lunch money buddy application simply requires the user to click on the main screen picture of the launch but user is interested in. By doing so they launch chose an icon will appear. 

At a glance, meals Available this day
 

When scrolling through all of the options during the day for lunches that are available, students can see clearly which meal they have chosen. In comparison to other meals available the green chosen iconography helps users to see clearly which meals have been chosen but also are easily changed.

Design Challenge
 

Choosing meals needs to be incredibly simple. Overly complex store sophisticated calendaring systems were avoided on purpose.  Keeping options open for children and parents that are no different than flipping a switch from on to off was the inspiration for this user experience design solution.

Actions

Giving parents and students access to as much navigation as possible but balancing their screen cognition by limiting over exposure of complicated creative what is the style of thinking that led to this design approach. Allowing parents and students to navigate across all of the available meals during one day but also the ability to navigate to different weeks at the same time allows flexibility without feeling like you're in a rabbit hole.

Lunch Details at a glance

Offering parents and students nutritional information easily available on the expanded lunch screen.

The password reset process is a combination of screens and dialog boxes. Please dialog box windows act as interstitial pop-up experiences for members and users to utilize versus the creation of multiple screens.

 

Meal Title & Price  Camille title is positioned over the photography accentuating the experience of the photography. High contrast typography and shadows are used to accentuate the title and the price

 

Chosen Meal Indicator - Users can choose their meal by clicking on the transparent choose launch indication icon.
 

Meal Description and Highlights - Placement text is currently utilize a show where the product description will be placed. Additionally itemized highlights are available for calling out specific detailed aspects for students and parents.

Nutritional information facts - Graphical information is available for each meal in the form of nutritional fact nutrient tables.

Results

A simplistic approach to a functional usability

As a result of multiple design iterations, a more simplistic approach to a functional usability solution has been achieved.  Many of the initial design concepts and the original site map were very simplistic. As the design challenge continued over the course of seven weeks, the design solutions became more sophisticated and complexed as more discovery was achieved. Usability and functionality while important seem to be overthought. The process of iteration over the last week have proven to be helpful and that more simplistic design revisions where accomplished.

Lessons Learned

My approach to design.

 

From a position of solving problems, often I have discovered in this project, I tend to overthink a solution to the point of making the design pattern nonfunctional or too complicated. In other words, I've become my worst enemy in terms of solving simple usability. This is been a powerful realization and one I plan to continue to focus on as I move forward in other projects.

 

Not recreating the wheel.

 

The world is full of design patterns that people are used to and understand. Trying to redesign the wheel can often be costly in terms of the time it takes to do so, as well as convincing users a new pattern is better than ones they use already. With this description in mind, I've chosen to leverage a multi-tab pattern for navigating weeks.

 

As a design pattern, users can choose a past week, this week, and next week in the navigational pattern. This design pattern is very common and android user interface design.

MCDT is a Design and UX Consultancy
 

© 2012-2016 

MCDT Consulting