Open in app

Sign in

Write

Sign in

A Short Handbook On Digital Product Design: Chapter Four — Design Process

Andrew Zallie
22 min readJan 4, 2020

If you have stumbled upon this post, you should know that this is the fourth chapter in a short handbook on digital product design. If you missed the previous chapters, they are linked below.

Table of Contents

Chapter Four: What is a Design Process?

In chapter one of this handbook, we defined product design as a process to solve a functional problem with a formal solution, or the entire process toward a solution. In this chapter, we will discuss this process in detail.

While in practice, this process looks different for every designer or company, product designers do draw on a similar set of rules, methods, tests, and activities to solve problems and design solutions.

We discuss design as a process because it allows us to easily describe a creative mindset that is very ambiguous for many to follow. Processes are easy to understand because we work with them every day. A process is simply a well-defined set of steps and decision points for executing a specific task.

So what is a design process?

It is simply a series of steps that a product designer or design team follows to solve a functional problem with a formal solution.

By now, this should sound very familiar. Remember, the only widely accepted truth about design is that it is fundamentally about problem-solving.

Now, if someone asks you, “What is your design process?”, you can relax and know that all they want to understand is how you think and communicate your creative approach to solving a problem with a formal solution.

Process Scope

I recognize that the scope of work that falls under a product designer’s responsibility can vary depending on the business context. For instance, in some organizations, a product designer might be heavily involved in the upfront problem definition by doing design research or working as a strategist, wherein at other companies, this might be handled strictly by product management or marketing.

In this handbook, we are going to keep it simple. We will take a look at a general and easy to follow a design process that you can implement in any project or at any organization. The design process is used when testing new product ideas, validating new features on existing products, and improving existing product experiences. My goal with this chapter is to define the common phases and steps in a typical design process.

But before we jump in and discuss the various phases and steps that make up a design process, I need to make one thing clear. A design process should never be thought of as a linear, step-by-step process that you follow to solve a problem and produce a solution. Yes, the word “process” is in the name. However, as we look at the phases and discuss the steps involved in each phase, keep in mind that you do not have to follow a particular sequence. A design process exists to help us organize our work, point us in the right direction, and learn quickly.

“A strong design process establishes a shared vocabulary and sets clear expectations to course correct early and often” [11]

For a great example of how a design process works in the real world, check out Buzzfeed’s design process.

The Design Process

There are many adaptations in the design process. It would be impossible for me to provide a universal process that would cover everything you need to know about designing a product. However, with the phases below, I will cover a majority of the steps and activities required to solve a functional problem with a formal solution. If you have seen the Double Diamond Diagram from the British Design Council and Dan Nessler, these phases should look familiar.

At the end of this chapter, I will link to other examples that range in complexity and scope. I will also include a few great examples of processes that bridge Design Thinking, Lean, and Agile Development.

The general flow we will look at in detail is below:

  1. Discover (Strategy and Research)
  2. Define (Synthesize)
  3. Develop (Ideate and Evaluate)
  4. Deliver (Prototype and Iterate)

Phases of the Design Process

The design process is ultimately a lengthy activity of Divergent (Discover and Develop) and Convergent (Define and Deliver) thinking to find the right problem and identify the best solution. Throughout the steps and activities of each phase, a designer bounces back and forth between these two types of thinking. Divergent thinking requires you to consider the art of the possible as you discover and develop as many solutions as possible. Convergent thinking requires you to narrow down and define your problem in order to design your solution. Keep this in mind as we look at each phase. For more information on this type of thinking, check out this video by IDEO on innovation.

Discover (Strategy and Research)

The goal of the first phase is to discover as much data as you can about your initial problem, opportunity, or insight so that you can determine why your product needs to exist. You need to understand the problem you are trying to solve.

You start by planning and conducting both user and market research.

  • Market Research includes general trends, current customer expectations, competitive analysis, market size, and market growth rate.
  • User Research is gathered through interviews, surveys, focus groups, and contextual observation. The goal of user research is to understand how users currently perform tasks or jobs, their pain points, and potential opportunities.

This research needs to align with the organization’s overall strategy and vision. More often than not, business strategy and design research do significantly overlap. Therefore, one could argue that before you start discovery, you must gain business alignment. I would not disagree. For instance, you could add a phase zero to this design process in which you set and align the product vision and strategy with the organization’s goals. However, to keep this process simple, I include these activities in discovery. What is imperative is that every product has a vision and a strategy that ultimately aligns with the organization’s goals.

Example Outputs

Unstructured research findings, documentation, survey responses, interview transcripts, video observations, and general findings.

Books to Read on Research:

Articles and Guides:

Define (Synthesize)

Once you have completed your research, you need to make sense of the data you collected. This is a painstaking process that requires you to organize your findings in a way that will help you understand your user’s needs, wants, and desires.

Taking insights from the market and user research, your goal in this phase is to do two things:

  1. Determine whether you are solving the right problem
  2. Define the problem

To start, find a large space to lay out all of the research so that you can begin to build common themes from the findings. It helps to visualize your findings in a way that will allow you to identify user pain points and potential opportunity areas.

Yes, this is where Post-its come in handy.

Products start and end with your user’s pains and gains. It is important to not only understand these but also to define them accurately. Below are a few common methods and tools to help you get started.

Empathy Maps

An empathy map is a visual tool that helps you articulate what you know about a user’s behaviors and attitudes. It put’s you in the “head” of your user and allows you to build a better understanding of the “why” behind a user’s needs, wants, and desires. Instead of focusing on the product itself, empathy maps force us to focus on the people who use the product. Empathy maps often guide the construction of personas, which we will discuss next.

For more on what empathy maps are and how to use them:

User Personas

User personas are comprehensive profiles of a real user or your ideal customer. A persona is based on user research and defines the user’s needs, goals, frustrations, and behavior. User personas are not made up. They are created by talking with real people and analyzing real data.

Image Credit: Ofer Ariel

For more on what personas are and how to use them:

Job Stories

Job Stories help us narrow our focus and get descriptive. We use Job Stories to document a problem without being overly prescriptive about the solution. I mentioned identifying “jobs” briefly during the discover phase of the design process. The concept of the jobs-to-be-done framework if simple.

“A Job to be Done is the process a consumer goes through whenever she aims to change her existing life-situation into a preferred one, but cannot because there are constraints that stop her.” [12]

So how do you start documenting Job Stories?

  1. Start with real people (Job Stories come from interviews)
  2. Understand what they are trying actually to accomplish
  3. Forget about solutions, focus on motivation
Image Credit: Intercom

For more on how to write Job Stories:

How Might We (HMW) Questions

Preparing “How Might We” questions is another activity that will help us better define our problem and prepare for the next phase. Once you identified your problem areas and pain points, you can reframe your insight statements into “How Might We” (HMW) questions and turn the user challenges into opportunities. An HMW question doesn’t define a solution, but rather it provides the right frame of mind to ideate a solution.

For more on HMW and some examples:

Example Outputs

Research brief, user personas, user flows, and HMW questions.

Develop (Ideate and Evaluate)

The develop phase is primarily focused on two main activities:

  1. Ideation — brainstorm and generate as many creative solutions as possible
  2. Evaluation — determine what ideas or solutions are worth exploring

With the personas, jobs, and HMW questions in hand, we diverge and open up to all possibilities or solutions. Below are a few methods and tools to help us communicate our ideas and evaluate which ideas are worth pursuing.

Storyboarding

Storyboarding is a great method of communicating ideas through visual stories and showcasing how your idea fits into your user’s lives. A storyboard represents a visual scenario similar to a comic and helps us as designers understand how a user could interact with a solution in real life.

Image Credit: uxstudio

When storyboarding, avoid getting caught up in the details of the solution. Rather, focus on what your persona is trying to achieve (i.e., goals).

For more information on Storyboards and how to use them in the design process, check out:

Customer Journeys

There are many definitions and variations of a customer journey, but the definition I align with the most is by Megan Grocki at Mad*Pow. [13]

“A Customer Journey Map is a visual or graphic interpretation of the overall story from an individual’s perspective of their relationship with an organization, service, product or brand, over time and across channels.”

— Megan Grocki

Image Credit: Mad*Pow

In the design process, customer journeys help us empathize with users and identify important opportunities that directly affect the experience.

Customer journeys can follow many different formats, but at a high level, a journey represents different phases or steps a customer goes through to accomplish a goal. The three most common phases are before, during, and after the usage of a product or interaction with a service.

A customer journey must include the following:

  • Personas: the main user along, with their pain points, goals, thoughts, and feelings.
  • Timeline: phases (before, during, after) or a specific amount of time (one year).
  • Touchpoints: customer interactions with the organization or product.
  • Emotion: what the user is feeling at the time of the interaction (frustration, happiness, anxiety, etc.)
  • Channels: the context of the interaction (website, mobile app, physical store).

Remember, no two customer journeys are alike in format. When creating a customer journey, spend less time debating the format, and more time debating what you are trying to communicate. We create customer journeys so that we keep the customer at the forefront of our design decisions.

One final comment on the customer journey before we move on. Customer journeys are typically used in one of two ways. Either to develop a current state view so that you can define a problem, or as a future state visioning tool to highlight pain points and uncover opportunities. I could have also listed the customer journey in the define phase of the design process but chose to list it only once in an effort to keep it simple.

For more information on Customer Journeys:

Sketching

Image Credit: HubSpot

The quickest and easiest way to visualize an idea is to grab a pen and paper and draw. Before I pull up any visual design software, I first start by sketching my ideas on paper. It is fast and you can compare a broad range of potential solutions without getting sucked into the visual design or aesthetic of the solution. Remember, this phase is all about ideation and generating as many ideas as possible.

Wireframing

Wireframes extend your sketches and are great for getting quick feedback on ideas. The wireframe serves as a visual guide that represents a page’s structure, hierarchy, and key elements or patterns.

Like sketching, wireframes are easy to create and are not meant to be permanent or final. As you gather more information during the design process, wireframes evolve. When wireframing, there is no need to spend time on the details like colors or copy. Your goal with a wireframe is to gather feedback on the functionality and user experience rather than the aesthetic.

In addition to feedback, wireframes serve as a common language between designers, developers, and users, which makes them extremely useful for discussing ideas.

Wireframes are the bridge between your sketches and a prototype. We will discuss prototyping in the next phase of the design process.

For more information about Wireframing:

Evaluate

At this point in the process, you have talked to users, defined their problems, and brainstormed solutions. But how do you know which ideas are the best ideas? How do you know where to start?

You start by getting additional feedback. Take your sketches and wireframes and get them in front of users. You have made some assumptions during the ideation process, and you need to test those assumptions by getting feedback from your users.

I mentioned earlier that the design process is not a linear process to be followed step-by-step. This is a critical point that I will continue to make. In reality, you should be creating, testing, learning, and iterating throughout the entire design process. However, after you have come up with your initial ideas or potential solutions, you need to have a clear understanding and direction of where to go and what to design.

In this linear design process, this is where the lines between phases begin to blur. In the develop phase, we will take the best ideas and make them tangible. By the end of this phase, we need to know where to start. To know where to start, we must test our initial designs and get feedback from real users.

Essentially, you need your users to answer two very important questions at this point in the design process:

  1. Would this product solve your problem?
  2. If it does, is it being designed the right way?

This testing process of testing does not need to be complex. Elaborate usability tests are a waste of time and resources. Start small by getting your sketches or wireframes in front of no more than five users. [14]

“The most striking truth of the curve is that zero users give zero insights.”

— The Nielson Norman Group

Image Credit: Nielsen

With your sketches or wireframes in hand, you will want to focus your initial testing on user flows, navigation, layout, and content information or hierarchy. How detailed you want to be is up to you, but you will want to ask your users for their feedback and opinions.

Once the initial direction is established, we can take our preliminary sketches and wireframes and turn them into interactive prototypes. We will discuss prototyping and iteration in the next phase.

Example Outputs

A set of ideas, customer journeys, storyboards, sketches, wireframes, a future vision, and first prototypes.

Deliver (Prototype and Iterate)

Once we have an initial direction for the product and a clear understanding of what we want to design, we will begin to create our formal solution.

In this final phase, we borrow heavily from the principles of Design Thinking, which requires us to take an iterative approach toward problem-solving by running experiments and rapidly iterating. We turn our stories, flows, and wireframes into interactive prototypes that are iterated upon until we have met our defined objectives and have a solution. To test our hypothesis, we follow a simple process — prototype, test, refine, and repeat.

Prototype

The purpose of prototyping is to create something tangible that your users can interact with, giving them an idea of how the product could be used to solve their problem or accomplish a task. Prototyping allows you to test your idea with real people before building the full solution.

Turning your wireframes into an interactive prototype will allow your users to understand your product better and give you more prescriptive feedback. As a designer, the process of prototyping often sparks new and different ideas that you would not have thought of if you had just created static wireframes.

As far as the fidelity of the prototype, this is completely up to you based on your problem and context. You can create a low-fidelity prototype using a pencil and paper or a high-fidelity prototype using a platform like InVision. What is important is that you remain efficient and avoid long feedback loops.

“The fidelity of your prototype should match a fidelity of your thinking.”

— Nick Babich

Again, the goal of prototyping is to get feedback quickly so that you can iterate on your product.

Test

We discussed user testing in the previous section, but we are going to build on it here. Testing is an important activity that should take place across the entire design process. When you are building a product for users, it is important to return to your users for feedback continually. Otherwise, you are building something no one will want. Putting your prototype in the hands of your users and gathering feedback will help you understand what works and what does not work.

As we have talked about, user testing does not need to be complex. Simple usability testing with representative users will give us the qualitative data we need to make important design decisions while determining the user’s satisfaction with the solution.

Usability testing can be done in one of two ways, formally or informally. Formal usability testing requires a researcher to set up an environment where the users can perform the testing activities. Typically, formal usability testing requires you to pay or incentivize (gift cards, coffee, etc.) your users to get them to show up.

Informally, you can “get out of the building” as Steve Blank famously coined and find your users where they are and ask them to play with your prototype. This may look like going to a local coffee shop or a place you know that your user frequents.

Regardless of how testing is done, it is fundamental to the design process. Below, we will look at a few tips that will help get you started.

Define your objectives

Before you start testing, ask yourself what do you want to achieve by testing your prototype. What are you trying to learn? What are the specific aspects of the prototype you want feedback on? Are there certain flows or features you want to test?

Before you can put together questions or user tasks, you first need to define your objectives.

A few examples:

  • Identify any missing features or nice-to-haves
  • Determine if the navigation is easy to understand
  • Identify how long it takes to complete a task
  • Identify functionality that is not apparent to the user
  • Determine if the solution meets the user’s expectations

Identify the right users

Finding the right users to test is critical. These users should be people that would use your product. This does not mean that you discount other stakeholder feedback, but for purposes of usability testing, you must get your product in the hands of your target audience.

Based on your user research (personas, empathy maps, etc.), you should have a good idea of your target users. Finding real people is not easy, but as we discussed earlier, we do not need a lot of people to perform usability testing. You should focus on quality over quantity. Testing with five users will uncover nearly all core usability problems. A fresh pair of eyes will go a long way.

Because finding the right people is often difficult, start recruiting early in the design process. During the Discover Phase, identify people that would be willing to test your prototype so that you are not trying to find people later.

Ask the right questions and prepare actionable tasks

“Some people say, “Give the customers what they want.” But that’s not my approach. Our job is to figure out what they’re going to want before they do. “

— Steve Jobs

People are complex beings whose thoughts and opinions are often influenced by bias, completely irrational, or unintelligible. This is why Steve Job’s quote is often used as an excuse not to do user research or testing.

While I agree with Jobs, I do think his quote is often misinterpreted. You can not just ask users what they want. Users or customers do not always know how to articulate their needs, wants, and desires actually are. It is the job of the designer to create the proper structure that informs and guides the user during the testing process to ensure a quality outcome for both parties.

To get started, follow this simple structure to get the most out of user testing:

(1) Provide users with a scenario or a specific task based on your objectives

Rather than giving your users step-by-step instructions, give them a scenario and they will perform more naturally. You still need to make sure that the users will know what to do. When designing scenarios or tasks make them realistic and actionable.

As the designer, make sure you have a clear goal for each task. For example, “I expect that users will be able to navigate to the profile page in two clicks.”

(2) Ask users specific questions in which you need answers

Do not ask vague or ambiguous questions. Be prescriptive and ask questions that will lead to valuable insights instead of subjective responses. For instance, instead of asking, “Was the app easy to navigate?” you should ask, “What specifically made the app easy to navigate?”.

(3) Open the floor for general feedback

Only asking for general feedback is not helpful, but opening up the floor and listening to users’ thoughts and opinions about your product could uncover hidden insights that you may miss if you only ask specific questions or have users perform tasks. Give users time to think and provide their opinion, do not interrupt them. Silence is ok.

(4) Analyze and organize your findings

Earlier in the design process, we had to organize and synthesize our findings from user research. With usability testing, we follow a similar process, which is why it is important to have a good system in place to quickly record, organize, and synthesize our user feedback.

If you are holding a formal usability test and recording your users visually, make sure you keep all of your files in a centralized place. If you can, mark any notable times during the recording process so that you can go back and review the video after the test. Once you complete a testing session, immediately go back and read through all of your feedback, written and recorded. This way, it remains fresh and will allow you to organize your findings better. In the final section of this handbook, I have listed a few tools that will level up your user testing abilities.

For more reading on user testing:

Refine

The design process is iterative. It follows the assumption that we do not get everything right the first time. The process of prototyping and testing reveals our wrong assumptions and undocumented decisions. As a product designer, you need to determine what part of the product needs to be refined or clarified based on the feedback from your users. This feedback should either be ignored, discussed further with your users, or actioned. The list of actions will form the scope of work for the next design iteration.

Repeat

Continuous improvement is critical to the success of your product. Iterative design requires us to constantly refine and improve the product based on both qualitative and quantitative feedback. Most products go through multiple rounds of iteration. If you started with a low-fidelity prototype, you may move toward a design that more closely resembles what the end product could look like. This, of course, brings a new set of challenges as you start to develop a more mature product. Remember, the fidelity of your prototype should match a fidelity of your thinking. Meaning, where you are at with the design will determine what type of feedback you are looking for during user testing. This iterative process of design provides a great opportunity for product designers to improve the products they design and ultimately make them more valuable for their end-users.

Production

Designing a great user interface starts by following a great design process. As you continue to refine your prototype based on user feedback, the fidelity of your product will increase. We know that product design is about solving a functional problem with a formal solution and not about designing a fancy interface. However, I cannot end the design process without mentioning user interface design.

Once you have defined your product’s scope and features, you need to develop a design language and establish the emotional characteristics of your product. I am talking about how your product actually interfaces with real people.

Modern design tools and the adoption of design systems have allowed for user interface design to be integrated into the prototyping process itself. Your prototype will naturally increase in fidelity after every feedback loop. By leveraging patterns and components from your design system, you can quickly spin up prototypes that maintain the product or company’s look and feel.

If you are building a new product, there are many UI design kits and systems publically available to help you get started. In the Design Toolkit chapter of this handbook, I have listed a few of my favorites.

With that said, UI Design is an art and a skill set that takes practice. Understanding how to use visual hierarchy, color, and typography to create a product that not only solves a problem but also delights the end-user only comes with time.

In this handbook, I will not be diving into the specifics behind how to design great user interfaces, but I will share a few resources that I have found helpful.

For more information about UI design:

People to Follow

That is a wrap for this chapter. We have covered a lot of ground, and I hope that you have found this chapter and entire handbook helpful wherever you are along your product design journey. If you have read this far, you should have enough information to jumpstart your learning on product design. I will finish this chapter by mentioning a few people that I have found extremely helpful over the years. Go follow them.

Many of these people I have referenced or included articles they have written throughout the handbook. This list is by no means exhaustive, but the writing of these industry and thought leaders have greatly informed how I think about and practice product design.

Additional recommended reading on Design Process:

Continue to Chapter Five: Design Toolkit →

Follow me on Medium and Twitter (@andrewzallie), and don’t forget to clap if you liked this short handbook on digital product design!

[11] “Introducing BuzzFeed’s Design Process — BuzzFeed Design — Medium.” 3 Aug. 2016, https://medium.com/buzzfeed-design/introducing-buzzfeeds-design-process-4fefbdcd83ea.

[12] “What is Jobs to be Done (JTBD)? — Jobs to be Done.” https://jtbd.info/2-what-is-jobs-to-be-done-jtbd-796b82081cca.

[13] “How to Create a Customer Journey Map — UX Mastery.” 16 Sep. 2014, https://uxmastery.com/how-to-create-a-customer-journey-map/.

[14] “Why You Only Need to Test with 5 Users.” 18 Mar. 2000, https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/.

UX
Design Thinking
Design Process
Product Design
Design

--

--

Andrew Zallie

Written by Andrew Zallie

114 Followers

Musings on innovation, technology, and design.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams