Intro To Product Design

What is it? Why is it important? How do you do it?

Stephanie Engle
HH Design

--

NOTE: This post is based on a talk I gave for HackDuke. You can find the original presentation here. Please feel free to adapt any of this material for your own teaching setting (and let me know if you do!). All visuals credit Google Images, Facebook, and Airbnb. None of this work represents any individual or company’s view but my own.

Introduction

Anyone can become a product designer

Hi, my name is Stephanie Engle.

I’m a Public Policy major who can’t draw and is generally afraid of Adobe software products. This past summer, Facebook trusted me to help redesign your Profiles.

I’m telling you this is because there’s a common misconception that designers must fit a specific mold or have a specific set of skills to do what they do, and I’d like to debunk that. But the truth is, you don’t need to be a font savant, or be a Creative Cloud wizard, or even have a degree in design in order to be a highly effective product designer.

You don’t even need to be a designer in order to practice good design. In fact, if everyone — you, your parents, engineers, CEOs, your government — became slightly more intentional, and slightly more human-centric, the world would be a better place.

What is design?

Good design solves a problem

Design is fundamentally about problem solving. Unlike art, aesthetics (visual or otherwise) in design do not stand alone, but are a means to an end.

Product designers specifically are concerned with the experience of products (though the definition of “product” is itself extremely broad). Though visuals are the most visible facet of a product a designer is concerned with, their reach extends into any aspect of the product that directly affects its user.

At its core, the Tesla car is simply a design solution to manmade pollution.

Great design emphasizes Form & Function

None of this is to say designers are not artists, and that design cannot be artful. Truly good design — the kind that wins hearts, minds, and markets, combines and balances beauty and utility.

If it works, it works — what does beauty add to make functional design such a force? Beauty hints at the relationship between the designer and their audience. For designers, beautiful design is about passion and panache — sort of an ode to craft, or a wink to their audience and peers. For the people using this design, beauty is the first and strongest signal of respect (this butchered quote belongs to someone else — please tell me who it is!).

The Tesla Roadster was not the first product that addressed pollution, or even first electric car to market. What Tesla did that no other car manufacturer bothered to was pair artistry with utility and put them both to work for social good. Tesla stormed into the market and captured a very vocal, wealthy minority by packaging eco-consciousness as a luxury good.

In summary, functional design enables people. Beauty signals respect and worth. To give people beautiful and functional design is to empower them. The gift of empowering others makes you a force of nature.

The best design paints an inspiring future

Nothing explains the promise of design better than this post by Julie Zhuo:

I’ll leave you to read that. In summary, design allows you to demonstrate an ambitious vision (or several) for what the world could be. The better and more precise the design, the easier it is to rally people to create that future.

To say Tesla is a an electric car for the wealthy is to severely underestimate its design. The Tesla represents the first step in a vision that begins with popularizing eco-consciousness and ends with a healthier planet.
Along its journey, Tesla hints at the promise of another transformative design: autonomous electric vehicles. I won’t go into detail here, but the possibilities for safety and productivity are endless. (NOTE: This is the Mercedes concept car. Strangely, Elon Musk wasn’t ready to share a concept for a self driving Tesla with me.)

Why is design important?

Design is everywhere

Just as anyone can be a designer, design also touches everyone and anyone. Not only do we as humans have an inherently opinionated taste — a general intuition of good and bad design — but we’re also subconsciously affected by design every time we use a product. Design can both support and impede our daily lives, from the most mundane events to the rarest and most exciting opportunities.

Handle means pull, dammit.

At its worst, design can kill

Poor design isn’t just an inconvenience. A simple matter of visual hierarchy can actually be the difference between life or death, as Jonathan Shariat’s article below shows. It’s why designers are so badly needed in healthcare, public service, and other fields critical to our well being.

“Jenny had died of toxicity and dehydration. All because her very seasoned nurses were preoccupied trying to figure out this interface.” — Jonathan Shariat, Tragic Design

At its best, design can positively change the world

Not only can design promise and inspire a better future — truly successful design delivers it. A popular example of this is the iPhone, which I need not explain because its world changing impact is so self-evident.

“Your life, in your pocket.” Steve Jobs on the iPhone 3G, WWDC 2007

How do you design a product?

CASE STUDY: How Airbnb designed trust into their products

NOTE ON PROCESS: There is no one good way to do this, and these steps are only guidelines — you need not follow them to the letter (I don’t). I encourage you to experiment to find what works best for you. For beginners, however, this should cover some of the important bases.

NOTE ON AIRBNB: I have no affiliation with this company other than being a happy customer and admirer of its product design. The following case is based on this article by Paul Graham and a bit of creative liberty for the sake of illustrating a point.

Understand your role within the project scope

While “Design” itself maintains some rough meaning across various forms, the role of “Designer” can mean very different things to different projects. Some designers work alone; others prefer collaboration. Some designers code; others don’t touch it at all. These are but a few distinctions.

The key takeaway is that to design well, you need to understand expectations — from your client, your team, and yourself— and be self-aware of your abilities and when you may need assistance. To this effect, communication is especially critical to executing on a design. If you’re on a team, it’s up to you to ensure that everyone you’re working with can comprehend and buy into your ideas from conception to finish.

Define the problem (or opportunity)

Once you understand where you reside within your team, you need to dig into the problem you’re working to solve.

This is easier said than done. Humans are fairly irrational creatures:

We tend not to think beyond our own experiences, believing we can extend what we know to the rest of the world. This makes us very (very) prone to solving problems that apply only to ourselves. When you design only for yourself, it’s not design; it’s indulging your vanity. Which is completely fine, but not what you’re here to learn.

Below is a set of questions based on a framework that Jon Lax, a Design Director at Facebook, instilled among designers while I was working under his org. They’re a great starting point for focusing your design and ensuring that you’re solving the right (real!) problems:

  • What are you trying to solve?
  • How do you know it’s a real problem? What data, anecdotes, etc. lead you to believe this?
  • Why solve this problem over others? You have limited resources and time — why apply them to this problem above all else?

Here’s an example I’ve invented based on Airbnb that attempts to address these criteria:

Travelers are not booking rooms on Airbnb because they do not trust the listings. We assume this because surveys show people are most concerned about whether or not the listings match their photos above all else. This problem is critical to solve because the trust between travelers and hosts is the foundation of a successful Airbnb experience.

Come up with a hypothesis

Great, you’ve masterfully outlined your problem. Now, you need to articulate your solution, which is essentially the hypothesis that drives what you end up designing. This should directly address the problem and not assume the conclusion is foregone (that is, be skeptical of your assumptions!).

We *think* travelers will trust listings more if we improve the visual experience for listings and better equip hosts to showcase their homes.

Define success & roadblocks

Again, make sure your success definition is rooted in the actual problem as well as the priorities and feelings of all stakeholders involved. I tend to seek both quantitative and qualitative metrics, but you should define success the way you believe is best for the problem you’re working on. Here’s a good reference for getting started:

Once you have chosen metrics, be critical of the success you have just defined. Who or what might stop you from getting there? Consider your resources, time, values, and audience.

We will be successful if we can encourage more travelers to book rooms, and for them to feel more comfortable doing so without compromising the host experience. We are limited by the fact that our hosts are not expert curators (most don’t even have professional photos of their homes), so we‘re probably going to need to hire photographers for them at least.

A little lighting and angle work make a lot of difference.

Make your hypothesis testable

Ideas are impossible to prove or disprove unless they’re made tangible. Part of a designer’s role is to make explicit the conditions that prove (or disprove) their hypotheses, (and to make sure that the entire team aligns on these conditions).

This is the step where you actually perform the duties people think of when they hear “designer”: doodling, using graphics and motion software, etc. You can think of these activities as solidifying ideas for the purpose of cheap experimentation.

There are many methods and tools for going about this, but this is not a review of them. You should choose the one that suits the needs and skills of you and anyone else you’re working with. Here are a few methods popular among software designers, along with tools and what sorts of questions these applications can answer:

Drawing/Wireframing

Pen+paper, Balsamiq, etc.

Is your solution as simple as it could be? What are possible paths toward achieving similar functions, and what are the tradeoffs?

High-fidelity Visuals

Photoshop, Sketch by Bohemian Coding (pictured), Illustrator, MS Paint, Maya, etc.

How does your solution fit in with existing systems and patterns? What signals are you sending to your audience?

Prototyping

Code, Origami by Facebook, Framer.js, Flinto, Pixate, Keynote, etc.

How does your solution move and flow? When people interact with it, does it do what they believe it should?

Designers tend to become heavily invested in this step, but you should be careful to consider your timeline and invest the right amount of time into this portion — you needn’t create every interface or part of your design right now. However, you should allot time to consider what happens when your design “breaks”, so to speak. This consideration is arguably far more important than getting color schemes perfect. Vince Speelman does a great job detailing common cases when your design might need a plan B:

Test your hypothesis, observe behavior, record observations

Fairly self-explanatory: put your designs in the real world, and see if your assumptions ring true by inviting people to engage with your designs. You may not be a researcher, but you can still attempt to ask questions and let your audience show you what it’s thinking. This article by an AirBnB researcher provides some helpful tips and considerations about how to conduct research carefully.

I’d like to emphasize that these tests need not be elaborate (we prototype pretty frequently with only paper cutouts and drawings). If you can, you should try to mirror reality as much as possible — of your audience, your context, etc. Facebook Design has created some great tools for quite literally placing your designs into diverse hands.

That’ll do the trick.

Likewise, record anything and everything you find. Try to be systematic and consistent. Focus on what your audience shows, not tells you.

Airbnb’s systematic approach to the booking flow — what changed? Where is the drop off happening?

Refine your design

In short, take what you learned and readjust your design based on new information. In Airbnb’s case, this led to making photos dramatically larger while demphasizing price and other signals that inform the intent to book.

If you haven’t done this already, this is also a great time to check in with your team about the technical feasibility and interest in your ideas, and to start implementing them.

AirBnB before and after a visual redesign. Such pictures, so trust, much design

Rinse & Repeat

Note how the success metrics we defined earlier are not absolute — they concentrate on “more” and “better” rather than some magic number. This is because design work is never “done” — something can always be iterated and improved upon. This makes designers simultaneously some of the most optimistic and perpetually unsatisfied people around ¯\_(ツ)_/¯

More importantly, it means that you should always be thinking about how your designs can be improved. Define, identify, execute, measure, repeat.

Airbnb circa 2013 (leftmost) to 2015 (rightmost)

On finishing well

Having said that, you should “finish” early and finish often. Keep in mind that you aren’t designing in a vacuum, and focusing too much on one facet of the product at the expense of everything else plays into a game of diminishing returns. You should try to break up your changes into chunks, and push actionable tasks to the rest of your team frequently, especially if you’re in a fluid environment where constraints and goals can change quickly and unexpectedly — it’s ok to launch incrementally!

In any case, you should always try to end well. To finish well is to leave things better off than when you began, and ideally to ensure the next person who takes on this problem is better equipped than you were to continue solving it. This could mean anything from documenting your designs and visual assets well, to writing an article (hey!).

Airbnb’s journey is <1% finished.

Closing thoughts

In the actual presentation, I ended with a design exercise for the group to perform. Once again, you can find that here and modify it for your own use. On this medium (ha!), however, I’d like to leave you on a different note:

Congrats 🎉 You now know something about design and have (hopefully) gained some sort of new appreciation for it. You also learned a bit of how to approach design, and how human-centric impact can be made with changes as small as taking better photos and arranging them differently.

All that I ask is you pay this knowledge forward, whether it be in practicing more thoughtful design yourself or imparting some of what you’ve learned onto others. The world is better off with more smart people like you actively trying to solve its problems and iterate on those solutions.

Thanks for reading! Feel free to say hi or check out some of my old work 😺

Special thanks to HH Design and Chen Ye for edits and thoughtful additions.

HH Design is a community for students interested in the intersection between design and technology.

contribute

--

--

Stephanie Engle
HH Design

Designer at Airbnb, Cruise, Facebook VR. And other redeemable qualities.