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.

What is Digital Product Design?

What is Digital Product Design? by Paul DeVay

Product Design
An imprecise, iterative process to solve a functional problem with a formal solution.

 

prod-design
The spectrum of design tasks. Integration where Product Management and Development overlap with design are key to being “design-minded”.

 

design-dev-process
Integrating the design process into the development process.

 

Sushi-Driven Design

Jiro Dreams of Sushi is a fantastic documentary about the 85-year-old sushi master Jiro Ono. His 10-seat sushi-only restaurant in a Tokyo subway station is a Michelin three-star restaurant.

I love this movie as a meditation on work, design, and simplicity. It’s fascinating to see how finely honed craftsmanship, deep knowledge of ingredients and preparation methods, and a touch of myth-making can result in an incredible culinary experience. It’s a product design inspiration.

 

Here are some of my favorite quotes from the movie.

Simplicity

If you were to sum up Jiro’s sushi in a nutshell: Ultimate simplicity leads to purity.

Qualities of a Great Chef

A great chef has the following 5 attributes: First, they take their work very seriously and consistently perform on the highest level. Second, they aspire to improve their skills. Third is cleanliness. If the restaurant doesn’t feel clean, the food isn’t going to taste good. The fourth attribute is impatience. They are not prone to collaboration. They’re stubborn and insist on having things their own way. What ties these attributes together is passion. That’s what makes a great chef.

How to Make Delicious Food

In order to make delicious food you must eat delicious food. The quality of ingredients is important, but one must develop a palate capable of discerning good and bad.  Without good taste, you can’t make good food.  If your sense of taste is lower than that of the customers how will you impress them?

 

Driving Innovation as a Product Manager

A product leader’s job is to (1) develop innovative products that are (2) difficult for competitors to copy and (3) produce good profit margins. Represented as an equation:

(Innovation + Competitiveness + Profit) x Product = Success

In this article, let’s consider the first component of that equation: Innovation.

Innovation refers to the creation of novel ideas and development of products based on those ideas. It is a creative endeavor. In product management, I often encounter two models of how PMs are thought to drive innovation.

  1. The lone genius approach: Product manager develops innovative ideas on his own and hands the ideas over to development teams who execute on them.
  2. The creative leadership approach: Product manager leads a cross-functional team for creativity; identifying goals, setting constraints, and creating space for a collaborative creative endeavor.

The lone genius is a myth. Studying the lives of Thomas Edison, Henry Ford, Steve Jobs, Elon Musk, et al, in sufficient detail quickly reveals that they weren’t lone geniuses and did not develop their product concepts by themselves. They were all creative leaders who led their organizations through highly collaborative design journeys. While the public perception of their genius might have helped their companies’ marketing campaigns, working product managers must dispel themselves of the dangerous illusion that the products of General Electric, Ford Motor Company, Apple, or Tesla were anything but the result of thousands of people working together in a creative process, guided by creative leadership.

So how does a product leader succeed with the creative leadership approach? Some answers can be found in the output of a Harvard Business School colloquium held in 2008. The Harvard Business Review article Creativity and the Role of the Leader (by Teresa Amabile and Mukti Khaire) presents the following key insights.

Drawing on the Right Minds

The first priority of leadership is to engage the right people, at the right times, to the right degree in creative work. That engagement starts when the leader recasts the role of employees. Rather than simply roll up their sleeves and execute top-down strategy, employees must contribute imagination. As Cook put it, “Traditional management prioritizes projects and assigns people to them. But increasingly, managers are not the source of the idea.”

Tap ideas from all ranks.

[Google’s] founders tracked the progress of ideas that they had backed versus ideas that had been executed in the ranks without support from above, and discovered a higher success rate in the latter category.

Encourage and enable collaboration.

[Researcher] looked at the problem of how to achieve collaboration on radical innovations; when no obvious antecedent exists, it’s difficult for a vision to be shared. His analysis of six award-winning products (from three quite different industries) showed how product development teams used not only prototypes but also metaphors, analogies, and stories to coordinate their thinking.

Open the organization to diverse perspectives.

innovation is more likely when people of different disciplines, backgrounds, and areas of expertise share their thinking.

Bringing Process to Bear—Carefully

“If there is one device that has destroyed more innovation than any other, it is Six Sigma,” stated Mark Fishman, MD, president of the Novartis Institutes for BioMedical Research. Bob Sutton echoed the sentiment, citing research showing that when organizations focus on process improvements too much, it hampers innovation over the long term. “The poster child here is Kodak, which kept making the process of manufacturing and distributing chemical-based film more efficient instead of devoting attention to making the shift to digital photography,” he said. “In other words, it kept getting better and better at doing the wrong thing.” For Kim Scott, the problem comes when an emphasis on efficiency causes managers to try to avoid duplication of effort. “In creative work,” she noted, “you need to have people approaching a problem from different angles.”

Map the phases of creative work.

The leader’s job is to map out the stages of innovation and recognize the different processes, skill sets, and technology support that each requires.

Know where you are in the game. Appreciate the different creative types among your people—and realize that some are better at certain phases than others. And be very tolerant of the subversive. Creative work must, like Mark Twain’s character Huck Finn, avoid all “sivilizing” influences.

Manage the commercialization handoff.

Few people have equal capabilities in idea generation and idea commercialization; that’s why large corporations normally separate the two functions. The consensus is that, eventually, an innovation reaches a point where it will be best served by people who know how to take it to market. Unfortunately, since the passion for an idea is highest among its originators, projects often lose steam at the handoff. Management’s job is to limit the loss of momentum with adroit timing and handling of the transition.

Provide paths through the bureaucracy.

The manager must act as a shepherd[…] executives must protect those doing creative work from a hostile environment and clear paths for them around obstacles.

Create a filtering mechanism.

Managers must not only water and fertilize, but also kill off the stuff that holds no potential. For every idea with real commercial promise, there are dozens that aren’t worth pursuing.

Fanning the Flames of Motivation

Motivating people to perform at their peak is especially vital in creative work. An employee uninspired to wrap her mind around a problem is unlikely to come up with a novel solution.

Provide intellectual challenge.

Researchers at Duke University research project surveyed a large R&D organization to find…

which workers were more intrinsically motivated—fired up, for example, by intellectual challenge or independence—and which were more extrinsically motivated, by such things as salary, benefits, and job security. The researchers looked at patents filed by each respondent as a reasonable proxy for innovative output. Their finding was clear: Early-stage researchers who were more motivated by intellectual challenge tended to be more productive. (Interestingly, this did not hold true among the group doing later-stage work.) A stronger desire for independence was also associated with somewhat higher productivity. It wasn’t that extrinsic motives were unimportant; a person’s greater emphasis on salary was also associated with greater productivity. The desire for intellectual challenge was, however, much more strongly linked to it.

Allow people to pursue their passions.

If the keys to creative output are indeed intellectual challenge and independence, management must find ways to provide them. In large part, that demands awareness of individuals’ interests and skills. […] some people are simply more revolutionary in their thinking than others and therefore more suited to radical projects.

Be an appreciative audience.

employees doing creative work are more motivated by managerial behavior, even seemingly little things like a sincere word of public recognition, than by monetary rewards.

Embrace the certainty of failure.

Arguably, the managerial reactions that speak loudest to creative workers are reactions to failure. […] managers must decrease fear of failure and that the goal should be to experiment constantly, fail early and often, and learn as much as possible in the process.

Provide the setting for “good work.”

work that is excellent technically, meaningful and engaging to the worker, and carried out in an ethical way.

Learn More from IDEO

IDEO has created a course called Leading for Creativity. I will provide a review of the course on this blog soon.

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.

The Wedge Dowel

On a recent jaunt through design heaven, I found a beautiful desk for the apartment. Of course, it was at IKEA.

lisabo-desk__0416640_pe573940_s4
The Lisabo Desk
ikea_today_knutmariannehagberg_detail_1
The connection dowel design

The Lisabo desk is beautiful in its simplicity, with a visual lightness and an elegant, organic texture. It was love at first sight and I brought it home right away.

But the beauty of this table isn’t limited to its aesthetics. Opening the flatpack revealed a delightfully designed assembly system. Each leg has a connection dowel that attaches to the table in a slotted hole, requiring only a small wheeled tensioner to hold it firmly in place. Brilliant!

The design geek that I am, I couldn’t stop thinking about the care that must have gone into coming up with this feature. Well, it turns out that the designers of the table have won some awards for this creation.

The connection dowel design was inspired by IKEA’s wedge dowel. That connector enabled furniture assembly without screws, cutting down assembly time by 80%.

The video provides great insights into IKEA’s design process. IKEA’s designers seem to work very closely with prototyping and building teams. It suggests an iterative and design oriented approach necessary for great products that stand the test of time and are loved by users.