Background

In summer of 2013, gathering inspiration from colleagues Todd and Dan at IDEO Boston, I started learning to code in Objective C. Since the best way to learn coding in a new language or environment was creating my own project from scratch, I decided to craft some small mobile app. It was in fall 2013 when I took a class of Simplified Illustrations from Skillshare — and then I decided to continue learning both illustration and coding by making a simple alphabet app for kids.

Framing the Problem

The idea here was that most of the alphabet apps out there feature really wild colors and shapes, while there was a niche for smoother, simplified designs. It was important to include sounds, voiceover for letters and simple animations to make the app look more interactive and playable.

I also looked for good references to sum up what is the style I intend to work in and what kind of product I’m going to end up with.

Once the idea has been formulated, it was a time to put it onto paper. I started with a product description and a few simple sketches to outline the canvas of the project.

Sketches

Looking for 26 illustrations – and name-worthy animals – new for each letter turned to be not so simple. I had to look for animal names at various wildlife websites, and then to search for photographs at google images, selecting a few for each item.

Next thing in the process was simplification: looking at the photograph, I sketched each animal on paper using only very basic, simple shapes.

Illustration

Once the sketches were done and scanned, I put them in Illustrator and carefully re-drew each animal with shapes. Later on I’ve added some patterns and shadows, aiming at keeping it as simple and flat as possible to preserve the style.

Colors came next. I used Adobe Kuler and Dribble Colors section to come up with something fresh and trendy, yet playful, contrast and colourful – both for animals and for backgrounds.

Here is the final set of illustrations:

Voice over and sounds

One thing that took me a while was finding all the sounds for each animal. My greatest source of samples were Youtube and various wildlife websites. Some ‘tough’ animals are mostly silent, so I ended up either using distress sounds they make. And for a couple of sounds were imitated by me and a friend based on text descriptions of what these animals sound like.

The voice over for letters was ordered for another $5 at Fiverr from a lady who specialised in imitating children voices.

Wireframes

Next thing was putting everything into simple screen sketches to simplify the design process. My interaction design process if fairly simple and is based on JJ Garett’s Layers of design principle. This time I went quickly through the stages, working first on quick wireframes and then on visual design sketches.

Coding

Animal ABC was my first app, so it took me some playing around to write the code. The handbook that helped me to get on solid ground with Xcode and Objective C was ‘Programming for iOS’ by Big Nerd Ranch. Really recommend this one.

Structure is pretty simple – there is a XML file with all the names, voiceover urls, letters, colors, etc. After coding basics for each screen (including appearance – the visual design was created programmatically), I started going through animations and transitions that were necessary to make the app work smoothly.

A few new screens (such as menu to quickly arrive to specific letter and about screen) were added in the end of the process. Here is the live app demo:

Testing

During the process of designing the app, I asked a few friends with children to play with the app. That allowed me to see what changes had to be made.

For example, at the early stage I thought an adult female voice would be more applicable to the app. Then, during testing, we figured out that children seem to prefer more child-like voice overs.

Some other suggestions included additional features, such as menu button to toggle voiceover and various ways to improve the app appearance.

Landing page

When the app was ready, I quickly designed a landing page to refer people to:

Results and Learnings

After the app was published, it was downloaded a ~10 000 times. A few valuable learnings:

* Children’s alphabet apps, even free ones, proved to be extremely saturated market. Since it was a learning project for coding/ illustration, I didn’t actually do much to promote it. Maybe app store optimization could become another learning project at some point.

* If one intends to become ‘a full-stack maker’, one needs to become good at basic design, coding and marketing at the same time.

* The main result I got was feeling confident coding for iOS. I use prototyping quite a bit when I do innovation-focused projects for clients, so writing native code for iOS to create experiences is a valuable skill in my toolbox.

* Illustrations didn’t become something I do a lot. However, learning to illustrate using skillshare course showed me how skills could be picked up on the go, when I needed them. I think it would be more and more needed thing for makers of all kinds in the nearest future.

_______

Link to the app: Animal ABC for iOS