Paul Boag
Boagworld
The Product Design Process
5 hours, 6 minutes CC
Course Description
Learn how product design principles affect the evolution of web applications. Understand key steps in the lifecycle of a product feature — from identifying user needs and creating prototypes to conducting iterative tests on UI variations. Lastly, leverage design systems to build intuitive, user-centric applications efficiently!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 4 minutes
Paul Boag introduces himself and his background in product design and user experience. He discusses the different topics that will be covered in the workshop, including product design fundamentals, understanding user needs, prototyping in Figma, testing prototypes, and the importance of design systems in web applications.
Overview
Section Duration: 44 minutes
Paul discusses the fundamentals of product design and how it differs from traditional web design. He explains that product design involves conceptualizing, creating, and refining digital products such as SaaS apps and software interfaces. He also highlights the unique challenges of working on web apps, including repeated use, complexity, and the importance of procedural knowledge.
Paul discusses the importance of product design in the success or failure of a web app. He explains how product design impacts customer acquisition, customer retention, and cost savings for organizations. He also shares personal examples and anecdotes to illustrate the significance of product design in real-world scenarios.
Paul discusses the principles of product design and emphasizes the importance of understanding market awareness, competition, market trends, and positioning. He also highlights the need to be user-centric, understanding users' goals, pain points, and needs. Additionally, he discusses the importance of being task-oriented and understanding the hierarchy of tasks and functionality in order to help users achieve their goals.
Paul emphasizes the importance of designers working in harmony with developers and understanding technical feasibility and scalability. He discusses the importance of understanding HTML and CSS, and encourages designers to at least have a basic knowledge of coding. He also talks about the concept of simplicity in design and shares a process for simplifying complex interfaces by asking three questions: Can I remove it? Can I hide it? Can I shrink it?
Paul discusses the various aspects and considerations involved in product design. He covers topics such as usability, error handling, accessibility, device compatibility, interactivity, security, branding, and emotional connection.
Minimum Viable Product
Section Duration: 47 minutes
Paul discusses MVPs as a product version with enough features to attract early adopters and validate the product idea, while also gathering user feedback for future improvements. He emphasizes the value of starting with an MVP, as it reduces risk, allows for faster market entry, focuses on the core value proposition, provides tangible evidence for investors, and enables learning through user experience. He also discusses the iterative process of building an MVP, listening to feedback, adapting to different audiences, and observing user behavior.
Paul discusses the importance of considering the value proposition and the time and effort required to build certain features. He explains the process of prototyping the MVP and gathering feedback from users through usability testing, prototyping in code, and monitoring the live MVP. He also stresses the importance of paying attention to user feedback and adjusting the backlog of features based on the insights gained from the MVP.
Paul discusses the iterative process of product design and explains that product design is an ongoing cycle of discovering user needs, prototyping, iterating, launching, monitoring, and refining. He also emphasizes the importance of balancing new feature development with optimizing existing features and provides insights on how to prioritize work based on user needs, business goals, and time and effort.
Paul discusses three common mistakes that people make when prioritizing their workloads around features and minimal viable products. Rushing the discovery phase, neglecting post-launch iteration, and a lack of holistic thinking. He also provides some solutions to these problems, such as conducting a sprint zero or using user research and testing to inform decision-making.
Paul discusses the importance of creating a future vision to help with design consistency, consideration of future features, a goal to work towards, and increased morale and creative freedom. He also explains the process of creating a future vision, which involves research, brainstorming, prototyping, testing, backlogging, and sharing with the organization.
Customers
Section Duration: 43 minutes
Paul discusses the importance of understanding the audience in product design. He explains how to segment the audience based on different criteria such as tasks, paint points, and goals.
Paul introduces the concept of top task analysis, which helps identify the most important tasks that users want to complete in an app. He also provides examples and practical tips for conducting top task analysis.
Paul discusses the importance of organizing information architecture and navigation in applications. He explains how to identify top tasks and organize them using open and closed card sorting.
Paul discusses the use of tree testing to confirm that the information architecture is effective. He also emphasizes the need to prioritize important tasks and ensure that users can easily find the functionality they need in the app.
Prototypes
Section Duration: 57 minutes
Paul introduces the topic of prototyping in product design and discusses its role in the product design process. He explains the reasons for prototyping, such as testing and risk reduction. Paul also discusses different types of prototyping, such as low fidelity (e.g., paper prototyping) and high fidelity (e.g., clickable prototypes).
Paul discusses the importance of planning and user flows before jumping into prototyping. He explains how user flows help in understanding the entry points, key actions, decision points, and error handling in an application. Paul also discusses different levels of fidelity in prototyping and the benefits of involving stakeholders in the prototyping process. He mentions two exercises, "crazy eights" and design sprints, that can be used to engage stakeholders and generate ideas.
Paul discusses the benefits of using paper prototyping, such as its inclusivity, speed, disposability, and cost-effectiveness. He introduces grayscale prototyping as a more advanced stage, focusing on structure and organization of information. Paul also mentions tools like Balsamiq and Whimsical that can be used for grayscale prototyping.
Paul discusses the different types of prototypes and their uses in the design process. He also emphasizes the importance of choosing the right type of prototype for each situation and discusses the benefits of high-fidelity prototypes for aesthetics, navigation testing, and as a specification for developers.
Paul discusses some interface design fundamentals. He covers topics such as simplicity, limiting options, chunking, progressive disclosure, and setting good defaults. Paul also discusses the importance of choosing appropriate default values in user interfaces, such as date ranges, to save users time.
Paul discusses building prototypes that are developer-friendly, including using auto layout, considering states and animations, and using comments to explain interface behavior. A brief wrap-up of the prototype section is also provided.
Testing
Section Duration: 44 minutes
Paul discusses the importance of testing in product design and how it should be done throughout the development cycle rather than just at the end. Paul shares his approach to testing, including testing wireframes, mock-ups, and prototypes, as well as post-launch testing for exit points, friction points, and new functionality. He provide tips on recruitment for usability testing and mention the availability of testing tools that can help with participant recruitment.
Paul discusses different methods of testing wireframes. He recommends using first-click tests and five-second tests with grayscale wireframes that have real content and navigational elements. These tests help determine if users understand the purpose of the screen, if they can find specific elements, and what grabs their attention.
Paul discusses using mockups to test different visual approaches and to address disagreements among stakeholders. He also introduces the concept of semantic differential surveys, which are used to gather feedback on design elements based on agreed-upon brand keywords. Additionally, Paul mentions the use of comparison tests to demonstrate the superiority of their design over competitors' designs.
Paul discusses different methods of testing in product design, specifically focusing on mockups and prototypes. He mentions using tools like RealEye, Attention Insights, Lyssna, Maze, and LookBack for testing purposes. He also provides tips for conducting facilitated usability testing and emphasizes the importance of having clear objectives and tasks, remaining neutral, and debriefing afterward.
Paul discusses the importance of testing live apps and recommends using Microsoft Clarity for monitoring user behavior. He explains how to analyze analytics such as exit points, misclicks, rage clicks, excessive scrolling, and quick back to identify problem areas. Paul also mentions the use of heat maps and session recordings to gain further insights and suggests A-B testing for small fixes and prototyping for larger solutions.
Design Systems
Section Duration: 1 hour
Paul discusses the importance of design systems and their benefits in creating consistent and high-quality interactions. He explains that a design system is a set of guidelines, standards, and components that unify design and development efforts. The lesson covers the basic building blocks of a design system, including styles (typography, color, layout), elements (buttons, forms), and components (modals, carousels, menus).
Paul discusses the process of planning and building a design system. He suggests learning from existing design systems and collaborating with developers and other stakeholders to create a design system that meets the specific needs of the organization. Paul also shares a tip for building a design system incrementally by creating components as they are needed in the design process.
Paul discusses the importance of defining the purpose and scope of a design system before starting any work. He emphasizes the need for buy-in and agreement on the goals of the design system, whether it's to unify branding or streamline development. Paul also mentions the importance of auditing existing designs and code assets to identify gaps and inconsistencies.
Paul discusses the process of creating a design system including setting a grid, typography, colors, and aesthetics. He emphasizes the importance of building out components and elements, but cautions against combining too many elements into a single component. He also discusses the usage of different elements, such as modals and drawers, and the importance of having rules for when to use each element.
Paul discusses the implementation and evolution of design systems over time. He provides advice on turning components into code, using tools like ZeroHeight or Storybook, and highlights the need for ongoing updates and improvements to the design system. Paul also covers considerations for adding new components, version control, adoption, and communication of the design system within the organization.
Paul discusses taking a design system to the next level by considering design principles, creating a digital playbook, and developing a content style guide. He emphasizes the importance of having clear principles in place to guide design decisions and ensure consistency. He also highlights the benefits of a comprehensive guide to best practices and workflows, as well as a content style guide for consistency and efficiency.
Wrapping Up
Section Duration: 4 minutes
Paul wraps up the course by discussing the challenges of making designs agnostic and portable across different platforms, such as Figma and Adobe XD. He also mentions the lack of control and immaturity of design systems within these tools compared to developers' code repositories.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops