How to go from an App idea to an App in the App Store

If you are curious about the process of taking an app from idea to the App Store keep reading. I'm going to outline the journey I took with creating The Shopping List App. This of course is only 1 of an infinite amount of ways of doing it.

From a sketch to an app on the App Store.


The Idea

The first thing and start of every project is always going to be an idea. It could be yours or it could be someone else's. Nevertheless you need an idea.

So here I am, having just spent close to a year obtaining the necessary skills to develop an iOS app wondering what to do next. In parallel to obtaining said skills I had kept a note in the iPhone Notes app with a whole bunch of ideas for apps, some small and some big. One of them was a slight pain point that both my girlfriend and I were encountering. We couldn't find a good shopping list app that was simple and could be used to track items needed across several stores (this was because of where we were living at the time). We had looked at many different apps on the App Store but they all had either a complex UI or too many bells and whistles for what we were looking for. 

This is how it begun. I wanted to solve a problem. A super simple but aesthetically pleasing shopping list app. The Shopping List App

Sketching Possible UI

Now comes the creative part. I set out to see how many different UIs I could come up with. For inspiration I looked at a wide range of apps on the App Store to see what other developers had come up with. At this phase I could already get a rough idea of what types of UI were making sense to me.

I sketched out 9 UI using a pencil and paper.

Prototyping the UI

The exciting followup to sketching! Now it was time to prototype each UI sketch I had come up with. So off I go with my ultra trusted design app Sketch. This part of the process is quite a lot of fun.

UI Prototypes done in Sketch. (Click on image to enlarge)

Icon Design done in Sketch. Various iterations. (Click on image to enlarge)

Once I had all the prototypes rendered digitally I could now see how they looked on an actual iPhone. At the beginning I used a website Flinto (I found that name a fun coincidence). This site allowed me to put the renders up and do some basic linking of the images together to create the effect of an actual real app moving from screen to screen when tapping on areas of the image. It was immensely helpful having the ability to feel of how an app UX felt. In the later stages I used Sketch's in-built mirror mode so that I could instantly see changes done to the rendered image on the iPhone.

UI Feedback

The magic of feedback. I love feedback. So, now I was at the stage of having all these UI prototypes running on my iPhone, an idea of which UI worked the best was already building up in my mind after all that prototyping. However, I needed to have real people try out these prototypes so as to get feedback. Why? Because when you are designing and working on something for so long you become intimate with exactly how it should work and most times overlook something that could be done much better. 

After gathering up the feedback this is the resulting Final Version of the prototype. Candidate Version.

Final UI Prototype after applying feedback. (Click on image to enlarge)

Programming

The scary part! Just kidding. This stage is by far the most time consuming, at least it was for me. To have an idea of how the logic of the app would work I decided to try and draw out a Class UML Diagram. I had never done one of these before so It's likely that it isn't technically correct but it was enough for me to get an idea of where to start.

Class UML Diagram. (Click on image to enlarge)

Class UML Diagram. (Click on image to enlarge)

Doing this UML Diagram was extremely helpful in figuring out the key components to the app. Especially when it came to workflows between each class. Having a rough overview lets you get into coding without being lost as to where to start.

Not much to say about this next part of the development. I used Xcode and just kept writing code and testing it in the simulator and on my iPhone. What I found interesting is that even though I had what I thought was a solid foundation in Swift, Xcode & Cocoa Touch, in reality it's as if I had to relearn everything from scratch. It's very different following tutorials and playing around in code to actually developing an app from just an idea (shocking I know!). 

Xcode with the final UI in Storboard. (Click on image to enlarge)

Testing with TestFlight

The end is close!... well... not yet. So recapping. I had an idea, sketched UI concepts, then I created digital renders, went out to get feedback on said renders and got to a final UI Candidate. So here I am, I've programmed a functioning version 1.0. Time to see how this app performs in the real world with real people. 

Setting up TestFlight was quite easy. Log into iTunesConnect and fill out the necessary information. Add willing beta testers via their email address to the External Testers part of TestFlight. Build and archive the app and upload it to iTunes Connect. Submit app for beta review. Cross fingers and wait!

Beta Tester Feedback

Remember what I said before about loving feedback? Just as with the process of getting to the final UI Candidate, feedback is essential. I had gotten so used to my way of thinking that I'd completely overlooked quite a cumbersome aspect of the app. To make it worse it was the most important aspect, it was the way you entered new items in a list. The feedback was pretty unanimous across all the beta testers that this was an issue. 

I can't stress enough just how important it is to get feedback at every step of the way. There are major things you will miss if you don't go out and look for feedback. It's very easy to get caught up in your own personal way of thinking and develop a sort of tunnel vision. It's as if your brain becomes oblivious to parts of the workflow.

Implementing changes from Beta Feedback

Now knowing where the areas with potential for improvements were it's just a question of implementing/fixing workflows and features. 

So after all is said and done it's time for the final major step...

Submitting the Final Build

Exciting! This story is nearing its end, however there are still some crucial things to get right before submitting the app. Here are the remaining tasks one needs to do:

  • Capture good looking screenshots for every screen size the app supports (in my case 3,5", 4", 4,7" and 5,5"). To do this part I created some code to populate the app with placeholder data and then used the Xcode Simulator to save screenshots.
  • Write an App Description.
  • Upload an App Icon.
  • Fill out some more information in iTunes Connect like app keywords and a few other formalities like support address etc.

So with all that done, time to submit! ... and... 

Write here...

Oh no! What had happened is that I had forgotten to submit the In-App Purchases along side the final release build. So I quickly created a new build and submitted the In-App Purchases with said build for review.

Phew. That is much better!


Release App on App Store

January 13th 2016 - App released

So here our journey ends. Well at least the journey for version 1.0. The journey for The Shopping List App has truly just begun. This post is a rough idea of how you could go about developing your own app.

The most important points I'd like to outline are:

  • Have a clear idea of what your app is is suppose to do and why.
  • Sketch up different ideas for the UI/UX to get a better sense of focus.
  • Mock up digital renders of the UI and get people to test it out. Observe their reactions.
  • Outline the major components of the app before starting to code to know exactly how and where to start. Try to come up with classes, core methods and work flows. Even if these ultimately change during development it's good to have that foundation.
  • Feedback, feedback & even more feedback. Use TestFlight or any other method to allow fresh eyes to look at the app in ways you hadn't thought about.
  • Make sure to have all of the information in iTunes Connect double, triple checked. Missing out key things could really set you back as the review times can be quite long.

I've learned a ton on this journey and hope that you, the reader, have gotten something from it!