Usman Fahimullah
CMS.jpg

UI.UX

This is a new platform by SFUSD that is built to introduce a new way to get lunch faster and more efficiently through the use of technology.

 

SFUSD (Future Dining Experience)

RE-DEFINING LUNCH FOR A NEW GENERATION

 
Macbook.jpg

Role: UX/UI Designer | Project Manager: Diana Zahn | Creative Lead: Cameron Sagey

 
 

The Challenge

SFUSD has been trying to implement what they call the FDE (Future Dining Experience). This is a new platform by SFUSD that is built to introduce a new way to get lunch faster and more efficiently through the use of technology. SFUSD worked with IDEO on how this would look like. Along with the FDE, IDEO was developing a new technology stack called SMTP (Smart Meal Technology Platform.

SFUSD Came to Xtopoly and asked us to design out how the SMTP would look and function. SFUSD wanted us to design both a front-end website for the students to interact with as well as back-end CMS Platform that would allow the admins to add food items as well as manage the front-end.

 
 
Moodboard.jpg
 
 

The Approach

The Smart Meal Technology Platform is part of SFUSD’s Future Dining Experience, an initiative dedicated to providing an experience that meets the needs and desires of students in order to increase participation in school meals. This ensures students are well nourished during the school day so they are well prepared for learning and can reach maximum potential. SMTP will allow students to pre-order/plan their meals, provide feedback, and learn about health and nutrition. Student’s engagement with the platform will provide valuable information that will enable SNS staff to be ‘smarter’ in terms of operations by responding to student’s needs.

The platform is an integral part of the FDE initiative that addresses the following challenges:

  • Increase number of students remaining on campus for lunch.

  • Understand student eating habits in an effort to manage costs.

  • Change negative perception of subsidized lunches.

  • Use games to help educate students on health and wellness.

  • Give students a voice and ability for feedback on their lunches.

 
 
 

Research

The users of this site are high school and middle school students from SFUSD. The platform is created to meet their wants and needs. They have certain expectations and frustrations as defined by our User Personas, which focus mainly on usability. We’ve done additional research on design aesthetic.

Our research suggests to avoid content and aesthetics that are overly childish. It informs us that teenagers tend to be impatient with the web and they are prone to giving up easily - due to this, they need a well organized and intuitive site. Below are some quotes from research studies done on website design and usability for teenagers. The study by the Neilsen Norman Group was the most comprehensive. There are many additional studies from other groups that confirm these findings.


Lower reading levels, impatience, and undeveloped research skills reduce teens’ task success and require simple, relatable sites.

-Neilsen Norman Group


Although teens have a strong appreciation for aesthetics, they detest sites that appear cluttered and contain pointless multimedia.

-Neilsen Norman Group


Teens will run from a site with kiddie stuff even faster than sites that cater to mom and dad.

-Eric Nacul

 
 
 

 
 

Comparative Analysis

The platform is targeted to be used on our student’s smartphones. We are competing for their attention in this marketplace. SMTP’s competitors are far beyond food-targeted apps, they range from social media to games.

Facebook | Instagram | Snapchat | App Games

Takeaways

  • Nutrition information is displayed as the typical food label

  • Rating is either a 5-star rating system or a like/dislike option

  • Images of food are available on some but not all

  • Only one application offers educational food games

Opportunity

  • Present nutrition information in a relevant way 

  • Provide a more engaging/relevant to audience rating system 

  • Provide images for all food items

  • Educate users through games

 
 

 
 

Planning

After the personas defining where each main user would populate the site was key. The sitemap allowed me to organize and structure each page. I showed how the personas related to the site map by showing which pages the persona would prefer to use to help solidify the purpose of each page on the site.

 
 

 
 

Brainstorming

We began planning out each section of the site by doing quick white board sketches as well as rough sketches on paper to test out how we could display information that would easily be digestable to the user.

Hi-Fidelity Wireframes

The overall flow of the site for the students revolved around two key things; food and nutrition. This was the core of the experience, and needed to be perfect. For food I wanted students to be able to pre-order food days in advance while allowing students to play games on their downtime to learn about nutrition. These games would work with the whole district allowing schools to compete with other schools and would offer benefits to each school such as prizes. This would give students an initiative to learn about nutrition.

 
 
CMS_Splash.jpg
 

User Interface

The site will use vibrant colors to symbolize health, a wide variety of colors to symbolize choice, a clear and spacious layout for convenience, and a friendly and inviting design style for inclusivity.

Junior high and high school students want to be socially accepted. A huge part of this is being cool, doing cool things, and going to cool places. The students need to feel comfortable using this site and eating in the cafeteria. This site needs to be hip, trendy, fun, and useful.

 
 

This means using modern design trends and casual language. This is a website for the students, and it needs to feel like it. Students want their voice to be heard, and want to feel like their actions have an effect. Beyond the functionality that enables this, the site needs to embody this feeling. This site will be alive, responsive, and interactive. Each action the student takes will have a noticeable effect.

The site will use vibrant colors to symbolize health, a wide variety of colors to symbolize choice, a clear and spacious layout for convenience, and a friendly and inviting design style for inclusivity.

 
 
CMS.jpg
 

 
 

Key Takeaway

Throughout this process, I’ve taken away the ability of thorough research and date collection. These aspects in the design process do really trickle down all the way through the end, from dictating the sitemap, as well as influencing the final interface choices. This has proven to be a vital part of this project and one that will take much more seriously with upcoming projects.