UI/UX Toolkit for Product Managers

AKA: How I built an app in two weeks

In early 2016, I up-leveled my interest in iOS app development and completed a Udacity Nanodegree certificate in iOS Development. It was a rigorous but fruitful four-month journey. I recommend the program to all product managers (or future developers) who want to understand modern app development better.

Here, I will tell you how I built the Hungry Baby app. It helps busy parents create easy, nutritious, and varied meal plans for their baby.

App demo: http://app.shanrao.org/HungryBaby

This is what it looks like.

Github Repository: https://github.com/qwertyshan/HungryBaby

Now, here are the key resources that I found to be most useful in creating this app. In my own research and creation process, I went down a lot of paths that hit dead ends. In the following list, I am trimming the paths down to the fruitful ones.

Design

Process:

Apple’s WWDC video “Prototyping: Fake It Till You Make It” taught me how to prototype quickly and easily.

https://developer.apple.com/videos/play/wwdc2014/223/

Inspiration:

I learned a lot about common design patterns by studying other apps.

http://inspired-ui.com

Templates:

Keynotopia is fantastic and easy to use! I got the $99 pack and will use it to design all of my future apps.

http://keynotopia.com

Icons:

This was the best site for free, high-quality icons. Good icons open up so many design possibilities!

https://icons8.com

Colors:

I had to learn about colors.

http://www.rocket-design.fr/color-template/

Prototyping:

I created a prototype of my app in Keynote without a single line of code. The results were awesome! All of the screenshots in the following showcase page were made in Keynote. You won’t know it by looking at it.

http://app.shanrao.org/HungryBaby

Build

Backend Processing:

Google’s Firebase is easy and free (for low utilization).

https://www.firebase.com

Backend Data:

Valid JSONs can be tricky to create. This site made it easy. Once I had my data in a JSON, I could upload it to Firebase and my backend application was ready!

http://www.jsoneditoronline.org

File Hosting:

I used Firebase to host my static image files.

iOS Libraries:

I learned how to use CocoaPods to install the Firebase plugin. It was tremendously useful (and fairly easy).

https://www.raywenderlich.com/97014/use-cocoapods-with-swift

iOS Coding:

Of course, this was the most time-consuming part: actually writing the code. The following sites helped the most.

Overall, it took about 80 hours of work (spread over a month) to design and develop the app. It was fun and brought me up to speed with modern mobile design and development techniques.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s