A case study: how we built Skyscrapers
Problem solving to create a playful learning experience in an educational app for kids
Building any Tinybop app involves solving lots of puzzles — some technical, some visual, and many that involve turns of logic. This post shares the series of decisions and creative problem-solving around one facet of our newest app, Skyscrapers.
In Skyscrapers, we wanted kids to experiment with how systems work differently in buildings of different heights. One way to encourage this was to let them customize their buildings so they would feel inspired to create structures of various looks and sizes.
We approached the app’s illustrator, Mike Ellis, with the challenge to draw a handful of interchangeable facades and building tops. We wanted to reference some well-known and iconic buildings, as well as materials commonly used for skyscrapers (glass, concrete, etc.), and also make the look of each building playful and fun.
Mike came back to us with a number of shapes and styles. Here are his initial sketches.
We chatted about shapes that really jumped out at us, and from here, Mike created an initial set of tops that our technical art team started to experiment with.
All of our Explorer’s Library apps feature cross-section views that enable kids to look inside whatever it is they’re playing with — e.g. the digestive system in The Human Body, a cloud in Weather, a cave or the Earth’s crust in The Earth. InSkyscrapers, we wanted kids to be able to pull open their building and see the rooms, floors, tops, elevators and other systems, and people inside.
Next, Mike went to work on the facades, the exteriors of the buildings. Giving kids a fair amount of choice in how they can customize their building not only invites experimentation, but also just makes for a richer play experience. If every building top had a set color and style, we weren’t sure that kids would be motivated to try out new building styles. How could we make the buildings feel playful and inviting?
We challenged Mike to create a system of tops and facades that were interchangeable. Each top needed to fit onto every building facade, and likewise, every facade needed to work with every top. If we wanted to use a facade pattern, as you see below, the design needed to have a programmatically generated pattern, so the pattern wouldn’t break as kids added floors to their buildings.
Mike came back with a library of facades, tops, and components, structured like this:
We were excited by the approach — the buildings could now accommodate interchangeability as well as facade customization, solving many of our initial challenges of how to make the buildings feel inviting.
But, we were still feeling challenged by the limited range of building colors. Mike had been referencing many real building materials in the design of all of his facades, and we wanted to experiment with color in a way that still respected the original material.
Our design team, Melissa and Beckie, started to explore the idea of bringing a color palette to the facades, adding to a kid’s ability to customize, and ultimately giving a wider range of possible buildings to populate a skyline.
They explored what each building would look like if it took on various tones. A few early passes looked like this:
… which Mike revised,and then we revised, to end up here:
In the app, kids can now select from one of 11 color palettes when they are looking at the exterior of their building by tapping through the color selector.
Every kid’s skyline, made with buildings they’ve created and customized, should be unique.
Skyscrapers by Tinybop is available on the App Store for $2.99. I’d love for you to give it a spin and let you know what you think.
