From Idea to App - Overview

October 20, 2014

Project Overview

Hello, readers. Today is Tuesday October 20th. This is the first post of 10 that will document the process I go through for turning an idea into an app. In this post I will be combining all of my notes and thoughts leading up to this project.

I have a couple goals that I wish to accomplish with this project. First I want to solve a proble. Second, I want to see if I can build something quickly. Finally, I want to document my effort in a way that other people can benefit.

I plan to cover as much as I can by journaling each day. The writing style will switch between journal and narrative depending on the amount of time I have.

I have broken out the next 10 days into 10-12 stages. Because of the nonlinear nature of the creative process some stages will be revisited several times.

Outline, bold items are being addressed in this post:

• Identifying a Problem
  • Possible Solutions
  • Expanding on the Idea
  • Lessons Learned
  • Basic Requirements
• Sketches
  • Another Character
• Prototyping (Keynote)
• Proof of Concept
• The Backend
• Building the App
• Laying Out Screens
• Defining Input
• The Loop
• Social
• Polish
• Done

Identifying a Problem

The problem I wish to solve is one that new parents face: finding a good picture book to read to your kids. There are many books out there written for kids. I don't know about you, but I'm tired of the classics. Just because it's a classic doesn't mean it's good. What about new and upcoming authors?

I recently wrote about how children's books are designed to visually appeal to children. My idea is that I can build on this natural behavior.

Possible Solutions

How does one solve the problem of finding a new book to read?

There are several possible solutions to this problem.

• let parents and kids share book recommendations
• provide a way to visually explore and find new books
• aggregate periodic library book lists

Of these three possible solutions, the one that seems simple and interesting to me is the middle one "a visual way to explore and find new books".

Expanding on the Idea

What creative ways could I build an application that lets kids explore and find new books on their own?

4 riffs on the concept:

• book battle - a system where books battle against each other for the top spot

  • would need a lot of users
  • may be hard to sustain
  • I imagine grungy theme music and a lucha dore/wrestling match between books

• hot or not style app for kids books (could be interesting)

  • let users vote one at a time by choosing a sliding scale 1-10
  • would require knowing the users age
    • not sure how to gather that info

• A tinder style app for kids books (could also be interesting)

  • swipe left for books you dislike, right for books they do
  • builds a list of books the user likes
  • how to send to parents? prompt user to give to mom or dad? email?
  • is a child's choice good enough for a parent to buy?
  • what other information might a parent want?

• A giant visual book explorer

  • large visual map of books by cover
  • allow zooming in and out
  • might work better as a webpage or iPad app

Lessons LEarned

I have learned many lessons for building for mobile:

• easy to overcomplicate
• onboarding is hard
  • solve for onboarding early
• UI needs to be very simple
  • account for tiny hands
  • account for "oops"
• instant gratification
  • sound effect, animation, noise, something must happen
• build something people will share

Basic Requirements

There are a small list of core features I think an application aimed at children should have:

• be visual in nature
• simple UX
• use a cute mascot/logo/character
• use vibrant colors
• use lots of sound effects (pull to refresh, and for confirming user actions)
• kidsafe

Sketches

For each idea I have sketched out some possible screens, words/names that I could associate to the project.

• opihi/clam riff off oyster
  • scroll around
  • on click of book show similar books
  • on second tap show detail

• book explorer

  • of clicks increases size of images

    • scales 1-1.25x
  • visual mosaic
    • sort by age of target audience?

• book battle
  • grungy theme song
  • have an opening sequence animation
  • gestuee left or right

• hot or not for kids books
  • the book a kid votes down blows up!
  • could possibly show a boxing match style graphic pitting two books against each other
  • how to show like?
    • thumbs up or heart?

• I also thought up a character guide
  • cyclops?
    • robot?
    • play off nainai's book worm mascot?
    • combine the two: cyclops book worm?
  • what if the character guide was a full screen animated face?
  • the character could sit on screen and provide a guide for the user

• more riffing
  • I sketched out a stylized title graphic: Cyclops the Bookworm

I previously wrote about animating sketch3 designs. Complex scenes can be hard to animate...

• compose a character that can be animated easily.
• animate: eyes, eyelids, eyebrows, mouth?

I also sketched out potential sound effects. I want this app to feel interactive.

• sound effects for actions
  • when a user swipes left (no)
    • "mm, no!"
    • "hmm"
    • "no"
  • when a user swipes right (yes)
    • "hahaha!"
    • "yeah!"
    • "yes!!""
    • "woohoo!"
  • while the user is swiping... in middle state
    • "hmm?"
    • "hmm!"
    • "I dunno!"

Another Character Idea

I realized later that the cyclops bookworm might be hard to animate. Instead I tried to think up a different character.

I thought about how the process of finding a new book is like being on a hunt. I then thought about hunting for truffles. That is when I had the idea for a tiny truffle finding piglet could be the character guide and mascot.

I figure if I kept the character small then I could avoid having to do lots of animations.

Meet "Truffle" the friendly little piglet that will help your kids find the next great book to read!

Next: A Prototype

In the next post I will present a clickable prototype, built in Keynotopia.