Concept • Character Design • Illustration • Animation • CSS • React • AGILE • Figma • UI
To further develop skills and experience, I embarked upon an intensive 16 week Professional Software Development course at CodeClan, Edinburgh. This was created for the final project.
‘Codo Cato and the Banana Ramen’ is the first episode of a gamified learning app that teaches basic coding concepts.
APP OVERVIEW
The player is a young cat, Codo Cato who meets sensei, Mrs Meowgi, at the coding dojo. Mrs Meowgi trains Codo Cato through tasks that introduce coding terminology and concepts. The game culminates in the creation of a delicious bowl of banana ramen. This represents a function and brings together all of the terms that were previously introduced to the player, such as strings, integers and lists.
INSPIRATION
Once the main characters were decided on as cats, I came up with the Japanese theme and name by building it around the phrase, 'Domo Arigato, Codo Cato' - a reference to the Styx song 'Mr Roboto', which itself has inspired many moments in pop culture, such as in The Office, The Simpsons, Futurama, Austin Powers, to name but a few. For a bit more fun, there is also a cheeky nod to 80s band, Bananarama.
Visual inspiration came from maneki-neko figurines, Sanrio, and the Japanese cat-collecting app, Neko Atsume.
CHARACTERS
Mrs Meowgi (final design on right) and Codo Cato (3 avatar variations)
TITLES
Experimenting with colour, style and speed
GAMEPLAY ANIMATION
The typewriter style for the text to emulates gameplay in Japanese puzzle adventure games, such as Professor Layton. Converting the animations to Lottie files maintained image quality whilst reducing page load time in the app.
Tech stack: React, Javascript, HTML5, CSS3 Server: Spring, Java, Database: PostgreSQL
Live demo of working app
