I wanted to make an app ... so I made an app*

*and I'm making another.

In 2014, I self published an interactive book for the iPad, Cutie Bear, and now I am working on another, Scar Stories. Cutie Bear has been downloaded over 1,500 times. For each app, I was the primary illustrator, animator, and coder.


PROGRAMS I USE TO DEVELOP MY APPS

Primary Programs

  • Photoshop
  • Illustrator
  • XCode
  • Cocos2d-ObjC

Secondary Programs

  • Texture Packer
  • Physics Editor
  • SpriteBuilder
  • Chipmunk
  • Audacity
  • Flash

Work at a Glance

A compilation of 20 interactive animations used in my most recent book Scar Stories.

Notable Interactions

  • Interactive punching bag
  • Randomized flying cotton balls
  • Laser beam that follows touch
  • 2D key unlocks chest
  • Giant squid breaks text
  • Create your own music
  • Create your own ice cream dish
  • Paint the tears on a cheetah

OVercoming the learning curve

The Learning Curve of 2012 - Knowing I Could Make an App

I minored in computer science, but I never made an app. I needed a proof of concept. In one week I solved enough challenges (e.g., finding a book I could learn from, knowing what program to code with, putting a picture on the iPad, interpreting touch on the iPad, etc.) that I knew I could complete my storybook from start to finish.

The Learning Curve of 2015 - Cocos2d and Physics

To develop my second app, I needed to learn physics. The diagram to the right explains the confusion I was presented in 2015. I began using Cocos2D-iphone in 2012 because it had the best resources, but in 2015 it was outdated, so to learn physics I used the development engine Cocos2d-SpriteBuilder, again, because it had the best resources. I also had to learn how to use Chipmunk and Physics Editor along with Cocos2d to create the physics interactions I imagined. 

 Diagram shows the different Cocos2D resources available to me at the times I was coding my app. 

Diagram shows the different Cocos2D resources available to me at the times I was coding my app. 


SAMPLE CODE

Goal of the Page: have the user play with a punching bag, break the punching bag, and then have the Great Choo Choo stomp on the text.

Interactions that needed to be coded:

  • Speed bag slowly pushed by interaction (rests on finger)
  • Speed bag stopping on touch
  • Speed bag responding to swipe at variable speeds
  • Speed bag interacting with upper bar
  • Speed bag not interacting with upper bar chain
  • Upper bar changing light when hit
  • Speed bag breaking after seven hits
  • Upper bar moving up after seven hits
  • Great Choo Choo jumping down after upper bar dissappears
  • Background changing but keeping texture
  • Great Choo Choo 'smashes text' animation
  • Great Choo Choo 'breathes' animation
  • Great Choo Choo 'spin head' animation
 

NOTABLE DESIGNS

Grade Level Questions - A new feature in my second interactive story will allow users to view professionally developed questions based on grade level about the content on the page.

Alternative Navigation - The interactive book does not have to follow the linear model of a physical book, so I created a story that mimics a conversation you can navigate.

Innovative Interactions - Perhaps the most innovative interaction of Cutie Bear was when users were instructed to hug an iPad to slow down the sound of a heartbeat.

Interactive Text - I use text as a character to help emphasize emotion. For example, on the page depicted in the bottom-right image, you can push the bear out of the window and the text breaks to emphasize the pain Cutie Bear goes through.


NOTABLE USER DESIGN LESSONS LEARNED

I'll show my app to anyone, finished or unfinished: roommates, random families in coffee shops, students, etc.  In 2013, I took my app to an elementary school to have fifth graders go through my app. From these experiences, I've developed a few principles that guide my interactive design.

Don't assume people will explore - As soon as some people receive the app, they ask, "What do I do?" Others start exploring. I can't assume everyone is an explorer.

There's an animation for everyone - When I ask people about their favorite page, I found that different pages excite different individuals. Common themes include - 

  • Interactions that let the user to create a story
  • Interactions that surprise a user
  • Interactions that users figure out on their own