User Experience Mapping

Title Page

User Experience Mapping

Get closer to your users and create better products for them

Peter W. Szabo

       BIRMINGHAM - MUMBAI

Copyright

User Experience Mapping

Copyright © 2017 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: May 2017

Production reference: 1240517

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham 

B3 2PB, UK.

ISBN 978-1-78712-350-2

www.packtpub.com

Credits

About the Author

Peter W. Szabo is one of the world's leading user experience consultants, the principal of the farZenith.com agency. He is a frequent conference speaker, workshop host, and user centricity evangelist. His UX blog, Kaizen-UX.com, gained its popularity for UX management articles and novel user experience approach. He used to be a senior manager leading the UX team at the world's biggest online gambling corporation, Amaya Inc. (known for brands such as PokerStars, BetStars or FullTilt). As UX Director at WhatUsersDo (Europe's largest remote testing platform), he contributed to the widespread acceptance of remote research in the UX industry.

Outside of the UX world, he is the proud father of Maya and Magor. He enjoys reading, writing, and playing games (not just computer ones). He is a cat person. Ok, that's an understatement, he is simply crazy for cats.

About the Reviewer

Jay Heal is a Cambridge-based UX consultant with expertise in user-centered design, service design, interaction design and user research.

His principle belief is that design is both a collaborative and interactive process of problem solving. Great design solutions are achieved from a deeper understanding and empathy of the people they are intended for.

As a practitioner, Jay is a vocal advocate of the test early, test often approach to UX, where numerous ideas and concepts can be quickly validated until the right solution is found.

Having graduated from the University of East London in New Technology and Multimedia Design in the early 2000s, his passion for designing for people has led him to work with organizations that include the BBC, Ministry of Justice, Just Eat, Virgin Trains East Coast, and Transport for London.

Away from design and research, Jay is a devoted family man to his children (Dennis, Yasmin and Max), a music enthusiast, home barista and self proclaimed foodie.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Customer Feedback

Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1787123502.

If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!

Dedication

To Maya and Magor!

Table of Contents

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the color images of this book

Errata

Piracy

Questions

How Will UX Mapping Change Your (Users) Life?

Getting started with User Experience Mapping

Why did the requirements document fail?

How to jump-start mapping?

Visualizing - what the cat wants you to know

Creating a backlog for a cat-sitter

Pen and paper are all you need – but adding color makes the maps great

Drawing the diagram

Cats of the digital age use a computer

Summary

User Story Map - Requirements by Collaboration and Sticky Notes

Why should you create user story maps?

Just tell the story

How to tell a story?

The audience

Start with action

Simplify

Tell the story of your passion

The grocery surplus webshop

The opportunity to scratch your own itch

How to create a user story

User story templates

The Three Rs or the Connextra format

Five Ws

Lean Startup

Kaizen-UX template

INVEST - the characteristics of a good user story

I for independent

N for negotiable

V for valuable

E for estimable

S for small

T for testable

Epics

Breaking down epics into good user stories

3 Cs – the process to turn stories into reality

Card

Conversation

The power of four amigos

Confirmation

The narrative flow

Events (tasks)

Milestones (activities)

The user story map on the wall

Creating user story maps digitally

Creating a new board

Adding cards to your board

Summary

Journey Map - Understand Your Users

F2P FPS (an example from the gaming industry)

Personas

3i: How to create personas

Investigating (potential) users

Interviews

Existing user database and analytics

Surveys

Social media

Identifying behavior likelihood

Imagining the characters

The primary persona

HAL 9000 will not use your app

Creating persona documents with Smaply

Creating a journey map with Smaply

Task models

Creating the task model in Adobe Illustrator

Milestones (stages)

The origin story

Milestones of a task model

Evaluations

Creating an evaluation diagram

The finished task model

Designing the user journey

Interactions

Summary

Wireflows - Plan Your Product

The customer support chatbot

Wireframes

Wireframes and color

Low-fidelity versus high-fidelity wireframes

Lo-fi wireframes

Hi-fi wireframes

Wireframing with Balsamiq Mockups

Beyond the first wireframe

Creating symbols

The after chat survey

Creating the wireflow

Wireflow Improvement Workshop (WIW)

Why should you run a WIW?

Running a WIW

Summary

Remote and Lab Tests for Map Creation

Samsung's 2017 redesign

Test objectives

The amigos run user tests

Lab, remote, and guerrilla testing

Lab testing

Remote testing

Guerrilla testing

Why run both lab and remote testing

Rapid Iterative Testing and Evaluation (RITE)

How to test Samsung UK?

How many test users?

46 users walk into a lab

Finding the right users

Devices

Target audience

Pre-screener

Private panel

Moderated versus unmoderated tests

The scenario

Writing tasks and questions

Asking for opinions and expectations

Privacy concerns

Exit questions and exit surveys

Test script for our smartphone buying journey

The pilot test

Testing with WhatUsersDo.com

Summary

Solution Mapping Based on User Insights

Contiki adventure

Tagging - the science of active watching

How to tag videos

What to tag

Tag title and comment

Tag types

Positive tags

Suggestions

The negatives: High, Medium and Low

The behaviorist issue severity model

The research summary

The solution map

Five steps to create the solution map

Step 1 - put the issues on the map

Step 2 - form the issue trees

Step 3 - solve the root issues

Step 4 - identify obstacles

Step 5 - create actions to remove the obstacles

Put the solution map to action

Summary

Mental Model Map - A Diagram of the Perceived Reality

What's a mental model?

Buying a car

How mental models work?

Longitudinal research

Logging types - how to log?

Prompts: what to Log?

Mental model mapping

Analyzing longitudinal research

Find units

Group units into towers

Form mental spaces

Supporting solutions

Finishing touches

Using the mental model map

Summary

Behavioral Change Map - The Action Plan of Persuasion

The Amazon miracle

Is it possible to change behaviors?

Credibility

The cue-routine-reward framework

From external to internal cues

Automate repetition

Heuristic and systematic processing

The LEVER framework

Limitation

Elevation

Validation

Ease

Reversibility

Drawing the behavioral change map

How to use the behavioral change map

Summary

The 4D UX Map - Putting It All Together

The restaurant without tables

Sum of all maps

Greater than the sum of all maps

The MAYA map

The first dimension - milestones

The second dimension - events

The third dimension - importance

The fourth dimension - severity of the problems

Mental model snippets

Ratings

Drawing the 4D UX Map

Using the 4D UX Map

Evolving the 4D UX Map

Summary

Ecosystem Maps - A Holistic Overview

Shutter Swipe – where photographers and models meet

The ecosystem

How to map an ecosystem

Creating hexagon maps

Hexagon mapping with Inkscape

Creating hexagon maps with Adobe Illustrator

From hexagons to ecosystem maps

Using ecosystem maps

Stakeholder maps

Summary

Kaizen Mapping - UX Maps in Agile Product Management

Your opportunity

The manager and the map

Kaizen-UX manifesto

Agile beyond the buzzword

The three UX roles

The Kaizen-UX framework

UX strategy – the beginning of all maps

The UX strategy document

Summary

References

Preface

There is no map to writing introductions. Fortunately, there are maps to great user experience and outstanding products. This book is about those maps.

Do you want to create better products and innovative solutions? User Experience Maps will help you understand users and communicate this understanding with others. Maps can also champion user-centricity within your organization. They will fight for your users.

But no map can carry the sway of product design battles alone. That's why you need an army of maps. And that's why we need you to wield them like the shining sword of user-centricity.

This book reveals two advanced mapping techniques for the first time in print, the behavioral change map and the 4D UX map. You will also explore user story maps, task models, and journey maps. You will create wireflows, mental model maps, ecosystem maps, and solution maps. In this book, we will show you how to use insights from real users to create and improve your maps and your product.

Start mapping your products now to change your users' lives! 

What this book covers

Chapter 1, How Will UX Mapping Change Your (Users') Life?, gets the reader started with User Experience Mapping in a fun and engaging way. In this chapter, we will create a simple map, not worried about map types and UX mapping theory. We will use pen and paper, to give the reader the first taste in mapping and demonstrate its strength. 

Chapter 2, User Story Map - Requirements by Collaboration and Sticky Notes, is a simple technique to visually tell the users' story. The linear map helps you create a narrative flow. Because it's quick and easy, it can be used in the early ideation phase of a product.

Chapter 3, Journey Map - Understand Your Users, the journey maps is a tool, that helps us to understand and communicate users' behavior as they progress through a route using interactions, trying to accomplish their goals.

Chapter 4, Wireflows - Plan Your Product, wireflows are journey maps where key interactions are represented by wireframes of the relevant views. They allow you to create, explore, communicate, and improve the interactions in detail.

Chapter 5, Remote and Lab Tests for Map Creation, by watching users while they interact with a solution, we gain understanding. This understanding leads to better maps and better experiences. 

Chapter 6, Solution Mapping Based on User Insights, a solution map is a tool that will help us find solutions and communicate them. They are visual representations of an actionable project plan. Ideally, solution maps should be based on user testing sessions with real users.

Chapter 7, Mental Model Map - A Diagram of the Perceived Reality, a mental model map is a visual representation of a user group's thought process and patterns. The mental model shifts the focus from designing a solution to understanding the user's state of mind, and how we can support those states.

Chapter 8, Behavioral Change Map - The Action Plan of Persuasion, a behavioral change map is a path to changing a user group's behavior. It should be simple and impactful, based on a real understanding of our user's mindset and thought processes.

Chapter 9, The 4D UX Map - Putting It All Together, the 4D UX map is a compact summary of a UX project, a high-impact deliverable to visualize how the users' needs are met.

Chapter 10, Ecosystem Maps - A Holistic Overview, the ecosystem map places our solution in the greater context of the holistic user experience. This map aids the identification and integration of complex, interdisciplinary information concerning the user experience ecosystem.

Chapter 11, Kaizen Mapping - UX Maps in Agile Product Management, you can use the Kaizen-UX framework to structure your product design and user experience efforts. The agile framework defines the three core roles within the UX team, it has a UX strategy at its core, and it leads to better products and better communication within the team and with stakeholders.

What you need for this book

To draw a map, you only need a pen and a slightly larger sheet of paper. But software can help tremendously. That's why this book contains detailed, beginner-level tutorials on creating maps using different software products, including Adobe Illustrator, Balsamiq Mockups, Axure RP, or even Microsoft Word. Remember, even if you don't have access to any of those, each map type can also be drawn using a broad range of software or even freehand. 

Who this book is for

This book is for Product Managers, Service Managers, Designers, and anyone who is keen on learning User Experience Mapping techniques to improve how they communicate their ideas. It's for You!

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: If you do, you can share your results with me on my Twitter account: @wszp.

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: If you want, you can rotate the text from the Format Shape panel (Text Options | Text direction dropdown).

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/UserExperienceMapping_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.

If you want to contact the author, use [email protected].

How Will UX Mapping Change Your (Users) Life?

In this book, I will change your life. I will show you techniques that will help you to understand your users, gain strategic insights, and improve communication within the team and with stakeholders.

In this introductory chapter, we will perform the following things:

Create our first User Experience Map.

Similar to the other chapters of this book, we will solve a real-world problem, but for this one, we will start with a rather fun and unusual one.

After setting the scene, we will take a look into the shortcomings of the old requirements document from the waterfall product management model.

This naturally leads to the solution that states that most problems can and will be solved with improved communication.

We will see how mapping can be the ideal tool to facilitate communication.

We will have to discuss some basic mapping terms, output, outcome, and opportunity.

The next sections of this chapter are about visualizing and creating a backlog.

All this should equip the reader to create their first UX map on paper.

Then, they should be able to do it digitally. (You should use the software you are most comfortable with to map. In the following chapters, we will use a wide array of software tools, but for this chapter, I have chosen Microsoft Word.)

Getting started with User Experience Mapping

Now, let's talk about cats, and improving their lives. After all, cats always come first, when you need to improve someone's life. Later in this book, we will create maps for complex apps, websites and other digital projects, but in this introductory chapter, we will get started with a low-tech problem.

Imagine having a cat. You can imagine any other pet, but the example will be a bit different with longhorn or other cattle. You are planning an extended holiday with limited phone and no Internet access, and you need to leave your cat at home. (Not because of the lack of Internet access. Unlike UX designers, cats can survive prolonged periods of time without the Internet.) Fortunately, you have found a cat-sitter. Now, for the plot twist--although the cat-sitter has watched thousands of cat videos, she never had a cat.

You could tell her what to do. Chances are you would forget something obvious to you, but surprising for her. On top of that, you would have to rely on her memory and understanding.

Why did the requirements document fail?

Why shouldn't you give a 100 page document to your cat-sitter? Writing a documentation and sharing that with your cat-sitter might seem like a better idea. In the information stone-age of the early 90's, software delivery was based on a requirements document created as the first phase of the waterfall model. It seemed like a good idea back then. In this analysis phase, a long document was written. This document contained many details about what's being built, ahead of time, as well as an executive summary and product description and possibly many other sections. The requirements document was then approved and signed, and it represented a commitment. Requirements documents assumed that it's possible to know every eventuality up front and that priorities would not change. Obviously, they were not cast in stone. They were often revised, and sometimes even drastically changed. 

Now, imagine our cat-sitter getting a 100-page requirements document with many sections. What are the chances that she misses or misunderstands something? Software developers cursed with a massive documentation feel the same.

In my experience, companies who still work based on burdensome requirements documents have more firefighting jobs, as in very urgent jobs for consultants. On a Sunday afternoon, my mobile rang. The IT director of a well-known Hungarian eCommerce site was calling, seemingly in distress. The summary of the call was that they created a new responsive website with new design and information architecture. Now, it’s been live for two weeks, and our sales plummeted, especially on mobile. That was odd because the site was not responsive before. Why the call on Sunday? It was because the solution he presented on Monday was to review the documentation, especially the user experience bits, to find out which parts were not followed. For this, he needed an unbiased third party.

I got the documentation and opened the site. There was a sitemap in it, a bit hard to read, as it continued across many pages, but suggested a fairly well thought out information architecture. Some subcategories appeared under multiple categories, and individual products could be found in one or more categories or subcategories. In the footer of the website, there was a link titled Sitemap. Although the other link titles were in Hungarian, this one was in English. This link led me to the sitemap.xml file. The file contained everything from the documentation’s relevant chapter, nicely prepared for Googlebot, but  far from ideal for humans, it just looked gibberish.

The desktop navigation contained unique icons for the categories with the category name next to it. On the other hand, the mobile menu was just nine big icons, visible after tapping the burger icon (three parallel lines, often found in the top left or right corner of a mobile site or app), with small hard-to-read labels under them. Category names were long, and the designer made sure that they would not ruin his nice design. The documentation was followed to the letter, but the developers and whoever created the information architecture had a different idea on what to do with the sitemap chapter.

According to Paul Vii and most other experts, waterfall was the most popular product management model in software development. In the first phase of waterfall, usually named analysis, the business analyst and the product owner will put together a set of requirements. Why has this approach failed? 

The waterfall model's requirements document can lead to dysfunctional communication, lack of collaboration, and understanding. The emphasis is often put on negotiation. Cat-sitting and software development share the hate for contract negotiations, and walls of text are usually a source of a few misunderstandings. I hope that you appreciate the irony of arguing against writing long texts, while my arguments are part of a long text in a printed book.

The requirements documents are intimidating, not just for cat-sitters, but anyone involved in a project. When you get a requirements document, the first thing that might cross your mind is whether