The town of Sparkdale is in a bit of a bind, but you can make it better.
ccSpark! is an educational multimedia product developed for Career Cruising. The entire ccSpark! package consists of a website, multiple videogame episodes, and various interactive activities. The goal of ccSpark! is to educate kids in grades 3-5 about numerous types of career opportunities and what they entail.
Here’s a trailer showing an overview of the game itself:
ccSpark! was created using Flash and ASP.NET. For more information, please visit the official website.
Below is a short case study on the project’s development.
The Overview
Career Cruising initially approached us in 2011 about working on ccSpark!, but it wasn’t until early 2012 that the scope and direction of the project crystallized. No Crusts was brought in to head up scripting and curriculum-integration, while we provided creative and technical feedback.
Once all the details were set in place, we agreed to develop the website, server components, and all game-episodes for $200k+ over the course of roughly 7 months.
The Challenge
The main goal of ccSpark! was to educate kids about nearly 70 different professions spread across a wide variety of disciplines. This represented a huge amount of information that needed to be conveyed in a casual, measured fashion.
Four characters from ccSpark’s extended cast.
The gameplay itself had to be limited to medium-sized bursts to accommodate classroom times, and an automated save-game system was necessary to avoid the loss of progress and extraneous complexity. This was also tied to an overall advancement and evaluation system meant to inform kids about their own goals, skills, and traits, and how they’re reflected in various career paths.
Since the game was to be distributed throughout numerous districts and school grades, we also had to support multiple languages and be weary of different comprehension levels. An important part was to minimize the amount of technical issues teachers had to deal with, and empower the kids to progress through ccSpark! without any outside help.
The Solution
Early on the team decided to split the game into 21 individual episodes, with each episode detailing a handful of professions. This would segment the content into classroom-friendly chunks and prevent it from being too overwhelming.
Won Koolhaus is a perfectionist!
The episodes themselves were designed to revolve around a single quest and a handful of humourously-confused characters. The goal of each episode was to restore order to the town of Sparkdale by learning about numerous jobs and helping the characters find their rightful professions.
Some of the characters and locations were reused from episode to episode in order to save on asset costs and give Sparkdale a sense of permanence and community, but each chapter still introduced new cast members and areas to provide variety.
This approach created a number of challenges as it represented an enormous amount of content. Consequently we decided to bring on a full-time artist to help with the animation requirements, and created a custom scripting language to quickly and efficiently integrate each episode.
As characters are encountered in the game, they join the player’s ever-growing friends list that’s persistent across multiple grades.
Outside of the game itself, we also developed a robust user-profile for each student. This included a customizable avatar, a friends-list based on the characters encountered in each episode, and a series of interactive reflection activities.
These web-based tasks automatically followed each episode and served two functions: to quiz the player on the events that just transpired, and to help them better understand themselves. This meant that large parts of the activities did not have a “correct” answer; instead, they were used to automatically populate the player’s profile with the indicated hobbies, personality traits, talents, etc.
A further incentive for completing these activities were optional reward-badges also displayed on the profile screen.
Reflection activities feature interactive content that is used to automatically populate the player’s profile and help them learn about themselves.
From a technical standpoint, we decided to use vector-based character models to cut down on file size and utilize an online backend for all save data. This allowed us to define database schemas that plugged into Career Cruising’s administrative backend and properly supported a localization system responsible for deploying ccSpark! in multiple languages.
The online components also helped with various technical issues such as teachers not having administrative rights on school computers. Additionally, we hired a contractor to help standardize the website across multiple browsers and operating systems to ensure a consistent experience for all users.
The design of the website and game was aimed at a 1024×768 resolution, but was actually quite smaller to accommodate for operating system and browser toolbars with minimal scrolling. The layout itself aimed for a colourful, icon-heavy look but open enough to prevent congestion, and the exact same colour and interface scheme was implemented in the game to keep the experience seamless and consistent.
That’s not a stylist — that’s a landscaper!
Finally, we implemented a help screen inside the game that outlined the interface and the overall goal of each episode, and made sure that each chapter was introduced with a clear and concise mission statement. A reporter character tagged along as well to provide context-sensitive clues, and all ancillary characters dispensed additional hints.
On the UI front, a “Happiness Index” was used to keep track of the player’s progress, and numerous graphical effects and tips provided extra direction.
Floating icons, dynamic cursors, and hover-descriptors helped to guide players of all skill levels.
Following some playtesting sessions, we found that additional visual aids would make the experience even clearer to the player, so we included customized cursors based on possible interactions, hover icons to indicate which characters needed to be talked to, and map icons to show which areas have been successfully completed.
These features reinforced the objectives without giving away the solutions and successfully parceled out visual clues to each episode’s challenge.
The Results
ccSpark! launched to great success across dozens of school boards in USA and Canada. We are currently providing additional support for the project, and a new skew of ccSpark! for kindergarten-to-grade 2 students has already been approved and will soon enter production.
