Mastering the Design Process

Paul Boag

Paul Boag

Boagworld
4 hours, 20 minutes CC
Mastering the Design Process

Course Description

Design is more than creativity. You must produce designs that provide real business value, even when faced with difficult stakeholders, scope creep, and iteration hell. In the course, you’ll learn a robust process to successfully take your design project from initial briefing to final delivery, avoiding common pitfalls. Gain new confidence in your design direction, and develop a strategy for managing client feedback. Most importantly, you’ll learn to get the design sign-off as painlessly as possible!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: July 29, 2022

Learning Paths

Topics

Learn 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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 7 minutes
  • Introduction
    Paul Boag introduces the course by providing some personal background involving the design process. An overview of the four critical areas of the design process that will be covered in this course is also discussed in this segment.

Process Issues

Section Duration: 35 minutes
  • Design Project & Avoiding Pitfalls
    Paul discusses common reasons design projects struggle, including scope creep and subjectiveness. Suggestions for how to avoid design pitfalls, including introducing objectivity, involving the client often, and providing reassurance, are also covered in this segment.
  • Design Principles
    Paul walks through the process of how to deliver solutions to the design pitfalls. Agreeing on design principles, the reasoning behind them, and workshopping design principles will help solidify and give direction to a project's design process.
  • Design Process Issues
    Paul discusses issues with commonly used design processes, including designing without content, designs coming as a surprise, and clients' lack of the knowledge to provide constructive feedback. Design iterations being unpredictable, the final site compared to the original design, and project risks are also discussed in this segment.
  • Speculative Design
    Paul demonstrates the fallbacks of producing unpaid design work for prospective clients. Prospective clients, the designer, and new clients all take all the costs of unpaid design work.

Process Solutions

Section Duration: 36 minutes
  • Better Design Process
    Paul provides an overview of a better design process by breaking the process up into four separate phases, discovery, prototyping, build, and live. Breaking a project into smaller phases reduces risk, provides more accurate cost estimates, and reduces the chances of failure.
  • Discovery Phase
    Paul briefly discusses the discovery phase of a design process as being dedicated to defining problems to be solved and the project's scope. These can be determined through user research, stakeholder interviews, competitive analysis research constraints, and reviewing the existing website/app.
  • Prototyping Phase
    Paul discusses the prototyping phase as having defined the design direction and build's scope. A discussion of the minimum that should be done for prototyping, including mockups, wireframes, testing aesthetics, and testing usability, is also covered in this segment.
  • Build & Live Phases
    Paul briefly walks through the build and live phases of the design process and the minimum requirements for each. The build phase is where a design is turned into a fully functional website, and the live phase is monitoring the website's user behavior.
  • Defining Stakeholders
    Paul discusses defining the stakeholders role in the design process to help avoid irrelevant feedback and micro-managing and provides a checklist summary. Three roles of a stakeholder are finding problems, championing the business's needs, and defending the users.
  • Design Process Q&A
    Paul answers student questions regarding what phase internally run projects for optimizing a site would be and if having content created or delegating content creation to the stakeholders is preferred. This segment also covers how this process applies to products like web or mobile apps and the differences between using this process in an agency and internal setting.

Content

Section Duration: 45 minutes
  • Initial Design & Content
    Paul discusses techniques to engage stakeholders while maintaining control over the final design and how to approach content creation for non-copywriters. Using proper navigation, drafting content, and a student's question regarding drafting content for multilingual sites are also covered in this segment.
  • Content Process & Content Blocks
    Paul walks through prioritizing and organizing content through top task analysis and methods such as card sorting. Mapping content to pages based on card sorting results and grouping related items by chunking content is also discussed in this segment.
  • Critical Pages and Q&A
    Paul discusses integrating stakeholders when deciding on the page content and briefly covers what critical pages should be wireframed. Student questions regarding at what point to move from discovery to prototype and what phase of the process is currently being discussed are also covered in this segment.
  • Wireframing
    Paul demonstrates two quick wireframe tests, a 5-second, and first-click test, to determine page layout and whether or not users see a design's call to action. A student's question regarding how to factor in must-have text such as legal and cookies is also discussed in this segment.

Presentation

Section Duration: 1 hour, 5 minutes
  • Design Style & Aesthetic
    Paul discusses introducing a site's aesthetic, defining brand keywords with stakeholder exercises, and creating style tiles. Style tile aesthetics can be tested with semantic differential surveys to determine how well the brand keywords are conveyed to the target audience.
  • High Fidelity Mockup or Prototype
    Paul discusses creating high-fidelity mockups with the developer in mind and suggests a service to predict where users will look when viewing a design. Creating a high-fidelity prototype, testing the prototype, and a brief checklist for the design and prototyping phase are also covered in this segment.
  • Presenting to Stakeholders
    Paul demonstrates steps to prepare for presenting a design, including involving the stakeholders, identifying possible objections, and creating a short video. Common complaints, potential responses, and reasons to speak to stakeholders individually are also provided in this segment.
  • Design Presentation Agenda
    Paul walks through the main steps of a design presentation, including recapping stakeholder decisions and collaboration, design testing, and preempting objections. Ending a presentation while downplaying design sign-off and providing ample time for stakeholder feedback are also discussed in this segment.
  • Handling Feedback & Disagreements
    Paul discusses avoiding feedback during a presentation and following up post-presentation to get better feedback results. Example questions to ask stakeholders and how to handle disagreements are also covered in this segment.
  • Handling Scope Creep
    Paul discusses handling when scope creep becomes impossible or unreasonable to accommodate. Creating a backlog of post-launch work and test scenarios helps reassure stakeholders that the project is ongoing.
  • Design Presentation Checklist
    Paul walks through a six-point presentation and feedback checklist and responds to a student's comment on the value of the previously discussed suggestions for a better presentation experience.

Implementation

Section Duration: 1 hour, 10 minutes
  • Keeping Development in Mind
    Paul discusses working with developers to ensure the final product reflects the design. Creating reusable components, designing with auto-layout, and staying consistent with colors and typography helps reduce the margin of error and workload on developers.
  • Design Systems
    Paul demonstrates the benefits of creating a design system and the critical parts to include in design systems: styles, elements, and components. A student's question regarding how to handle disagreements with designers wanting a "pixel-perfect" design is also covered in this segment.
  • Design Systems Q&A
    Paul answers student questions regarding what scale to begin thinking about a design system and how to handle finding a mistake after the presentation.
  • Post Launch Optimization
    Paul discusses utilizing the live user interactions of the launched design for post-launch optimization and provides examples of companies who have benefited from it. Prepare clients for post-launch optimization by including it in the initial design timeline and creating a list of post-launch features and improvements.
  • Post Launch Optimization Process
    Paul walks through post-launch optimization, including identifying dropout points, identifying the problems, testing solutions, and publishing those solutions. Testing solutions depend on the size of the change; small changes can use an AB testing tool, while significant changes may require a prototype of the new approach.
  • Final Checklist
    Paul walks through a six-point checklist for the final stages of the design process.
  • Final Design Process Q&A
    Paul answers student questions regarding examples of design systems for inspiration and opinions on large organizations relying on third-party agencies when designers should stick with an established design pattern or suggest a new one.

Wrapping Up

Section Duration:

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now