My Big Idea

Build an interactive animated environment in which users perform their tasks and activate their next lesson, essentially designed like a task flow at the start of an old Super Mario video game.

If I could create a fun environment that encouraged curiosity and discovery, perhaps students would be more attracted to learning about financial literacy and will spend more time with it. By building an environment for accessing the resources, users could be able to contextualize the educational material, which can assist in memory retention—similar to a “Memory Palace”.

Visual Development

I wanted to build this little world with smiling shapes, cartoon animals, talking objects and other irreverent elements. I was inspired by how Sesame Street used advertising strategies to develop its visual identity in the early 1960’s to educate children. For my project, I applied this philosophy by combining various visual styles to create a fun, hodgepodge environment. My assumption was that discoverability, gamification, and humor would inspire children to be more interested in what they were learning.

Style Choices

I chose to use a rainbow of brightly saturated colors for the settings, characters and UI elements in the design to create an exciting, attractive experience for young users. A wide variety of colors was necessary to properly illustrate the characters and to highlight UI elements within their settings.

For fonts, I chose BookmanJFPro for headers to give an '“old timey” look to the signage within the little “world” of BEMH. Poppins and Aktiv Grotesk were used for buttons, body text and dialogue boxes for very clear readability. Since there is very little white space, with busy environments and bright colors, I decided that very simple font choices were best to keep the young users and their parents on path in their path through the experience.

Giving both sets of users direct cues and communication would hopefully allow for easy use while enjoying the colorful, fun environment. It was important to make sure the busy design would not prevent users from the primary goal: to learn financial literacy.

Designing by the seat of my pants

Due to time constraints (one week!) and the nature of this design, the standard wireframing process wasn’t feasible. Since the buttons were mostly built into the scenes for each screen, it made more sense to go from a few pencil sketches straight into building a high fidelity prototype.

Without enough time to fully plan a style guide before implementation, I had to develop the guide as I built the prototype. This would be absurd if I were building an entire digital product, but it worked for a simple flow illustrating how young users sign in and access their next lesson.

Try out the clickable mobile prototype here.

Reflection

While I am happy with how this project turned out, I would have loved to have spent more time researching, testing and revising the designs. Focusing only on the UI portion of a product is like jumping into a movie that’s over halfway finished. Using an unconventional approach to developing a visual identity would require more teamwork, feedback and lots of planning before building such an eccentric little world.

Creating an environment of quirky signage, talking lemons and flying fish seems easy, but designing irreverence and humor into an educational product needs careful consideration. If I were to continue developing this design, I would like to work with education professionals and game designers to ensure our users learn thoroughly learn financial literacy and have fun doing it.