Branded interactions : creating the digital experience

BRA MARCO SPIES & KATJA WENGER INTE DED AC IONS REVISED AND UPDATED EDITION Thames &Hudson

PREFACE 5 FOREWORD 9 INTRODUCTION 16 SET-UP : PLANNING A PROJECT 24 THE BRIEF 26 - Brief Parameters - Rebriefing - Open - Ended Briefs CONTENTS 2 THE TEAM 29 - Team Size and Composition - Agile Team Culture - Roles in the BlxD Core Team - A Tactical Approach to Team Composition 3 PROJECT PLANNING 36 - The Eight Steps of Project Planning 4 TECHNOLOGY 38 - Cooperating with the Development Team - Developers Have a System Overview, Designers Have the User Perspective - Microservices and Lean and Agile Design PROCESS : GIVING STRUCTURE TO A PROJECT 42 WORKFLOW MODELS 44 2 THE BRANDED INTERACT I ON 47 DESIGN PROCESS - The Five Project Phases 3 AGILE , LEAN AND OTHER CONCEPTS 53 - An Attitude Based on Values and Principles - Similarities between Agile and Lean - Agile Means More Security, Not Less - Agile Management of Multiple Projects in Parallel 10

1 DISCOVER 1 . 3 UNDERSTAND THE USER 82 RESEARCH AND ANALYSIS - User Insights 58 - Empathy - Mental Models - Target Group Analysis and Segmentation Models - When is the Target Group Not the Target Group? - Personas 1.1 UNDERSTAND THE BUSINESS 62 - Persona Mood Board - Stakeholder Analysis - What's in Your Bag? - The Kick-Off Workshop - Personas vs. Real Users - Focus Groups - Jobs To Be Done - Stakeholder Interviews - Documenting Job Stories and User Stories - Questionnaires - Use Cases and User Scenarios - Surveys - A Day in the Life - The Elevator Pitch: A Roleplay Task - Shadowing - Content and Service Audits - Cultural Probes and User Diaries - Card Sorting and Tree Testing - Revisit ing Personas and Scenarios - Competitor Audits and Benchmark Analysis - Product Analysis 1.4 DEFINE THE GOAL 101 - Risk/RewardTM: User Behaviour in - The Target Matrix Product Categories - The Project Requirements Document (PRD) - Data and Analyt ics - User Stories - From 'What's Happening?' - Job Stories to 'Why is it Happening?' - Epics - Data and Intuition - Conclusion - Secondary Research 1. 2 UNDERSTAND THE BRAND 76 - Brand Personal ity - The Brand as Social Media Profile - Brand Archetypes - Brand Architecture - Evaluate CD/Cl - UI Inventory 11

2 DE Fl NE 2 .3 PLAN THE USER EXPERIENCE 140 150 STRATEGY AND SYNTHESIS - Conceptual Models 160 106 - Visualizing Conceptual Models - The Joy of Use Pyramid - Navigation Paths - Sitemaps and Content Maps - User Task Flows 2 .1 PLAN THE COMMUNICATION STRATEGY 110 2 . 4 GENERATE IDEAS - Touchpoints: Where an Audience - The Core Creative Concept - Ideas for Products and Services Meets a Brand - Creative Methods - Brainstorming - The Customer Life Cycle - Crowdsourcing - The Customer Journey - Co-Creation - Moments of Truth - Other Methods - Micro-Moments - Selecting and Filtering Ideas - Designing and Planning Service Systems - Rating and Communicating Ideas - Service Design Sketches - Multiscreen Experiences 2.5 DEFINE THE METRICS - Planning Content - User-Generated Content - The Metrics Catalogue - Liquid Experiences and Transmedia - Measuring Success - Product Backlog Storytelling - Story Mapping - Generating Business Models - Sprint Backlog - Creative Briefs - LEGO Serious Play 2 . 2 PLAN THE BRAND EXPERIENCE 129 - Brand Positioning - Brand BIOS®: A Model for Dynamic Brand Management - Brands and Society - Brand Positioning Within the Market - Brand Positioning Based on User Lifestyles - User Lifestyles vs. Behaviour - Behavioral ArchetypesTM - Brand Filters as Guidelines for Interactive Design - Visual Branding and Mood Boards 12

3 DESIGN 168 - Wireflows - Storyboards CONCEPT AND VISUALS - From the Page to the Atom: Atomic Design - UX Design Patterns 3 . 1 STRUCTURE DESIGN TASKS 172 - Gomificotion - Micro-Interactions - The Design Direction Presentation (DDP) - Digital Apps Across Multiple Media - Designing a User Interface - The Detailed Design Documentation (DDD) - The First Draft - Multiple Options - What the DDD Includes - Grid and Page Construction - Look and Feel - Presenting the Design - Page Structure - Typography - Agile Product Development - Header, Logo, Navigation - Form Follows Function: Visual Categories in Design Sprints - Interaction Elements - Metaphors - Working in Design Sprints - Simplicity - Flot Design - Minimum Viable Product - From Minimum Viable Product to Minimum Loveable Product - Minimum Viable Brand 3 . 4 DESIGN SPACE-BASED INTERACTIONS 218 - The lnfosphere: Our Digital Environment 3 . 2 THE BASICS OF BRANDED 183 in the Real World INTERACTIONS - The Features of Space-Based Media - From GUI to NUI - Multisensory User Experiences Require - Interaction with Touchscreens Interdisciplinary Teams - Free Gestures - Understanding the Space and Location - Hurdles and Challenges - Develop Patterns of Interaction - NU I: Natural UI or No UI? - Storytelling in Branded Spaces - When Machines Learn to Understand - Spaces Create Community: Humans From Design to Event - The Body as on Interface - Four Formats for Branded - Multiple Interface Interactions Interactive Spaces - Traditional Brand Signatures Are Changing - New Brand Signatures 3 . 5 DESIGN VIRTUAL AND 226 - Brands Need Attitude - and Politics Too! AUGMENTED REALITY - Big Doto for Branded Interactions - The Reolity-Virtuolity Continuum - Algorithms and Big Doto as - Designing Augmented Reality Brand Signatures - Applications for Mobile AR - Wearable AR 3 . 3 DESIGN SCREEN-BASED INTERACTIONS 196 Designing Virtual Reality - Designing the User Experience - Information Architecture for - Virtual Reality Apps Screen-Based Apps - Wirefromes - VR Tolerance - Wirefromes for Responsive Design - The Design Aspects of VR: An Overview 13

3 . 6 DESIGN CONVERSATIONS 242 - Chotbots: Text vs. Voice 4 DELIVER 276 - Conversational User Interfaces DOCUMENTS AND PRODUCTION - Advantages of CU ls for Users 4 . 1 DEVELOP BlxD SYSTEMS 280 - Benefits and Challenges from - The Users Groups of a Design System a Brand Perspective - The Development Process - Design Principles - Who's Talking? Chotbot Personalities - Design Patterns - Chotbot Knowledge and Skills - The Features of Digital Media - Conversational User Interfaces Demond New Design Skills - 5 Steps to Designing Branded Conversations 3.7 DESIGN SMART OBJECTS 257 - Branded Products in the Age 4 . 2 CREATE STYLE GUIDES 287 of the Internet of Things - How Many Style Guides Does - Brand Fit and Choosing the Right One Brand Need? Product Category - Style Sheets and Style Guide Posters - Intimacy Between Users and - Make Style Guides Available Online Branded Products - Sample Content for a Web Style Guide - Smart Objects and Micro-Interactions 4 . 3 CREATE PATTERN LIBRARIES 293 - The Brand Evolves as the User Journey Progresses - Pattern Libraries - Challenges for Brands 3.8 PROTOTYPING 264 - Interaction Guidelines - Mock-ups, Fakes and Poper Prototyping - From Pattern Library to Living Style Guide - Interactive Prototyping for - Many Brands -One Experience Websites and Apps - Conclusion - Design in the Browser - Prototyping for Chotbots 4 . 4 MONITOR PRODUCTION 297 - Prototyping for Virtual Reality - Gap Analysis and Module List - Quality Control - Video Prototyping - Producing and Maintaining Content - Service Experience Prototyping - Physical Prototyping - Do-It-Yourself Prototyping 4 . 5 PROJECT LAUNCH & DEBRIEF 301 - Hockothons - Pion the Launch - Project Debrief 3 . 9 TESTING 269 - Run a Retrospective - Remember to Celebrate - User Acceptance Testing - Create a Cose Study - Usability Testing - User Experience Testing - Try It Yourself - Five Whys - NB Testing - Fake Door Testing - Demo Days 14

5 DISTRIBUTE REFERENCE 339 - Recommended Reading ROLLOUT AND UPDATES 306 - Index - Picture Credits - Acknowledgments - About the Authors 5 .1 IMPLEMENT THE BlxD 310 - Communicating the BlxD - Why Instead of What - Training Staff - Formats for Courses and Training Sessions Brand Engagement Concepts Storytelling, Product Promos and Guided Tours - Plan the Rollout 5 . 2 REFINE & UPDATE THE BlxD 320 - Design During Product Development rtf - Brand Management Portal or Brand 541So1e.bS Management Ecosystem? g bS - Brand Books - Brand Hubs J._o~ 5 . 3 FURTHER BlxD DEVELOPMENT 323 - Agile Further Development of the Product - Lean UX - Agile Further Development of the Brand - Brand Review Meetings - Test, Measure, Optimize - Metrics and Key Performance Indicators for Brand Signatures - Observe Trends and Developments - Design Fictions - Adjust the Product or Service Model - Future Cooperation 5 .4 BlxD AND CULTURAL CHANGE 335 - Designers as Agents of a New Corporate Culture - Brands for People 15

BRANDED INTERACTIONS reader through the process of digital brand design in five key phases: discovering a demographic, defining an Digital design plays a crucial role in how customers action plan, designing an interface, delivering a quality experience a brand. However, corporate websites and product, and distributing the design to the market. online shops are now only part of interactive brand Packed with real-world examples from brands like identity. Digital touchpoints are becoming more Google, Amazon and Lego, it incorporates a wealth of widespread and more complex in their design demands, practical design advice and diagrams to help build a embracing apps, chatbots, interactive billboards, virtual solid framework for any project - incorporating brand and augmented reality and more. The interface is now strategy at every stage while remaining flexible enough the brand, which means that conception, design and to let creativity shine. technology must go hand in hand at every stage, keeping the needs of users front and centre. Marco Spies and Katja Wenger are partners at think moto, a Berlin-based design consultancy, and This extensively updated edition of Branded Interactions co-founders of two highly successful tech start-ups. is an essential handbook for professional digital designers and those just starting out. It guides the Brandtd Interactions (051) -I 05/ 2021 9780500023709 00660759 20% llllllllll 11111111111111111111 2120500023700 SAVINGS Thames EB-DE0600-0001 E0002 &Hudson 2,433.00 ISBN 978-0-S00-02370-9