In an earlier post I introduced a project I started this year – an Interactive Graphic Novel style Serious Comic for elearning. That’s a mouthful! It’s not really a ‘novel’ although it is a serious topic, and it’s really not elearning rather more of an awareness piece. It’s a scenario told in a graphic novel style. It’s a serious story and you will learn something. As this genre becomes more popular in the world of elearning, perhaps it needs an official category name.

This is not my first project in this style, but it is the first of this scale. No secret I have learned a lot about designing and developing a project like this from storyboarding to art direction, to script writing and more. All of which is in addition to typical instructional design approaches. If anyone is interested in designing a project like this be prepared to double the normal effort in production.

I started documenting the snot out of the process with the goal of writing a case study when completed. Which I still intend on doing, but recently I asked my client if they’d approve of me writing about the process as we go along. They graciously gave me the green light to share the development as the end product will eventually be available for the general public. In itself that’s exciting to know because this is not a proprietary project that only a handful of eyes will get to see.

Over the next several weeks I’m going to attempt to share some of the bits and pieces of how we’re putting this all together. From concept sketches, interface design decisions, artwork, storyboarding, and anything that would make for a good read.

First, some background. The owner of this Serious Comic is the CDC (Centers for Disease Control) and the managing group responsible for project development and writing the content (the dialog script) is the University of Texas Southwest Medical Center. The topic: The focus on care and treatment for those living with HIV. From the synopsis,

Clinicians will continue to treat individuals living with HIV, albeit treating people sooner in their infection and with increased emphasis on adherence to medication and retention in care.

This project is about that care.

In addition, this Serious Comic is about how various agencies work together from the Health Department and CBOs (Community-Based Organizations) such as Positive Empowerment offices, and Community Clinics.

More on that later…

This post however is about the characters and what goes into the character development process. There’s no order to what I’ll write about in the coming weeks, but I will hone in on a specific development area each time.

Without further delay, I’d like you to meet (from L-R) Frances, Carlos, RJ Williams, Tiffani, Stu, and Jan.

You’ll learn more about each of them as we go along, too.

As much as I’d like to take credit for all the artwork in this project, I’ve been reduced to Art Director while my long-time friend Greg, is the artist behind the pencil.

For now let’s talk about the process of character development when designing a Serious Comic like this. I have been around comics all my life as I’m sure many of you reading this have. Most characters in short-run comic series or ‘one-book wonders’ don’t have a lot of background. One can write and create a story without a lot of character development other than their physical features, uniforms, or the clothes they wear. Where a character comes from, how they got to where they are, and how they relate to other characters in the story is a bit more involved. I want the reader to relate to the characters as soon as possible because we don’t have the luxury of time to build them up like a traditional novel. This is still elearning.

This Serious Comic is about in the middle of those two ends. There is just enough to know about our characters that requires defining their roles in the story, their relationships with each other, and the different worlds they are from. There’s just not a lot of time bring the reader up to speed on ‘who’ they are. An enormous amount of rough sketching in the early stages goes on modeling characters until they “fit.” Think of it as a casting director taking auditions. In this case Greg would sketch out various models, I’d offer some direction (if he lets me), and we’d get a thumbs up or otherwise from the client. The above character lineup sketch is the third or fourth rendition (I lost count). Just prior to writing this I learned that a couple of the characters is not a thumbs up and we’re back at the drawing board.

Part of the character development process is to draw a LOT of the same character in various poses and angles to ensure he/she ‘looks’ like the same character and not a slightly different looking twin. If you take a closer look at the character lineup again and compare it with the above image, can you tell which two characters these are? In the lineup you’ll notice each as specific features that help differentiate them from the others. For instance, Carlos and Stu are about the same height and weight. While Carlos is bald with a goatee, Stu is not bald and sports a mustache. By introducing these characters early it becomes easier for the reader to identify with them later in the story when the ‘camera’ is at a different angle.

Unlike a typical comic book or graphic novel page of panels, each screen in our project will be its own scene. The dialog and where the scenario is will dictate interaction or animation. In order to achieve the look/feel I’m after, my strategy is to have Greg draw the characters separate from scenes for two purposes: 1) re-use background scenes as needed, and 2) Apply animation techniques to the characters independent of background scenes.

I mentioned introducing characters early on for readers to identify with them throughout the story. One of the most challenging things is how to move a story along yet introduce interactivity without interrupting that flow. As a reader I may not want to go back to the beginning to learn about who a character is or how they relate to others at the moment. For that, I designed a few character slide-out panels that can be accessed from anywhere within the story similar to a file folder with a brief character biography.
This is one of those designs…

See a working demo here

For those of you familiar with the above interface, you’ll notice I’m developing this in Articulate Storyline. The Character Bio Panel concept takes advantage of the Master Slide layers and some “NuggetHead Trickery” to get it work like I want. I won’t have time to record a tutorial how to make something like this until after the project is done (April). If anyone is interested, leave a comment and I’ll see if I can squeeze it in sooner.

While there are some amazing interactive comics developed in other tools for use on mobile devices, the client wants to focus only on a desktop version at this time. This version will work on mobile devices per the current output capabilities of Storyline, but with limited features. I’m playing around with various ideas in other tools such as MotionArtist, Madefire, and ComicComposer to take more advantage animation, transitions, and gestures. That’s a different project. If anyone has experience in any of those mobile comic tools or knows of any, I’d love to hear more and maybe pick your brain for ideas.

There are still a few things to work out for the overall interface design. The slide-out panel functionality will be used, however it may take the form of a different visual design.

I’m thinking on writing about background scene design and development for next week. We’ll see…

Tidbits:
If you’re going to Training 2013 Conference & Expo next week, look me up. I may have a few working demos to show off.

Looking to do your own Serious Comic but don’t have the budget to hire a professional artist? Take a look at my shop – NuggetHead Store for full vector hand-drawn characters.