I released Writing Aid to the App Store today. Due to the glaring conflicts of interest in reviewing my own app for 9to5Mac or even having my colleagues review it, I thought instead I’d give some insight into the creative and development process behind the app. If you are looking for a more traditional review, please check out these writeups over at MacStories, Beautiful Pixels and iMore.

As a finished product, Writing Aid is best described as a dictionary app that also works in reverse. However, it didn’t start that way. For a while, I have been annoyed by the offerings on the store. Most apps are bogged down with gimmicky extras like ‘Word of the Day’ and such and many have been abandoned by their owners (which means they aren’t updated for iOS 7 either). When I’m writing, I don’t want distractions. I want to be able to type a word in a box and get a definition.

So, this is what I had in mind initially. A blank screen with a search box. This driving vision is how I think about creating an app from a blank slate. Everything else revolves around this unique selling point. If someone asked me for advice on building an app, this is what I would say: Get one key focus locked down in your mind and work to make that happen. Through development, I keep checking that I haven’t lost track of this goal. To make an analogy to magic, you start with the effect then work backwards to find a methodology.

However, I knew instinctively that a blank-screen-and-a-text-box wouldn’t be enough on its own. The App Store is too crowded to succeed on simplicity alone. You need a decent set of features. I knew that adding features whilst sticking to my simple vision was going to be hard, however.

I brainstormed for a while about what I could do. Adding synonyms felt logical. Most apps on the store today make you go to a completely new screen to see synonyms, usually through a tab interface. But a tab-bar was not going to fit my vision of a single-screened app. I wanted to put the synonyms on the same screen. Initially, I just put a list of related words below the definition. This kept everything on one screen but I realized I had solved one problem by creating another: this ‘one screen’ was now really tall.

I wasn’t gaining much convenience by making users scroll more. This left the app in limbo on my Mac for a few days because I couldn’t think how to proceed. Then, one day, on the news I saw the ticker running along the bottom of the video. Somehow, this clicked the developer part of my brain into gear and I knew I could use this for my app. iOS 6 had a great implementation of a ticker view with the Stocks widget in Notification Center. I tried to match Apple’s behavior as closely as possible.

I think the result was amazing. The view is small, but fits its purpose. You can see about three synonyms at once but the fact that it autoscrolls compensates for this. Users can just passively watch suggestions pass by, but vitally it doesn’t interrupt application flow. The synonyms view doesn’t get in the way if you are just looking for definitions — it can be simply overlooked.

The headline feature of Writing Aid, the reverse lookup, was a late inclusion. This next bit is going to sound cheesy — I apologize. As I was scrolling the synonyms view, it dawned on me that a list of synonyms is just words that share a meaning. If you can make the definitions database searchable, you only need one hit to get a complete list of synonyms (as once you find one match, you can just do a synonyms lookup on that hit word to complete a set). For now, I’m not handling this backend stack myself but this is something I’m considering for the future.

I prefer handling the client-side too …. I enjoy creating front-end stuff much more. This includes the bouncing animation for the word list. Taking inspiration from the Siri ‘Some things you can ask me’ screen, words falls from the top of the screen, overshoot and then rest in place. Springy animations look great and — with iOS 7 — they are really easy to code too. I spent many hours tweaking the damping and velocities to perfect it. This animation turns a bland list of words into something interactive — you want to touch it. It adds playfulness to something that could be very dry.

All that’s left is finalizing the color scheme and the fonts. I say that tongue-in-cheek of course. This process isn’t easy, but it’s more trial and error than anything in my opinion. I experimented with different styles until I got it right. I ended up using a deep purple color and ‘Gurmukhi’ as the body font (as is standard with iOS, the UI is set in Helvetica). My direction with color was something not blue and not orange; purple seemed reasonable. Typesetters will probably hate that choice of typography — I’ll admit I don’t know what’s good and what’s not. I chose what I thought was readable and looked good.

dictionary-app-icons

Some of the icons of Writing Aid’s competition.

The final stage is icon design. This is how I always work … settle on a name at the start and create an icon at the end. The icon should embody the app, not the other way around. I am a terrible artist, so I worked with Olli Wiegner on the asset design. I briefed Olli to focus on the purple and avoid magnifying glasses at all costs. Following through the purple was vital; tint colors are the main way apps can distinguish themselves in iOS 7. I didn’t want magnifying glasses because that icon has been used to death across the dictionary apps already on the Store.

512

Olli initially had the idea to combine the W and A into one stroke. I liked the idea of combining the diagonal lines but I was worried people wouldn’t get it. If it wasn’t explained to you that it was a combination of the two letters, it just looked like a random squiggle. I suggested adding a gap and it resulted in the optically deceptive icon you see in the shipping app. If you come at the icon from the right, the W is dominant. If you come from the left side, the A is recognized most clearly. It’s a cool effect. The separation looks a bit silly when big but this is necessary to make the icon look good when scaled down on users’ Home Screens. If it wasn’t that wide, it would be incomprehensible to the eye when small.

I submitted the build to the App Store on the 16th of February and it got approved on the 23rd. Today, it’s available on the App Store for everyone to try. I hope you like it. I’ve put some promo codes in the comments to get the app for free, if you’re fast.

You can find more information about the app here. Writing Aid for iPhone is available on the App Store for 99¢.

[Ed. Note: We discussed how best to handle an app by one of our writers. There is no way we could objectively review it so we decided to give a background on its creation to give developers and folks considering development a “behind the scenes” view of the process of creating an app.]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

7 Responses to “The making of Writing Aid — behind the scenes of app development”

  1. Here’s some promo codes for Writing Aid — they’ll go quick:

    K4YWTM77HT4T
    AAWKXEX3FA94
    NR7PF3WF6L6Y
    NF74JTR7F74P
    NA4W3XT4NX3R
    RTWHH64RJAAH
    FRPL96P9T3TL
    MJXHEEHAXKMW
    AHAWYPT69743
    AAY9NYYJ4PYN

    Like

  2. Where are the promo codes. Hell, I already bought the app! :-D

    Like

  3. Oh, it showed up after leaving the comment :-(

    Like

  4. I’m impressed! I works VERY well and I’m sure to find uses for it. Thank you! :-)

    Like

  5. Looks like a great idea but it also looks like an internet connection is required to use the app. Is that true?

    Like

  6. Daniel Cox says:

    Great app!! Bought it! :)

    Like

  7. Great concept Ben, this is one of these things that you don’t think about yet face it quite often when writing. I am surprised that no one came up with this concept before.
    Also thanks for sharing the development process.
    Have you considered making an international version that also works with other languages and foreign dictionaries?

    Like