05 Jul

12 Step Notebook iOS App Process: Ideas, Design, Development and Release to the App Store

This is an article on a recent project of mine. My intention is to detail as much of the iOS app process as I can, like I did with Mocle. Special thanks to Matt for letting me tell the story.

The Idea

I typically have two initial meetings with a prospective client.  The first is a meet and greet, with a little bit of background on my portfolio and capabilities.  What’s on my website, but in the flesh.  The prospective client presents their idea and end goal.  I first met Matt and his referring client of mine for lunch at a coffee shop in between our workplaces.  He explained the impact of Alcoholics Anonymous in his life, and produced from his pocket The Big Book, the organization’s main publication.  His idea was simple and smart.  Put that into an app.

Now, as a former attorney, I always think of legality first.  I explained to Matt that AA likely owns everything in that book, and reproducing it in a popular app would attract attention from their legal team.  Then why, Matt asked, was a non-AA app in the store able to get thousands, maybe tens of thousands, of downloads with that same content?  We agreed to investigate the copyright status of The Big Book independently and meet again, then joked around for a bit before realizing that we only had a few minutes until respective work meetings, and had forgotten to actually eat.

A week or two later, we met again, this time at a coffee shop in Grand Central Station, my favorite landmark in New York City.  After catching up, he told me his discovery – due to a legal oversight, the 2nd edition of The Big Book is in the public domain, and although the text was several decades old, subsequent versions had only made minor edits.  In addition to that impressive find, Matt had a business plan ready.  He’d charge less than a competing app, and pledge to give some of the proceeds back to AA, as a thank you to the organization for impacting his life in such a positive way.  He’s been sober over ten years, and through his hard work and determination, has experienced personal and professional success.

So what features did he want?  I recounted the tale of Apple’s rejection of an early app of mine on the grounds that it was only text.  We’d need to include more than just words to get to market.  He urged me to take a look at his competition.

I downloaded it. 

Its antiquated design.  Cursive.  Clouds.  Shadowed, dated fonts.  Blurry icons.  Given the speed at which iOS UI evolves, it was prehistoric.  I knew that I could do better, so we hammered out a feature set.  First, we’d have a note-taking feature.  Turn the highlighter digital.  Make the searching faster than the hard copy’s index.  And add in contacts, to have a quick list of people most important to users in the context of recovery.  Just like jotting down a name and number in the back pages of The Big Book.  I explained how I might modernize the look and feel, and promised to send a proposal.  The cost to Matt would be on the low end of my price range, because the app would be self-contained.  We wouldn’t need to keep the content up-to-date with a database in the cloud.

The Design

After our meeting, I sent Matt a questionnaire.  What colors did he prefer?  Any favorite fonts?  Were there existing apps on Pttrns, both related and unrelated, that caught his eye as being particularly nicely-designed?

He got back to me quickly, proposing sand and green colors, with a modern notebook as inspiration.  Clean, flat, simple, modern interfaces, with basic system fonts with quick navigation.  Here’s a sampling of his thoughts.

12snb-inspiration-general-design-1Screens of Lemon Wallet and Uniqlo Recipe from pttrns.com

Matt didn’t have an interest in an Android version, at least not initially.  This freed me to stick to native iOS components.  Apple loves their tab bar at the bottom of the screen, used to navigate sections, and I’d noticed that it was in these examples.  His app’s handful of features could be tied to bar buttons.

12snb-inspiration-general-design-2Screens of Simple, Uniqlo Recipe, and Nextdoor from pttrns.com

The tan texture of the Simple app could be flattened, and the mint greens could be used as an accent color.  I looked at several modern notebooks, and quickly ruled out elaborate cursive.  Futura, a favorite font of my wife’s, seemed reverent enough, and available through Apple’s SDK.  I picked bold for a more serious slant.  The gravity of the font might come from Stanley Kubrick’s titles – I’m not quite sure. I also picked Arial for the headings.




His example of functionality made it clear that we’d need a Settings section in the app.  Here I borrowed from Apple’s iBooks app.  For easier reading, users would be able to change the text’s background colors, fonts, and sizes.


Finally, I needed a name and icon.  I wanted to stick to Matt’s design inspiration – a notebook.  12 Step Notebook.  And the icon should look like a little book, in tan and green.  It took a few tries to get right, and even now I’m not entirely satisfied with my work.  The binding doesn’t look right – does it open from the top?  And given the perspective, the mint bookmark would fall off the edge and appear angular.  But, even with those flaws, I’m proud of how it turned out, given my inexperience with Photoshop.


The Pitch

I sent Matt my designs a week or two later, and we met to discuss the proposal on a Sunday.  I was able to convince him to come to a favorite Brooklyn coffee spot – Hungry Ghost – near my apartment, in the same neighborhood where he’d purchased a place.  They serve Stumptown there, a loaded cold brew that always powers me through long days of coding.

As I always do, I provided a flat fee to develop exactly what was in the Powerpoint document.  A couple of extra options – landscape support and taking the app universal – were priced out as well, in case he wanted those.  I’m always asked by people what the costs of apps run.  Without getting into too much detail, I typically charge between $3,000 and $12,000.  As we’d decided earlier, the app could be self-contained (i.e., no cloud service or synching) but had a lot of manual work – the transcription of the text – involved.  So Matt probably wouldn’t mind if I said that it was toward the low end of the spectrum.

Matt had a few ideas for color changes, but other than that was totally on board with both of the extras and agreed to pay around 30% up front.  I offered to take him to a Nets game down the street with his friend and referring client, Cassie (the subject of an earlier post), and he offered to bring the deposit to the arena.  It’s a funny thing – as a kid, I remember seeing businessmen at baseball games and it always seemed extravagant.  But it makes sense now.  For a fraction of what a client pays you, you can sit in great seats, bond, give a token of your appreciation, and just hang with someone that you consider a new friend.  The Nets roared back in the final minutes.  High-fives were given, to other fans, ushers and within the Smith & Sons family.

The Development

The first challenge that I encountered was practical.  How would I get the book’s words into the app?  In iOS, there are several ways to enter text and display it.  PDFs were out of the question because the content had to be resized and recolored in several fonts.  Simple text would be tough because page number placement was crucial.  AA members often need to refer to a particular page.  So I settled on HTML files.  Apple’s SDK can convert HTML to strings of text with assigned attributes.

Taking what’s available online as the text of the 2nd edition and converting it into the HTML took a lot of copying and pasting, and using find and replace with regular expressions.  Searching would be slow, but I found a way to progressively present search results as the app went through the text.  With hundreds of pages, on a newer iPhone, the app only takes a few seconds to return even the most popular terms.

Contacts and Settings were straightforward enough, and adapting for other displays went relatively smoothly with auto-layout and size classes.  For notes and annotations, I used an open source library with a flexible license from the makers of Slack.

After wrapping the bulk of development, Matt wisely wanted to proofread every word of the thing.  I’m glad he did.  He picked up the primary source, a hard copy of the 2nd edition of The Big Book, off eBay.  His attention to detail was remarkable.  He pointed out the differences between hyphens and dashes throughout the text.  I cleaned up the chapters, and we were ready for submission.

The Release

Prior to releasing, Matt had some homework.  He needed to form an entity, and sign up for an Apple developer enterprise account.  Sounds easy but it’s frustrated several clients, so a note to future app owners: if you plan to release an app, you’ll want to get started on this as soon as possible.  After jumping through the hoops, Matador Enterprises LLC was ready and granted me access to their accounts.

We agreed to release in two steps.  First, I’d upload a beta version of 1.0 to Apple’s TestFlight.  That would allow Matt to take a look at what would be available.  It met his expectations, and we exchanged the source code for the rest of the payment.  After providing the metadata, Matt flipped the switch to release, and submitted to Apple.  Two weeks later we went live in the App Store!

The Future

This project went even better than I’d hoped.  It’ll be fun to see how Matt and his team works to market the app, which will appeal to a subset of users that is relatively-easy to locate on messageboards and blogs.  Also, I have high hopes for app components on the Apple Watch.  I’ll save both of these for future posts.

Thanks to Matt for being a great client, and thanks for reading. If you have any feedback on this post, or would like to discuss your idea, contact me anytime at drew@smithandsonsapps.com.