🍴Chefi Design
Chefi is a concept design I created to simulate cooking through tangible augmented reality.
The platform uses physical toys on top of an iPad screen to bring playtime to life for ages 4-6.
ROLE
UI Designer
Illustrator
TIMELINE
3 weeks
DELIVERABLE
AR game prototype
AR app prototype
Character/Asset Illustrations
Branding
My simple idea of tangible AR for the iPad
ORIGIN STORY 🧠
After playing many sessions of “chef” with my 4-year-old niece using play-food toys, I got this wacky idea to try to make the experience more lively.
Since I know she has regular access to an iPad, I started thinking of how I could combine her love of play-cooking with tech!
To see how parents feel about their kids using tech to play, I went on a journey to research the opportunity for this form of tangible AR kidtech.
Research 🔍
I asked 10 random adults ages 22–38 to describe kids in their lives ages 2–8 years old.
10/10 described kids in their lives as hands-on learners, social beings, that love pretend play.
I then asked the same 10 random adults what field they hope the kids in their lives go into, a majority of them stated firmly “tech”.
Top sketch: digital screen AR where physical objects affect the digital screen // Bottom sketch: camera-based AR (using TopCodes) which means motions on external surface are mimicked on screen.
Some rough user-flows of a French Toast tangible AR game
Ideation 💡
If screens aren’t going anywhere, children need a new way to combine their love of hands-on play with the screens they already use.
This way, they can stop staring, and start engaging!
I decided to use touch-screen-based AR as it would be easier for me (read: cheaper) to rapidly prototype and test.
This means that physical objects in the real world, like a food toy, would go onto the screen.
I also chose it because the learning curve is lower for kids (4-6) who are already familiar with touchscreens.
Screenshot of UI critique session over zoom
Here are the learning marks I asked for feedback on with adults:
Object numeracy: Ability to know how many objects to put on the screen
Time Elapsing: Ability to know how long to put an object on the screen
Placement Instructions: Ability to know where to place an object on the screen
Workable Game Prototype ✏️
I then turned my ideas into some sketches via Procreate!
I created a french toast game because it is a relatively simple recipe and didn’t present stacking issues on the screen.
I used POP by Marvel to turn my Procreate sketches (‘1620 x 2160 px screen size’ canvas) into an iPad prototype. This allowed me to test my idea early just in case the game was a flop.
I presented the game prototype to 14 parents. Some played, and others critiqued the UI of the game screens.
Why did I test with adults first? Although the game is for children around 4–6 years old, adults are the gatekeepers for children’s content.
click me for high rez view
click me for high rez view
click me for high rez view
Playtesting with 4-6-year-olds 🧸
I playtested the game with 5 kiddos ages 4-6!
*For their privacy, I am leaving out imagery of the playtesting with the kids here. Happy to show the shenanigans in an interview :)
Here are the biggest points of friction from the 5 playtesting sessions:
❌ Object numeracy: The child did not understand the ingredient UI list on the screen that showed how many objects to put on the screen/digital pan. This tells me that a 4-year-old is not paying attention to this level of detail.
✅ Time Elapsing: The child understood immediately that a timer counting down from 3 to 1 meant it was time to remove the object from the screen!
✅ Placement Instructions: The child understood to place the physical object where the arrow points on the screen.
Improvement 🚧
I am improving the game by adding more environmental context to the game. This includes things like turning on the digital stove, gathering ingredients, and pushing buttons.
Sketch showing how I am adding context in game
Sketch showing how I am adding context in game
Typography 🔠
I created a Golden Ratio type system designed on the smallest possible device for this tangible AR game (iPad mini).
Each line-height is divisible by 8 for continuity.
Nunito is the primary font to add a youthful and soft feel. Readability is highly important even though it is for kids because parents need to understand instructions.
Noto Sans is the secondary font as it is still fun but maintains readability at small sizes for body copy, settings text, and small info like password limitation alerts.
Character/Asset Illustration 🎨
I made all illustrations like Chefi the bear, food, and flags as vectors in Adobe XD (don’t worry, I can do it in Figma too, wicked fast).
I started off by sketching in Procreate the character “Chefi the bear”. I noted how I intended to build each piece.
Here are some pieces that make up Chefi the Bear
The bear was blue at first, then I faced some WCAG color contrast issues and made him purple
The bear’s entire face is made up of vectors
Other fun assets I made in XD
Rough sketches of Home/Help Overlay
Wireframes 🖼️
I made some wireframes to visualize the hierarchy of the platform.
From my research with parents, I knew the app needed to illustrate:
How to play games/get help
Options to play by country recipe
Options to play just by recipe
Section to purchase items
What’s Next? 🤔
I am currently going through rounds of usability testing on the app experience.
I am also redesigning the game experience to help kids understand that they are cooking a meal
Check it out!
Here is the prototype of the platform in its current iteration.