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.

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.

Design Problems in Global Development

original
Women in Sudan. Courtesy: UNDP

Alex Dehgan’s new Coursera offering on the Innovation and Design for Global Development has led me to see that many of the challenges in creating effective international development efforts are very similar to the challenges of launching successful technology products. Both are design problems, and there are numerous examples of failed efforts in both domains. Let’s explore two cases, both involving the use of products to solve for development challenges.

PlayPump

PlayPump was built a water pump for African countries. It was designed by a South African entrepreneur as a merry-go-round connected to a ground water pump. As children played on the PlayPump, water was pumped from the ground into an elevated water tank. The children had fun. The village got water. The walls of the water tank were even used for revenue generating billboard advertising.

PlayPump generated a lot of enthusiasm. Many donors got involved, including Laura Bush–the then first lady of the United States. Soon, PlayPump expanded to many African countries.

“A real disaster”

In 2010, Frontline produced a follow-up report and summarize a study of the PlayPump.

A report commissioned by the Mozambique government on the PlayPump that was never released, cited… [many] problems… – women finding it difficult to operate; pumps out of commission for up to 17 months; children not playing as expected on the merry-go-rounds, and maintenance, “a real disaster,” the report said.

Soccket

Tiny Spark wrote a great story on the Soccket, so I’ll quote them here:

It’s a story about a pair of young Harvard graduates who said it was possible to harness the world’s love for soccer to generate electricity for poor kids.  They called their product the Soccket, formed a for-profit company, and began selling it to corporations and foundations in the U.S. and around the world. Co-founder Jessica Matthews launched the Soccket back in 2008, saying she had helped develop a soccer ball that converts kinetic energy into power. Just a half hour of play would generate three hours of light.

“The third day, the light went out”

The balls didn’t work in real-life conditions.

Failure to Understand the User

The failure of many development programs can be traced to a lack of true understanding of their targeted users. In the cases of the PlayPump and Soccket, solutions were developed by well-meaning outside agents who did not understand the full problem space that their products were intended to work in. More specifically, they did not appreciate the complex layers of needs, wants, and constraints that define their users’ lives and environments.

PlayPump solved for how water can be pumped while kids play. Soccket solved for how kinetic energy of soccer balls can be used to generate electricity. The result was that while the products did solve for their use-cases (quality problems not withstanding), they weren’t actually useful in the broader context of their users’ lives. In other words, the products were not designed well.

So how can products be designed better? How does a product designer understand the multitudes of needs, wants, and constraints, both explicit and latent, of their target users? Well, I think a design process centered around users is the only real way to design good products.

Human Centered Design

Here’s what IDEO says about the Human Centered Design technique.

It’s a process that starts with the people you’re designing for and ends with new solutions that are tailor made to suit their needs. Human-centered design is all about building a deep empathy with the people you’re designing for; generating tons of ideas; building a bunch of prototypes; sharing what you’ve made with the people you’re designing for; and eventually putting your innovative new solution out in the world.

We will explore HCD and Design Thinking further in future blogs.