The Art and Science of UX Design: A step-by-step guide to designing amazing user experiences

Today, every product or service needs to delight its users and that means delivering an outstanding user experience (UX). In this full-color guide, leading user experience designer Anthony Conta guides you step by step through crafting these exceptional user experiences. The Art and Science of UX Design introduces a complete human-centered design framework for success, using practical examples based on his pioneering experience in the field. Learn to apply design thinking to understand your users' wants, needs, goals, and frustrations as you transform empathy into one of your most powerful design tools. Once you've defined the right problems, you'll master proven ideation techniques to quickly create promising solutions. You'll walk through prototyping preliminary designs, testing and refining them based on users' actual reactions, and clearly communicating all you've learned so colleagues can build what you've envisioned. Finally, you'll learn practical ways to continually iterate and improve your offerings so they stay competitive (and delightful) far into the future. Go in depth on how to do UX design by walking step by step through the design thinking process See how theories and best practices apply to real-world examples of projects and designs Complete exercises that take you through an entire UX design project, end to end Learn research techniques for how to solve a problem such as conducting surveys, user interviews, and affinity mapping Practice top ideation techniques like brainstorming, sketching, and mind mapping See how you can bring your design ideas to life and test them with users Discover strategies for creating your own portfolio using the exercises you complete with this book “With his deep design expertise and an unwavering commitment to teaching, Anthony can bridge the worlds of UX design and education in ways few people can. I'm confident this book will prove to be an invaluable resource for anyone interested in learning both the craft and the process of UX design.” ― Professor Craig MacDonald, Pratt Institute “Anthony is exceptionally skilled at dissecting complex problems and translating them into delightful, intuitive design solutions. He brings that same thoughtful approach to demystifying UX Design and helping others understand the core fundamentals in an approachable and engaging way.” ― Mark Sherrill, VP of Product Design Cover Title Page Copyright Page Table of Contents About the Author Acknowledgments Foreword Introduction CHAPTER 1 Understanding Human-Centered Design What Is Human-Centered Design? Design Thinking Models Our Design Thinking Process Design Thinking Is the First Step How Are Products Built? How Do We Implement Our Products? Waterfall: A Linear, Phased Work Stream Agile: An Iterative, Continual Process Hybrid: A Combination of the Two Which Process Is Good for Your Projects? What Is User Experience, or “UX”? UX Is Usercentric UX Is More Than a Screen UX Is All Around Us The Basic Elements of UX UX Touches Many Disciplines The UX Triad UX Incorporates All Elements of an Experience for All People What Is UI? Different UI, Same Problem to Solve The Basic Elements of UI Typography Images Icons Layout UI Is a Part of UX Cognitive Overload What Is Cognitive Overload? Cognitive Load Theory Examples of Cognitive Overload Reduce Cognitive Overload for Your Users Let’s Work Together! CHAPTER 2 Using Empathy as a Design Tool Types of Research Behavioral vs. Attitudinal Qualitative vs. Quantitative The Research Landscape Chart Stages of Design Research Research Is an Ongoing Process Surveys What Is a Survey? Survey Question Types Survey Best Practices Recruiting Participants Survey Example Let’s Do It! Preparing for User Interviews What Is a User Interview? How Do You Start Preparing? Question Quality How Can You Structure the Script? Prepare Beforehand for a Smooth, Well-Structured Interview Let’s Do It! Conducting User Interviews Finding Participants Interviewing Your Participants After the Interview Let’s Do It! Affinity Mapping What Is Affinity Mapping? Affinity Mapping Process Let’s Do It! After You Empathize, You Define CHAPTER 3 Defining the User’s Problems Where Are You in the Design Thinking Process? Personas What Is a Persona? How Do You Make Personas? Personas Help You Define Who You’re Designing For Let’s Do It! User Journey Mapping What Is a User Journey Map? How Do You Make a User Journey Map? User Journeys Help You Understand Let’s Do It! The Problem to Solve How Do You Use a Problem Statement? How Do You Make a Problem Statement? A Great Problem Statement Is Challenging but Powerful Let’s Do It! Competitive Research What Is Competitive Research? SWOT—Strengths, Weaknesses, Opportunities, Threats Internal Factors External Factors Lightning Demo How Do You Do It? How Do You Do It Well? Competitive Analysis Apply the Right Technique for the Right Question Let’s Do It! After You Define, You Ideate CHAPTER 4 Exploring Ideation Techniques and Tools Where Are You in the Design Thinking Process? Ideation What Is Ideation? When Could You Ideate? What Types of Ideation Exist? What Are Some Ideation Best Practices? Using Ideation in the Design Thinking Process Conceptual Ideation What Is Brainstorming? How Do You Brainstorm? How Do You Brainstorm Well? When Should You Avoid Brainstorming? Brainstorming Is the Quintessential Ideation Technique Let’s Do It! Visual Ideation What Is Sketching? Why Do You Sketch? How Do You Sketch? Crazy 8s Visual Ideation Gives Ideas More Definition Let’s Do It! Relational Ideation—New Ideas Out of Existing Concepts Mind Mapping SCAMPER Let’s Do It! Prioritization What Is Prioritization? Dot Voting MoSCoW Method Cars Method Conclusion Let’s Do It! After You Ideate, You Prototype CHAPTER 5 Prototyping Solutions Where Are You in the Design Thinking Process? Prototyping What Is a Prototype? What Types of Prototypes Exist? What Tools Can Help You Prototype? Choose the Right Tool for the Right Fidelity Task Flows What Is a Task Flow? Why Use Task Flows? How Can You Construct a Task Flow? Apply Task Flows to the Prototype Step Task Flows Make Prototyping Easier Let’s Do It! Wireframes What Is a Wireframe? Low-Fidelity Wireframes Mid-Fidelity Wireframes High-Fidelity Wireframes High Fidelity Represents the Final Product Let’s Do It! When to Use Which Fidelity Let’s Do It! After You Prototype, You Test CHAPTER 6 Testing Your Designs Where Are You in the Design Thinking Process? Testing What Is Usability? What Are the Elements of Usability? How Do You Evaluate Usability? Usability Testing—Plan and Define What Is Usability Testing? Creating a Test Plan Defining the Test Metrics Tracking Common Metrics Starting with Your Goals Let’s Do It! Usability Testing: Recruit and Conduct How Many Users Should You Test With? Where to Find Users Preparing Your Script Framing the Session Usability Testing Makes Things Better Let’s Do It! Usability Testing: Analyze Results Scoring Scales Stoplight Chart Pull Quotes Analyze and Summarize Your Results Let’s Do It! Usability Testing: Presenting Findings Why Should You Share Your Results? How Can You Share Testing Results? Presentation Share Your Test Results After You Test, You Implement CHAPTER 7 Implementing Your Designs Where Are You in the Design Thinking Process? Implement User Stories What Is a User Story? How Do You Create User Stories? How Do You Prioritize User Stories? User Stories Give Implementation Structure Let’s Do It! Flow Charts What Is a Flow Chart? What Is a Task Flow? What Is a User Flow? What Is a Wireflow? Which Flow Chart Should You Use? Flow Charts Facilitate Implementation Let’s Do It! Style Guides What Is a Style Guide? What Goes into a Style Guide? Style Guides Portray Your Brand Let’s Do It! Practice It! Design Systems Designing for Consistency and Scalability What Is Atomic Design? How Can You Make a Design System? What Systems Can You Look at Today? Design Systems Improve Implementation Let’s Do It! Delivering Designs Delivering Your Designs How Should You Structure Your Content? How Should You Organize Your Screens? Provide Specifications and Context Let’s Do It! The End of the Process? CHAPTER 8 What’s Next? Writing a Case Study What Is a Case Study? Show Your Process Tell a Story Design for Non-Readers Communicate Through Images Demonstrate Expertise with Case Studies Creating Your Portfolio Highly Visual, Emphasis on the Work A Bare-Bones, Personal Digital Presence A Customized, Curated Experience Going All Out But I Don’t Want to Make a Website Where Should I Put My Portfolio? Giving Feedback How Do You Provide Feedback to a Designer? What Is a Critique? Ask Clarifying Questions Provide Context, Not Just Opinion Offer Exploratory Questions Talk About the Good Putting It All Together Receiving Feedback How Do You Receive Feedback as a Designer? Describe the Situation Set Expectations Ask Clarifying Questions Summarize Don’t Take It Personally— It Doesn’t Have to Be Scary Working with Other Disciplines Working with Engineering Working with Product Working with Leadership Working with Others Choosing a Role in the Industry Product Designer—Do It All UX Designer—Focus on the Structure Visual or UI Designer— Make It Look Good UX Researcher—Become an Expert on Your Users UX Writer—Craft the Perfect Copy Design Systems Designer— Unify and Scale Your Product Motion Designer— Create Stunning Animations Grow Your Career in Design Where Do You Go from Here? Appendix: What Good Looks Like Index A B C D E F G H I J L M N O P Q R S T U V W Y Z