For my grad school capstone project, I worked with Kidsteam to research what excited kids about reading and how we could improve digital books to draw in avid readers as well as more reluctant ones. One of the biggest recommendations my co-designers in Kidsteam had was to make the story and bright and colorful as possible.

I challenged myself to learn After Effects and dig deeper into Illustrator to make my high-fidelity prototype as interesting and creative as possible for Kidsteam.

Design tools

Illustration

  • Wacom tablet
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe After Effects

Prototyping

  • Adobe Experience Design (low fidelity)
  • InVision (high fidelity)

Illustration process

It took me about 2.5 months to finish all of the illustrations for chapters 1 and 2 of Alice. I initially created one massive Photoshop file for each chapter with animations spaced throughout the page but quickly learned that such multi-gigabyte files made my computer very unhappy. So, I had to chop up the layouts onto multiple pages. Here’s a quick run-through of how I tackled each page of illustrations:

  1. Draw image/scene in Illustrator. Separate shapes onto different layers.
  2. Animate layers in After Effects. Export video.
  3. Import video to Photoshop, optimize it for the web and save it as a gif.
  4. Upload gif as a screen in InVision.

Highlights

Ch1-Overview
Chapter 1 cover page
ch1-creek
Alice spots the White Rabbit.
Ch2-Overview
Chapter 2 cover page.
alice-characters-01
The White Rabbit.
boots
Alice’s boot.
alice-grows
Alice grows.
alice-crying
Alice cries, forming the pool of tears.
alice-key
Alice finds the key.
pool-swimming
Alice and the gang float through the pool of tears.
Artboard 3
Alice.
tinyalice-key
Alice reaches for the key.

Why InVision?

After experimenting with several prototyping tools, I ultimately selected InVision. Using InVision, I could upload as many screens as I needed and could easily share the prototype with the entire Kidsteam group for usability testing. Some drawbacks to InVision were the file size restriction, lack of video and audio support and screen lag during testing. Still, I found it to be the best software for the number of screens and features I wanted to include in my prototype. Animations were important to my prototype, and a surprising number of prototyping tools I tested lacked gif or video support.