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 every single week.

This is what it looks like.

This slideshow requires JavaScript.

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