Chef Koochooloo

Education app designed to teach children STEM subjects with cooking classes. Part of a start up company in Mountain View.

TABLE OF CONTENTS

TEAM MEMBERS
  • Brainilio Rodrigues (Lead Designer)
  • Yuqi Yao (UX Researcher)
  • Grace Lee (UX Designer)
  • Aya Ghanameh (Illustrator)
DESIGN ROLES
  • Product Designer
  • Product Manager
  • UX/UI Designer
  • Instructional Designer
  • Curriculum Development
  • Educator
  • Visual Designer
DELIVERABLES
  • 4th Grade Curriculum
  • Low Fidelity Mockup
  • Mid Fidelity Mockup
  • Pitch Deck Design
  • Wireframes
  • Clickable Prototype
TOOLS
  • Adobe XD
  • Figma
  • Google Slides
  • Krita

01. OVERVIEW

Chef Koochooloo is an NSF award winning startup that claims to teach children Math, Science, Language Arts, and Social Studies with a cooking app that incorporates the aforementioned subjects.

I was hired to be an Instructional Designer, which meant I was in charge of creating the curriculum and testing this out to students on sites, predominantly in after school programs. Most of the work was done remotely, and I kept in touch with the team via Skype and text messages. We had periodic in-person meetings in Mountain View to discuss the product and its applications. I was also responsible for doing UI/UX design and product design for the app, creating the mid fidelity mockups that I then passed on to a coworker to turn into a high fidelity mockup.

02. VISUAL DESIGN

Many of the designers have tried their hand in updating the current designs for the app. The existing design could definitely be improved, so I also participated in it. I would like to state that I do not own the rights to the following characters used in this app:

Before

image of three character designs - they are all incredibly ugly

I made my own interpretation of the character featured in the product’s logo, using three different design styles. I used Krita, a digital painting program, and vector illustration from Figma to make the following alternatives:

After?

image of three character designs - cartoon, semi realistic, and vector

While CEO ultimately decided against a redesign, this was a good exercise in character design for us.

We were also expected to do visual design for the pitch decks that the CEO uses to advertise her company. I have contributed to making designs for the slides in the Nestle pitch. This was a team effort, and the slides were consistently evolving to meet the needs of investors.

03. CURRICULUM (ITERATION #1)

I was responsible for creating recipes that would eventually be integrated into the fourth grade course curriculum and eventually the app itself. I also redesigned the former slides so that it would be more visually appealing and more intuitive.

Before:

image of old recipe design image of old recipe design

After:

image of new recipe design image of new recipe design

I created ten recipes, each a simplified dish from a different country. In theory, the students will learn math and science from preparing the dish, as both could be needed in order to understand the recipe and how the food transforms when it is being cooked. The reading comprehension section comes from reading a short story from a character explaining what is happening in their country, which could then turn into a geography and social studies lesson.

04. USER TESTING & RESEARCH

I tested the initial fourth grade curriculum by teaching them in after school programs. I was assigned to the following schools:

  1. St Andrew’s (elementary school): 5-10 kids
  2. St Andrew’s (middle school): 5-10 kids
  3. Castro Mariano (K-1): 15-20 kids
  4. Castro Mariano (2-3): 15-20 kids

I observed how the students interacted with the course, and made note of any issues that came up within the existing curriculum. I also worked with another UX Designer, who came in as a researcher, to make our assessments on the efficacy of the program.

Our assessment was that it is challenging to cover multiple subjects (including English, Social Studies, Math, Science, and Global Competency) in the course of one class, which only lasts an hour. We both agreed that it would be easier for both students and teachers if the focus was just limited to one subject.

05. CURRICULUM (ITERATION #2)

During the process of translating the recipes into the app, I was given a guideline that I was expected to follow in order to create the fourth grade curriculum that would be used in the final product. The curriculum had to include NGSS/ELA/Common Core standards, as well as IB standards.

In the current iteration, there is a lot of room for improvement regarding the content we created with the guidelines we were given. As of now, the curriculum could work as a review or refresher for students who have already mastered the subjects, but it cannot be used to teach new material.

06. LOW FIDELITY

There was a rush to produce the app earlier than expected, and we were instructed to complete the high fidelity mockups in three days. This is, of course, a very challenging and ambitious goal.

lo fi images of the app

Fortunately, the previous UX designer started a portion of the lo-fi mockup that I was able to use in order to quickly make a lo-fi mockup of five lesson plans. Unfortunately, she also deviated from the style guide created by product designers for the app. From my conversation with her, the UX designer created the parent/teacher portal and wanted the student portal to complement it, and thought that the style guide was inadequate for that. Therefore, I decided to combine elements of the style guide with the modifications she made, which was how I ended up being the product designer.

07. MID FIDELITY

As the product designer, I created the mid-fi mockups and drafted a new style guide that incorporated elements from the old style guide and the new interpretation from the previous UX designer so that it could complement the parent/teacher portal.

Besides staying in contact with the previous UX designer, I was also telling the illustrator what images we need to complete the high fidelity mockup, which would then be completed by another UX designer. I gave him the instructions about the new style guide, and design recommendations that would be different from what already exists in the app.

lo fi images of the app

08: PERSONAL PROJECT

While my work ended at the mid-fi mockups, I wanted to create a lesson plan using the Chef Koochooloo program as an inspiration. This would be in my own terms, as I did not feel satisfied with the work I did for this position mostly because, in accordance with the research done during the on site user testing, the app tried to do too much at once. For this iteration, I wanted to make the app solely about nutrition and cooking for children.

09. WIREFRAME

This wireframe functioned more as a storyboard, where I tried to map out how I would create this app. It would be simple and focus on the ingredients involved in making onigiri as a single lesson plan. After giving the nutritional information about each ingredient, the app would then walk the user through making the onigiri while quizzing them about the nutritional profile to make sure they remember the information.

wireframe of the personal project

10. STYLE GUIDE

I have a very basic style guide for the personal project here:

I also made the avatar of this program, named Aiko, to walk the user through the lesson.

I then created the elements involved in this cooking demo using vector designs.

11. MID FIDELITY MOCKUP

I created the mid fidelity mockup using animations for Adobe XD to make an interactive prototype. I have included the images from the mockup, as well as the link for the prototype itself. There’s room for improvement regarding the color scheme, which could be brighter or with greater contrast, as well as with the quality of the vector images themselves.

WHAT I LEARNED

I was able to work quickly in a high pressure environment, and work well with team members despite the fact that we were working remotely. I was successfully able to complete the mid-fi mockups for the Japan lesson only because I was connected to the team members, and was able to clearly communicate the issues in hand as well as what I needed.

I was also able to be flexible and fulfil roles that I was not expecting to do. I did not think I would be a product designer or a product manager, but ended up being in that position because the need was there, and I took the initiative to take over that role.

Overall, it was a challenging experience, but it showed I was able to take on a bigger responsibility than I expected, and rise up to the occasion when the situation calls for it.

CONTACT ME