How I Turned an Idea Into a Hit iPad App

From idea to execution, this is the story of Brainbean.

Tanner Christensen
16 min readJul 3, 2014

Tanner Christensen

On June 5, 2014 I launched an iPad app that took seven months to create.

The app is called Brainbean, and while it’s not my first foray into the app marketplace, it is undoubtedly my biggest effort to-date. I planned, designed, and developed the app entirely on my own.

I’m not sure whether what’s written here will be insightful or not, but hopefully it’s enough to either inspire you or provide you with enough of a peek into my work process to help you take your own ideas and see what they can become.

October 2013, I had an idea

Like any good idea, this one came about as a result of looking at my personal interests then asking “what if?”

For several years before the idea struck, I had been researching and writing on the topic of creative thinking on my blog Creative Something. I came to wonder why, when popular apps like Lumosity and Fit Brains promised players an improvement in intelligence, there were no apps to promote creative thinking and education.

With my background in creative research — as well as years working as a freelance designer, independent developer, and avid tinkerer—I wondered what would happen if I was the one to create such an app.

Envisioning the objective

After thinking about the idea of a creative education app for a few days, I sat down and decided to see what I could do with it. I sketched out the vision and possible names for the app, marking them in “stone” for my future self.

My original sketch kicking-off the Brainbean project, with proposed names and mini-game ideas.

To me, a project isn’t real—it’s not something I can tangibly work with—until it has a name.

If, when someone asks me what I’m working on these days, I can’t give them the name along with the description, I don’t consider it a real project. It’s somewhat silly, but to me a name gives an idea enough momentum to start the ball rolling. Apart from stating my objective, I had to come up with a name to empower the project.

After quickly jotting down a few name ideas—using a fun-spirited free-writing approach—I took to the internet to research each. Some instantly seemed too silly or absurd to move forward, others were already taken by companies or existing apps. The theme was generally playful—an essential aspect of creativity—and for some reason I kept imagining the human brain as a sort of “bean.”

It took less than an hour to decide on “Brainbean,” the seventh name on the list I had quickly written in my notebook.

With a name selected and the objective outlined, I was ready to really kick the project into full gear.

I knew I wanted Brainbean to function similarly to existing thinking / brain training apps, which offer players a series of mini-games or challenges they must complete in a timed environment. Thanks to my years of experience researching creativity, I already had a few ideas for what those possible mini-games could be, including remote association and incomplete figure challenges (both of which are commonly used in research studies involving creative thinking).

Imagining what it would look like

With a name, a few game topics in mind, and a mental image of how the games might work, I started imagining what the interface would look like. How would players interact with each of the games? How many games could I offer? What would the menus look like? What about the icon that would hopefully capture people’s attention and vividly stick out in their memory?

To draw-out general ideas for how the interface might look and function, I used an app I designed specifically for quick sketches on my iPad: Drwer.

Initial concept sketches for the Brainbean interface. The main screen on the left, a high score pop-up screen on the right.

The first few sketches consisted of a main menu where players could select which game they wanted to play, as well as a “high score” pop-up that would appear when each game ended, displaying the current score and a few other details.

I’ve found that, for me, sketching very broad ideas for how the project might look is immensely helpful for moving forward with it. It’s easy to get stuck, repetitively thinking over possible features or effects when you haven’t planned them out in-advance. Taking just a minute to sketch out a rough concept is enough to establish direction with the idea without getting carried away or overwhelmed. So I try to start with generic sketches first.

Initial sketches for the Brainbean icon

Like the name, having an icon is another way to symbolize to myself that this project is really happening.

Here you can see my exceptionally poor drawing skills for the original icon.

While I can’t remember exactly where the inspiration for the icon came from, I do remember seeing something online that sparked the initial idea of a simple character or silhouetted image. I knew I wanted it to be fun and incorporate some type of “brain” in the shape of a bean, but I wasn’t sure of exactly how the two would blend best.

At one point I was debating having a themed “character” that would represent the app, specifically: a bean/brain that wore glasses. Thankfully the idea quickly fizzled out as it seemed just slightly too “out there” to appeal to my ideal audience.

After deciding on the idea of a silhouetted figure and a bean-like brain, I ended up illustrating four icon concepts. Almost immediatey I knew which one I would wind-up going with.

Original Brainbrean icon concepts, the design on the far-right is the final version

For styling the design of Brainbean itself, I first looked to Apple’s own work. iOS 7 had just been released a month earlier and I knew I wanted to use a similar aesthetic in some way. This decision is evident in the text-based buttons used in final version of the app, among other things.

Because Brainbean would also be primarily targeted at children, I wanted to incorporate a type of fun, flat design style to it. I browsed design inspiration sites like Dribbble and Behance in search of illustration work, much of which heavily influenced the completely custom design work I ended up doing on the final version of the app.

After browsing the web for inspiration, I started working on a type of style guide I could use while working on the app.

I opened Illustrator and drew a series of flat, fun elements (some of which made the final cut into the app, others which were used for promotional materials only). This initial phase of illustrative work helped drive the overall theme of the app (i.e. the interface and how animations within the app worked) long-term.

The first “style guide” elements created for Brainbean in Illustrator

With an aesthetic in mind and a basic outline of what the app could look like, I opened up Photoshop to mockup the primary screen of Brainbean.

Getting down to the core business

I’ve worked with a lot of companies and individuals who like to design every screen of an app or website before diving into the code. However, for me, I tend to work better if I can design a main part of the project and then dive into the actual programming to develop the rest of the functionality, features, and other aspects.

Instead of designing the app as a whole right out the gate, I focused on designing individual features and mini games as they became needed.

For example, the first thing I developed was the main menu. It took a good two or three days to get the menu design to a place I felt comfortable programming. Once it was completed I opened Xcode to program that screen and functionality. After a few days of developing the main screen, I began working on design for the first mini game: Letter List.

A peek at the Photoshop file containing all basic design work for each aspect of the app (grid displayed is for one of the sub games)

Once the basic design was in-place for the Letter List game, I would program the basic functionality and then tweak the design right there in my working product.

For the remainder of the project this was my process. Plan > design > program, plan > design > program, on and on.

If ever a situation arose where I would have to alter the design, I could do it right from my code rather than having to go back through the design work itself.

A preview of the visual programming environment (storyboard) used to make Brainbean

I remember one part of the app—the timer that counts down from 60 seconds for every game—initially started as a basic text counter.

It seemed too bland and “sharp” for such a fun, creative game. So I came up with a way to include a circle that would empty as time progressed. I ended up having to go back through lines and lines of code to incorporate the timer into correctly into each game. It turned out great I think.

This small timer animation was a late improvement in the development process

Those little tweaks—the little details—were part of the fun, part of why the project was my project. If I didn’t like something, sure it meant more work to change, but it also meant I could change it without having to wade through someone else’s approval or argue my point to a larger group.

Weeknights and weekends

For the next seven months I spent any free-time I had outside of my regular day job designing and programming Brainbean.

Only on the rare weekend would I step away from the computer to catch a movie with friends or have dinner with family. Relationships became strained, my stress levels fluctuated immensely, Brainbean was my life for a very long while.

After five or six months into the project I remember feeling completely overwhelmed with how much was left to do.

I’d finish the development on one or two of the mini games only to remember there were six more ahead. Any time I would program one small feature, I would realize that it had broken twelve others. The design hardly ever felt right. It seemed like certain details in the way screens came into view were missing, or how seemingly empty animations appeared.

I would come home at the end of a long day of work and stare at my laptop, afraid that I’d spend the remaining hours of energy doing only more daunting work.

My greatest fear was, of course, that it would all be for not. That the hours and hours and months of work would add up to either a project that simply didn’t work, or one that nobody noticed. A failure.

A note made in my notebook one week during the project

An app design can always be changed, the objective can be re-evaluated if necessary. If the project fails I can go back and change a few things then try again, but the time I put into the project I could never get back. That thought constantly ran through my mind as the months progressed and the project grew.

At one point I felt so distraught over the idea that Brainbean might be such a tremendous failure that I wrote a blog post about the feeling. Aptly titled: “I’m afraid of what this may become.” In that post I wrote:

“I’m so afraid that this really will be a complete waste of my time and talents. I’ve already come so far and what if this doesn’t work at the end? What if nobody cares about the app when I finally finish?”

Ultimately I decided that my reason for working on the project was to see whether or not I could do it. My goal was never to make a hit app or make a million dollars. I had to keep falling-back to my original question: what if I was the one to create this app?

When I wasn’t feeling exhausted from the endless work in front of me—or afraid at the potential failure of the app—I had to battle with the project scope.

I knew I wanted the app to be simple, so children could enjoy it without being too overwhelmed, but it had to be a rewarding experience to play as well; both for children and adults.

A page dedicated to possible sticker awards within Brainbean. The idea was quickly scrapped to keep the app elegant

One potential feature I was considering adding to Brainbean at the beginning of the project was a type of badge or sticker feature. Players could unlock “stickers” by completing certain challenges within each game.

For example: if you explore the various environment of a particular game and uncover a hidden feature, you would be awarded with an “explorer”-type sticker. Players could see which stickers they’ve collected and silhouettes of ones they still need to work towards.

Eventually I decided to scrap the idea, as it wasn’t part of the core objective I had envisioned before, and the complexity of figuring out each game with limited guidance was enough to keep players at least initially busy and entertained (they didn’t need the added complexity of a sticker-award system).

Though I may go back and add this as a core part of Brainbean now that it’s been completed and players are getting used to how it works. Other features that were scrapped include: a global, public score board, the ability to tweet or share your scores on Facebook, and a few other un-lockable features like endless gameplay mode and longer/shorter challenges.

The importance of using a support network

One of the crucial elements that would keep me going when I felt like giving up while working on Brainbean was honest feedback, primarily from my family and close friends.

I have a few nieces, one of which is 8 years-old and the ideal audience for what I was hoping Brainbean would become. On the rare Sunday, I would drive an hour down to have dinner with my neice’s family, I would get out my iPad mini and load up the latest build of Brainbean for her to play.

I’d hand her the iPad and for the next two hours she would play with the app, occasionally shouting “Look at my new high score!” or “I figured out how to beat this!”

One of the best parts of letting children test your work is that they’re always brutally honest.

If she didn’t like a feature or was confused by something, she would say so, point-blank to my face. I feel that her honest feedback really helped fine-tune Brainbean.

Some of the final screens from within Brainbean

Her enthusiasm and the continued feedback from family and friends of how the app was looking, or how the idea seemed to be developing, kept me energized just enough to add a new feature or fix a prominent bug. Just enough to keep going.

With support from my family and the drive to see the project through—if only to see what it could become—I spent the full seven months working on the app during my weeknights and weekends.

Toward the end of the app I was able to get in contact with an Apple representative who was familiar with my name due to the success of my previous apps and my work with large companies such as Adobe.

Example of a parental gate, added at the last minute to Brainbean

The Apple rep gave me some last-minute feedback on how to improve the app (including the importance of adding what Apple calls “Parental gates,” which ensure children can’t make purchases willy-nilly). I was also told that my months of work on polishing the app would pay-off, as Apple was inclined to feature Brainbean on launch day.

For iPad and iPhone developers, being featured in the App Store is essential for success. With those words of influence, I made the hard push to fix the remaining bugs in the app, prepare a website and a press kit for publishers, and pressed the button that read “Submit to App Store.”

While waiting for the app to be reviewed and published, I spent a week designing and animating a small promotional video that I hoped would spark interest in people to download the app.

Like the app itself, being able to take an idea and turn it into something real (even though I’m not an animator or videographer) was enticing. The end result turned out fairly well, I think.

Brainbean promotional video, entirely made by me

What the project finally became

On launch day, June 5th 2014, I gathered with a few close friends to celebrate. We drank, played with the app, and watched the progress of the app as it climbed the app store rankings.

When the celebrations first began that night, Brainbean sat at #62 out of the top 200 apps in the US iPad App Store. That’s out of all categories combined. That’s a tremendous feat for any app.

Then, within an hour, the app reached the top 40. In another few hours it entered the top 20. The next morning Brainbean had reached the #3 position in the top apps in the App Store, where it sat comfortably for the entire weekend and then some.

After months of diligently working on Brainbean, after struggling to motivate myself to sit in front of a computer for hours on end, after consistently hoping that the idea was worthwhile, I had not only succeeded in completing the project, but in launching to see it become a huge success.

The statistics of a top 3 iPad app

Brainbean is a free app. There are eight total challenges within Brainbean, four of which are free, the others can be unlocked for a small price of $0.99 each or $2.99 all together.

I chose this approach with the app because I figured there would need to be some way for me to get back the value of the time invested into the app.

Example of the purchase screen within Brainbean

I have a number of paid apps out in the store and they do fairly well, but to get the most exposure and (hopefully) reap the most rewards, I decided to make Brainbean free with in app purchases available to those who want more options. A win-win as far as I could tell.

In terms of financial rewards, only time will tell whether the hours invested are paid back fairly. Because the in app purchases can be unlocked at any time, it’s likely that many players won’t be paying for some time, meaning the value Brainbean provides to me financially will be decent for some time into the foreseeable future.

In addition to financial rewards, there’s the reward of knowing that hundreds of thousands of people around the world have seen my work.

Within Brainbean I’ve built a custom analytics tracking system which showed me the thousand-or-so people that were downloading the app every minute when it first launched.

TUAW (a popular Apple/tech blog) featured Brainbean as their app of the week. A local startup blog, Beehive Startups, shared my story. Searching Google for mentions of the app yields a surprising amount of teachers who are using the app in their classroom, children who review the app on YouTube, and even a video blogger who touts his ability to hack the scoring system in the app by looking at part of the code.

If there could ever be a prime example of what triumph looks like for an independent developer, this was it.

Now, nearly a month after Brainbean was released into the app store, things have shifted.

Falling from the top spot

Since launch, Brainbean has slowly sunk out of the top 200 apps. Very few publishers have contacted me for information on the app and its success. The amount of money the app is bringing in is still fairly high, but dramatically lower than what I was hoping (or expecting) it to be.

Brainbean downloads since launch, with steady decline

This is typical for apps that aren’t backed by multi-million dollar advertising campaigns or big blockbuster names like Angry Birds.

Apps are a lot like hot air balloons: they can rise quickly and then slowly sink down until they’re given more fuel. In the Apple App Store, that fuel is often promotion in the form of editor’s picks or other features.

Illustration by Kevin Cornell for A List Apart http://alistapart.com/article/a-moment-to-breathe

Part of why Brainbean has fallen in the rankings is entirely my fault.

I released an update that essentially broke two of the free games and one of the paid ones. I quickly submitted a fix, but the damage was done and countless 1-star reviews have rolled in. There’s little I can do to repair that damage, there’s no getting those users back. But I digress.

At this point in the story I’m happy to say the app has been a success. My portfolio now proudly includes a top 3 iPad app.

Many developers never see this type of traction with their work. They launch and maybe get 100 downloads, 1,000 if they’re lucky. To many developers, 1,000 downloads in a year is pretty nice. I’m fortunate to have gotten this far.

I could have stopped working on Brainbean when I had the idea. I could have come up with the name and then ended it there. When I had sketched out a few of the original designs for the app I could have stopped there, realizing just how much work would have to go into making it a reality. Of course, I could have stopped when I started doubting whether the project would be worthwhile or not.

But I didn’t.

I knew I had to see this all the way through. Because that’s what produces the best rewards. Making, destorying, tinkering, seeing what can become of our ideas and learning from the experience.

If you have an idea (for an app, or anything) I hope this was at least somewhat insightful into what you have to look forward to. Pursue your ideas, pursue them until they’re either complete (as you first envisioned them) or until you have to give up.

Go. Start now.

--

--