IntroductionTypes of Product Design
An overview of the different types of product design roles, including their day-to-day tasks and deliverables.
Michael Croft
July 11, 2022 · 9 min read
Overview
Product designers are responsible for taking a problem and designing a solution. More tangibly, this means they’re responsible for planning how software applications (‘apps’) work and what they should look like. They typically don’t build the apps themselves, but rather define how people interact with them and how they should function to best solve the given problem. These apps are usually mobile or web-based, but increasingly extend to other formats — such as smart devices, augmented reality (‘AR’), and virtual reality (‘VR’).
As this is a problem-solving role, it requires a deep understanding of the intended users. Having this understanding allows designers to accurately understand the nature of the problem, and design an appropriate solution. This typically requires a combination of four skill sets:
- Visual Design;
- Interaction Design;
- Product Management; and
- User Research.
Generalists vs Specialists
Depending on the type of product and stage of product development, a company may employ either a generalist or a specialist product designer. Generalist product designers execute across all four of the above skill sets, whereas specialists focus more heavily on either visual design or interaction design. Specialists in product management or user research are usually not labeled ‘designers’, but instead as ‘Product Managers’ and ‘User Experience Researchers’ respectively.
Disambiguation
Unfortunately, beyond larger companies or agencies with more mature design cultures, there’s significant inconsistency in how roles are labelled. Companies frequently advertise generalist roles under specialist titles, and specialist roles under generalist titles. It’s therefore essential that, when interviewing, you clarify the scope of the role and the expected deliverables to understand whether it’s really a generalist or a specialist role.
Generalist
Names
- Product Designer
- User Experience / User Interface Designer
- UX/UI Designer
Role
Generalist product designers work across visual design, interaction design, product management, and user research. The exact balance varies significantly depending on the nature and maturity of the product. For example, a generalist design role for an early-stage product may tilt heavily in favor of interaction design, product management, and user research. Yet as the product matures and scales, there may be a greater emphasis on visual design to ensure a high level of polish.
Tasks
Generalist product designers’ tasks include:
- identifying and clarifying what problems the product is trying to solve;
- conducting user research to better understand the problems, and validate that they’re real problems;
- conducting competitive analysis to understand how other products solve the same or similar problems;
- determining how information and functionality should be organized within the product (this is also known as the product’s ‘information architecture’);
- creating flow charts (called ‘user flows’) describing, at a high-level, how users interact with and complete tasks within the product;
- creating rough, high-level drawings (called ‘wireframes’) to describe the structure and layout of individual pages;
- determining the optimal combination of elements to ensure the most efficient user-product interaction model;
- determining how the product should behave in different circumstances, such as when there’s no content, content is still loading, an error occurs, or a task is successfully completed;
- crafting the general look and feel of the product, including the use of typography, color, iconography, and imagery;
- creating iconography to improve comprehensibility, and shape the product’s personality;
- creating high-fidelity designs (called ‘mockups’), detailing the precise look and functionality of each page, including the specific elements used;
- creating interactive prototypes to more clearly express the intended interaction model between the user and product;
- conducting qualitative research to identify any usability issues with the proposed design;
- continually iterating and optimizing the design to improve how effectively and efficiently it allows users to solve the intended problem;
- working with engineering to ensure the proposed designs are implemented according to the design specification; and
- conducting quantitative research to understand the performance of the implemented design, and identify areas for improvement or optimization.
Deliverables
Generalist product designers’ deliverables include:
- Journey Maps — Diagrams of the end-to-end process that a person goes through to complete a goal. These are high-level overviews of the broader context in which someone uses the app. They’re often segmented into distinct phases, and annotated with details of user thoughts and emotions throughout the journey. Plotting this emotional journey can help identify areas of opportunity to make the process easier or simpler.
- Information Architecture Diagrams — Hierarchical diagrams detailing the organization and division of information and functionality within the product. Their purpose is to articulate the app’s underlying structure.
- User Flows — Flow charts that describe the steps required for a user to complete a task. These describe how a user interacts with the product (such as by clicking, scrolling, or swiping), what pages or page states they interact with, and any conditional logic that affects what they see. Comprehensive flows should identify any permutations that result from different or invalid user inputs.
- Wireframes — Rough, high-level outlines indicating the structure and layout of a page. These are often presented in sequence as a way to express a user flow in more detail. Imagery and iconography are indicated with placeholder shapes. These are intentionally quick and rough to allow for fast, divergent exploration of different options.
- High-Fidelity Mockups — Refined designs which show exactly how a given page will look, including the precise layout, typography, color, iconography, and imagery used.
- Visual Assets — Standalone elements, such as icons, illustrations, photographs, videos, diagrams, or screenshots used in designs.
- Prototypes — An interactive simulation of an app. These are typically made by stitching together a sequence of wireframes or high-fidelity mockups, and adding interaction targets to various elements throughout the flow. Where higher-fidelity is desired, these may also be coded. Their purpose is to more accurately test proposed designs and figure out what needs changing before the larger effort of building the real product.
Specialist: Interaction Design
Names
- Interaction Designer
- User Experience Designer
- UX Designer
Role
Interaction designers focus on the manner in which users interact with a product. This includes the organization of content and functionality, how users move through a product, how users input information, and how the product responds to those inputs. Their goal is to make the product intuitive and easy-to-use — allowing users to complete their desired task with as much efficacy and efficiency as possible.
Tasks
Interaction designers’ tasks include:
- determining how information and functionality should be organized within the product (this is also known as the product’s ‘information architecture’);
- creating flow charts (called ‘user flows’) describing, at a high-level, how users interact with and complete tasks within the product;
- creating rough, high-level drawings (called ‘wireframes’) to describe the structure and layout of individual pages;
- determining the optimal combination of elements to ensure the most efficient user-product interaction model;
- determining how the product should behave in different circumstances, such as when there’s no content, content is still loading, an error occurs, or a task is successfully completed;
- creating interactive prototypes to more clearly express the intended interaction model between the user and product;
- conducting qualitative research to identify any usability issues with the proposed design;
- continually iterating and optimizing the design to improve how effectively and efficiently it allows users to solve the intended problem;
- working with engineering to ensure the proposed designs are implemented according to the design specification; and
- conducting quantitative research to understand the performance of the implemented design, and identify areas for improvement or optimization.
Deliverables
Interaction designers’ deliverables include:
- Journey Maps — Diagrams of the end-to-end process that a person goes through to complete a goal. These are high-level overviews of the broader context in which someone uses the app. They’re often segmented into distinct phases, and annotated with details of user thoughts and emotions throughout the journey. Plotting this emotional journey can help identify areas of opportunity to make the process easier or simpler.
- Information Architecture Diagrams — Hierarchical diagrams detailing the organization and division of information and functionality within the product. Their purpose is to articulate the app’s underlying structure.
- User Flows — Flow charts that describe the steps required for a user to complete a task. These describe how a user interacts with the product (such as by clicking, scrolling, or swiping), what pages or page states they interact with, and any conditional logic that affects what they see. Comprehensive flows should identify any permutations that result from different or invalid user inputs.
- Wireframes — Rough, high-level outlines indicating the structure and layout of a page. These are often presented in sequence as a way to express a user flow in more detail. Imagery and iconography are indicated with placeholder shapes. These are intentionally quick and rough to allow for fast, divergent exploration of different options.
- Low-Fidelity Prototypes — An interactive simulation of an app. These are typically made by stitching together a sequence of wireframes, and adding interaction targets to various elements throughout the flow. Their purpose is to test proposed designs and figure out what needs changing before the larger effort of building the real product.
Specialist: Visual Design
Names
- Visual Designer
- User Interface Designer
- UI Designer
Role Visual designers focus primarily on improving aesthetics and usability through the use of space, typography, color, iconography, and imagery. They’re responsible for the look and feel of a product, including how the brand is expressed through user interface elements. This involves working with interaction designers to ensure visual elements satisfy both aesthetic and usability goals. They shouldn’t be confused with graphic designers, who are also visually-focused, but instead work primarily on static content (such as posters, print layouts, or logos).
Tasks
Visual designers’ tasks include:
- crafting the general look and feel of the product, including the use of typography, color, iconography, and imagery;
- creating iconography to improve comprehensibility, and shape the product’s personality;
- creating high-fidelity designs (called ‘mockups’), detailing the precise look and functionality of each page, including the specific elements used;
- creating interactive prototypes to more clearly express the motion design of interactions between the user and product;
- working with engineering to ensure the proposed designs are implemented according to the design specification; and
- conducting quantitative research to understand the performance of the implemented design, and identify areas for improvement or optimization.
Deliverables
Visual designers’ deliverables include:
- High-Fidelity Mockups — Refined designs which show exactly how a given page will look, including the precise layout, typography, color, iconography, and imagery used.
- Visual Assets — Standalone elements, such as icons, illustrations, photographs, videos, diagrams, or screenshots used in designs.
- High-Fidelity Prototypes — An interactive simulation of an app. These are typically made by stitching together a sequence of high-fidelity mockups, and adding interaction targets to various elements throughout the flow. Their purpose is to test proposed designs and figure out what needs changing before the larger effort of building the real product.
