Everyone's a user

A presentation at NUX Manchester in February 2018 in Manchester, UK by Helen Joy

Slide 1

Slide 1

Everyone’s a user Helen Clark - UX consultant at SPARCK @littlehelli

Slide 2

Slide 2

Hi Editorial & magazine designer Graphic designer Web/digital designer UX/UI designer UX consultant Everyone’s a user @littlehelli

Slide 3

Slide 3

Everyone’s a user @littlehelli

Slide 4

Slide 4

Source: Wikimedia Commons: Noto Color Emoji Planning & discovery Typical digital design process Everyone’s a user @littlehelli

Slide 5

Slide 5

Research Typical digital design process Everyone’s a user @littlehelli

Slide 6

Slide 6

Prototyping Typical digital design process Everyone’s a user @littlehelli

Slide 7

Slide 7

Visual design Typical digital design process Everyone’s a user @littlehelli

Slide 8

Slide 8

Development Typical digital design process Everyone’s a user @littlehelli

Slide 9

Slide 9

Beta testing Typical digital design process Everyone’s a user @littlehelli

Slide 10

Slide 10

Slide 11

Slide 11

Surprise meeting!!! Typical digital design process Everyone’s a user @littlehelli

Slide 12

Slide 12

Revisions Typical digital design process Everyone’s a user @littlehelli

Slide 13

Slide 13

Amendments Typical digital design process Everyone’s a user @littlehelli

Slide 14

Slide 14

Launch Typical digital design process Everyone’s a user @littlehelli

Slide 15

Slide 15

Post-launch Typical digital design process Everyone’s a user @littlehelli

Slide 16

Slide 16

Cluster fuck

/ ˈ kl ʌ s.t ə ˌ f ʌ k/

Chaotic situation with all plans disintegrating in all directions Everyone’s a user @littlehelli

Slide 17

Slide 17

Client Audience 
 (user) Design 
 team Traditional designer-client-audience relationship Everyone’s a user @littlehelli

Slide 18

Slide 18

Audience 
 (user) Design 
 team Client Traditional designer-client-audience relationship Everyone’s a user @littlehelli

Slide 19

Slide 19

“Humans have a fundamental need to be consulted, engaged, to exercise their knowledge (and thus power). ” Paul Ford, The Web Is a Customer Service Medium Everyone’s a user @littlehelli

Slide 20

Slide 20

Client Audience 
 (user) Design 
 team Inclusive relationship Everyone’s a user @littlehelli

Slide 21

Slide 21

Case study: 
 Derby Museums Everyone’s a user @littlehelli

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Find opening times Find out about events Find child-friendly activities Find out about exhibitions Find out about talks Learn a skill Find out how to get to the museum Join a community group / project Buy a gift Hire a space for an event Virtual tour of the musem Find out about job vacancies Find out about volunteering Give a donation Donate an item to the collection Find something to take my parents to Find something to take my friends to Find out about the cafe Other (Interactive features) Find out about museum sta ! Buy something for me Other (Printable activity sheets: things to make, experiments etc) Other (User forum) Other (Find work experience opportunities) Other (Activities for 12-15 yr olds) Other (Workshops) Other (Recipes from olden days) Other (Antique identi " cation)

Slide 25

Slide 25

Find opening times Find out about events Find child-friendly activities Find out about exhibitions Find out about talks Learn a skill Find out how to get to the museum Join a community group / project Buy a gift Hire a space for an event Virtual tour of the musem Find out about job vacancies Find out about volunteering Give a donation Donate an item to the collection Find something to take my parents to Find something to take my friends to Find out about the cafe Other (Interactive features) Find out about museum sta ! Buy something for me Other (Printable activity sheets: things to make, experiments etc) Other (User forum) Other (Find work experience opportunities) Other (Activities for 12-15 yr olds) Other (Workshops) Other (Recipes from olden days) Other (Antique identi " cation)

Slide 26

Slide 26

Everyone’s a user @littlehelli

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

What benefits 
 did we see? Everyone’s a user @littlehelli

Slide 31

Slide 31

Honest feedback from users and potential users Benefit 1 Everyone’s a user @littlehelli

Slide 32

Slide 32

Benefit 2 Useful suggestions from 
 front line staff Everyone’s a user @littlehelli

Slide 33

Slide 33

Slide 34

Slide 34

Benefit 3 Feedback has been applied beyond the website Everyone’s a user @littlehelli

Slide 35

Slide 35

What were the risks 
 of working openly? Everyone’s a user @littlehelli

Slide 36

Slide 36

Risk 1 Getting the wrong kind of feedback Everyone’s a user @littlehelli

Slide 37

Slide 37

“The page is all in Italian. (I think.)” Everyone’s a user @littlehelli

Slide 38

Slide 38

“It somehow felt a bit basic, and not just because it isn’t finished.” Everyone’s a user @littlehelli

Slide 39

Slide 39

Risk 2 People trying to solve problems rather than identifying them Everyone’s a user @littlehelli

Slide 40

Slide 40

Risk 3 It can make people uncomfortable Everyone’s a user @littlehelli

Slide 41

Slide 41

Risk 4 It costs more Everyone’s a user @littlehelli

Slide 42

Slide 42

Risk 5 Assuming that because it’s public, people are looking at it Everyone’s a user @littlehelli

Slide 43

Slide 43

Slide 44

Slide 44

Surprise meeting!!! Everyone’s a user @littlehelli

Slide 45

Slide 45

Everyone’s a user @littlehelli

Slide 46

Slide 46

and the design brief Bring it back to research Everyone’s a user @littlehelli

Slide 47

Slide 47

“When user-centered practices are executed, designers and researchers can find the design ‘sweet spot’ where business needs and user needs overlap. ”   Hoa Loranger   VP at Nielsen Norman Group, 
 UX Without User Research Is Not UX Everyone’s a user @littlehelli

Slide 48

Slide 48

What about outside of the web industry? Everyone’s a user @littlehelli

Slide 49

Slide 49

Early access gaming Everyone’s a user @littlehelli

Slide 50

Slide 50

store.steampowered.com

Slide 51

Slide 51

“The goal of Early Access is for gamers to have a chance to interact with the developers by providing them feedback while the title is still being created.”

STEAM press release Everyone’s a user @littlehelli

Slide 52

Slide 52

Be the first to play exciting new games Discuss and give feedback Play the game as it develops Benefits to gamers Everyone’s a user @littlehelli

Slide 53

Slide 53

Benefits to developers Connect with community early C rucial feedback and bug reports Frequent iterations and improvements Everyone’s a user @littlehelli

Slide 54

Slide 54

“ These are games that evolve as you play them, as you give feedback, and as the developers update and add content. This is the way games should be made. ” Steam early access Everyone’s a user @littlehelli

Slide 55

Slide 55

“These are websites that evolve as you 
 use them, as you give feedback, and as 
 the designers and developers update and 
 add content. This is the way websites should be made. ” Everyone’s a user @littlehelli

Slide 56

Slide 56

Open & inclusive organisations Everyone’s a user @littlehelli

Slide 57

Slide 57

Everyone’s a user @littlehelli

Slide 58

Slide 58

• Build iteratively • Start with people's needs • Use real-time data to inform decisions • Default to open • Ensure everyone can participate Everyone’s a user @littlehelli

Slide 59

Slide 59

ALPHA GOV.UK identity guidelines December 2013 9 For printed materials and stationary, the symbol should be black Symbol Printed Symbol Printed Everyone’s a user @littlehelli

Slide 60

Slide 60

• Start with user needs • Do the hard work to make it simple

• Design with data

• Iterate. Then iterate again

• This is for everyone • Understand context • Make things open: it makes things better ALPHA GOV.UK identity guidelines December 2013 9 For printed materials and stationary, the symbol should be black Symbol Printed Symbol Printed Everyone’s a user @littlehelli

Slide 61

Slide 61

“A universal web is designed for all. It is a place that is available for people of all abilities, aptitudes and attitudes.”

Sarah Horton & Whitney Quesenbery, 
 A web for everyone Everyone’s a user @littlehelli

Slide 62

Slide 62

Visual design Typical digital design process Everyone’s a user @littlehelli

Slide 63

Slide 63

Development Typical digital design process Everyone’s a user @littlehelli

Slide 64

Slide 64

Beta testing Typical digital design process Everyone’s a user @littlehelli

Slide 65

Slide 65

“Hang on this is going 
 to be accessible, right? ” Everyone’s a user @littlehelli

Slide 66

Slide 66

“No problem, we’ll add some in. ” Everyone’s a user @littlehelli

Slide 67

Slide 67

“We are creating websites and apps to be accessed, yet treating accessibility like an optional extra.”

Mischa Andrews, The inaccessible web: 
 how we got into this mess Everyone’s a user @littlehelli

Slide 68

Slide 68

• Know your audience
• Define their goals • Help them achieve goals without creating barriers • Design with accessibility in mind, not as an after thought People first Everyone’s a user @littlehelli

Slide 69

Slide 69

• Read the WCAG guidelines
• Let users control the interface

• Support keyboard control

• Focus styles • Use plain language
• Colour contrast and legible typography Accessible design Everyone’s a user @littlehelli

Slide 70

Slide 70

https://24ways.org/2017/wcag-for-people-who-havent-read-them/

Slide 71

Slide 71

“Everyone is responsible for looking out for the user.”

Erika Hall, Just enough research Everyone’s a user @littlehelli

Slide 72

Slide 72

Client Audience 
 (user) Design 
 team Inclusive relationship Everyone’s a user @littlehelli

Slide 73

Slide 73

Making websites is hard! Everyone’s a user @littlehelli

Slide 74

Slide 74

Making websites is hard! Everyone’s a user @littlehelli

Slide 75

Slide 75

Making results-driven, user-oriented, effective websites on time and on budget is fucking hard ! Everyone’s a user @littlehelli

Slide 76

Slide 76

“You are not

your users” Everyone’s a user @littlehelli

Slide 77

Slide 77

Everyone’s a user @littlehelli

Slide 78

Slide 78

Clients & stakeholders are users of the design process Everyone’s a user @littlehelli

Slide 79

Slide 79

Everyone’s a user @littlehelli

Slide 80

Slide 80

What can we do to make the design process

better

for them? Everyone’s a user @littlehelli

Slide 81

Slide 81

How can they see the value of the way we work? Everyone’s a user @littlehelli

Slide 82

Slide 82

Why should they care ? Everyone’s a user @littlehelli

Slide 83

Slide 83

Impact Outcome Input Output Activity Source: http://sbpltd.uk.com Project meetings 
 and deliverables Business and user goals Wider organisational/ operational impact Everyone’s a user @littlehelli

Slide 84

Slide 84

“Features and services are outputs . The goals they are meant to achieve are outcomes . ” Jeff Gothelf and Josh Seiden, Lean UX Everyone’s a user @littlehelli

Slide 85

Slide 85

“If your work doesn’t support the business, you have failed, no matter how good the design. ” Erika Hall, Just enough research Everyone’s a user @littlehelli

Slide 86

Slide 86

3 ways to focus stakeholders on outcomes, not outputs (and make them feel included) Everyone’s a user @littlehelli

Slide 87

Slide 87

  1. Start with ‘why?’ Everyone’s a user @littlehelli

Slide 88

Slide 88

“The re is no design without discovery” Dan Brown, Practical Design Discovery Everyone’s a user @littlehelli

Slide 89

Slide 89

Storymapping Everyone’s a user @littlehelli

Slide 90

Slide 90

Slide 91

Slide 91

24

C hapter 3 How Concept Stories Work Because concept stories illustrate how your target customers do or could think about your product or service, they are either based on real data or are aspirational. Think of them as the mental calculation that someone makes when they ' rst hear about your product. The story might only last a few seconds as your customer puts together the important pieces of what your product is and what they can do with the product. Even though it lasts a few seconds, this story sets the stage for your customer being intrigued or excited by what your   product is. Concept stories operate like this (see Figure 3.1): •

Exposition: The current state of things •

Inciting Incident/Problem: The problem your product will solve •

Rising Action: The product name and a brief description or market category •

Crisis: The competition FIGURE 3.1 How a concept story is structured and operates—this is how people think about and see value in your product. Source: Donna Lichaw, The user’s journey Everyone’s a user @littlehelli

Slide 92

Slide 92

Slide 93

Slide 93

“Inviting people to participate empowers them. ” Erika Hall, Just enough research Everyone’s a user @littlehelli

Slide 94

Slide 94

  1. Help clients and stakeholders focus on their users Everyone’s a user @littlehelli

Slide 95

Slide 95

Service design blueprint Everyone’s a user @littlehelli

Slide 96

Slide 96

Slide 97

Slide 97

Example physical blueprint Example digital blueprint Source: Erik Flowers & Megan Erin Miller, 
 www.practicalservicedesign.com Everyone’s a user @littlehelli at www.practicalservicedesign.com Customer visits the-service-cafe.com and navigates to online menu 1 Screenshot of online menu CustomerWebsite hosting The order is confirmed and customer is sent a confirmation email 6 Touchpoint Order is received by cafe on their kitchen computer, where it is printed by kitchen staff with the dine-in time noted, and put in a special ticket queue until it is time. 8 Touchpoint Kitchen staff notices tickets. Order is started. 10 Touchpoint Front of house staff gives the table number to the customer and sends the number back to be written on the existing ticket. 13 Touchpoint Order is completed and a server picks it up and brings it out to the dining room to find the customer’s table number. 14 Touchpoint Customer is asked if they have an account already, and given choice to sign up for one, or to sign in with an existing one 3 Touchpoint Customer does not have an account, chooses “sign up” and fills in personal and payment information 4 Touchpoint Customer is taken to the menu page to view standard items as well as updated daily specials and offers. They fill in their order for them and their 2 co-workers 2 Touchpoint Once completed, customer is taken to the payment page to confirm their order and select their dine-in or pickup time. They choose to dine-in. 5 Touchpoint Customer has co-workers agree to pay back the money at a later time since the order could not be split. 7 Touchpoint Time passes, and when it nears the customer’s desired lunch time, they leave for the cafe. 9 Touchpoint Customer arrives, enters cafe and sees a line to order. There is a register for placing orders, and a 2nd register for “pick up & check in”. 11 Touchpoint After a few moments of hesitation, customer decides to go to “pick up & check in” line. They wait for a moment and then are able to give their name and receive a table number. 12 Touchpoint Customer receives order at their table,9 minutes after sitting down. 15 Touchpoint During meal, customer is given a comment card with a 1-10 recommendation survey. 16 Touchpoint Third party ordering systemMenu link is part of the main menu, but also a big button on the homepage Customer Customer Customer Customer Customer Kitchen Staff Customer Kitchen Staff Dining Room Staff Kitchen Staff Customer Customer Customer Customer Third party ordering system Third party ordering system Website hostingThird party ordering system Third party ordering system Third party ordering system POS system/Kitchen computerKitchen Printer POS system Assumption is that customers know that menu = order There is no ability to pay ad-hoc without an account first Daily specials are updated through ordering system. It is not connected to onsite POS Accounts are required for follow up marketing 19% of users abandon their order at the Sign up/in page This is the main point of abandonment in online ordering What would it take for ad-hoc, one time ordering? 30% of orders come through the website - 20% for takeout, 10% for dine-in Sign up does not require an email or SMS confirmation There is no way to split the cost, only the signed in user can pay for the whole party Confirmation email does not require any action. Can the ordering system accommodate split orders?Is there a way to use an online peer money exchange service to help? ie Google Wallet Only 15% of these emails are opened Can SMS be used here to alert the customer that their order is started? Could customer reply via SMS when the arrive to notify the system? This depends on them remembering on their own when it’s time to depart Can SMS be required?Account can’t be created without credit card information Customer’s will create new account if they forget they have one, or forget email used Goal for sit-down to food is 5 minutes. Dining room staffComment card is NPS style with a spot for commentsHas to be completed and left on table Could this be made digital? Could staff enter it in directly? Data needs to be captured. No card is worse than a bad rating. Staff is required to make sure every guest get’s a survey Staff can forget or customres leave since they pay during ordering, not after Less than 30% of customer’s fill out card A tip has to be in cash as they paid online before arriving Dining room staff Time to receive order is highly dependant on when they arrive and when order startsThere is currently no good way to synchronize the arrival and preparation How often are single orders for multiple paying parties? The sign up flow is a definite detour and bump in the first-time experience Payment information is saved, it is not actually used to pay at this point The previously saved payment information is now picked and used here.Customer is not charged until they confirm dine-in or pickup.Order will be saved in their account as “unfinished”Order can be saved as a favorite. Would it be better to use text and not use email for this? Order moves to step 8 Kitchen uses paper tickets printed by the POS systemThe online order queue is reliant on the kitchen staff staying aware of timing Are there technology options to have the tickets be automated with the POS? The online order queue is monitored by the staff to see the upcoming times This is the most brittle step X orders are started at the right time so they sync up with customer arrivalOrders must be started a minimum of 15 minutes early How could the kitche staff be made more aware of the upcoming tickets? Customer’s complain when they arrive later and food is cold Customers who arrive early typically don’t complain about waiting This step is totally dependent on the staff being aware of online tickets. Online order tickets must be monitored every few minutes The staff is trained to be very worried about online orders so they check frequently If a ticket is lost or misplaced, they will have to reprint it and start over There is ambiguity as to what the customer is supposed to do when they arrive Tables are not reserved so there is no guarantee there will be a free one right away There is no “close out” order, the ticket is just placed on the finished spike Since tables are usually added through the POS, the hand written ones can be forgotten This is an awkward process as they have get the customer’s table number paired with the order This involves looking through the stack of online orders to find the matching name How can the customer arrival to table number process be made less error-prone?In event of a mishap, how do they go back and find the customer to verify their order? Kitchen Staff Is there a way to make it more clear to the customer on what to do when arriving? Dining Room Staff There is no interaction with the POS or ordering systems There is no interaction with the POS or ordering systems Is there any way to remove the need to wait in line to check in? Orders can be placed hours in advanceIf the order system errors or there is a connection problem, order is not placed If an order was not started, kitchen will prioritize the online order that was missed Customer’s co-workers Example Digital Blueprint Example Physical Blueprint

Slide 98

Slide 98

Slide 99

Slide 99

User-annotated sitemap Everyone’s a user @littlehelli

Slide 100

Slide 100

P R O B E

O I L

S I T E

M A P

S e p t e m b e r

8 ,

2 0 1 7 0 . 0

H o m e

( T 1 ) P r o j e c t

E n g i n e e r

P e t e P r o c u r e m e n t

P a u l a T e c h n i c a l

R & D

G a r y M D

M a t t

M a i n

u s e r

t y p e 3 . 0

C a s e

s t u d i e s

i n d e x

( T 5 ) 4 . 0

B l o g

( T 5 ) 7 . 0

Q H S S E

( T 1 1 ) 5 . 0

N e w s

( T 8 ) 6 . 0

A b o u t

( T 8 ) 5 . x

N e w s

p o s t s

( T 7 ) 1 . 3

M a n u f a c t u r e

A s s e m b l y

( T 3 ) 2 . 2

P r o c u r e m e n t

( T 3 ) 1 . 2

R e f u r b

a n d

u p g r a d e s

( T 3 ) 2 . 1

D e s i g n

( T 3 ) 2 . 3 . 1

P r o d u c t s

( T 4 ) 2 . 0

C a p a b i l i t i e s

( T 2 ) 1 . 0

S e r v i c e s

( T 2 ) 1 . 1

M a n u f a c t u r e

I P

( T 3 ) 4 . x

B l o g

p o s t s

( T 7 ) 2 . 3

M a n u f a c t u r e

( T 3 ) 2 . 4

Q A

( T 3 ) 3 . x

I n d i v i d u a l

c a s e

s t u d i e s

( T 6 ) 6 . 1

T e a m

( T 9 ) 8 . 0

C o n t a c t

( T 1 2 ) 8 . 1

T e c h n i c a l

h e l p

a n d

a d v i c e

( T 1 3 ) 6 . 2

H i s t o r y

( T 1 0 ) 9 . 0

D i s c l a i m e r 1 0 . 0

T e r m s

&

p r i v a c y 6 . 3

L i c e n s e s

&

R e s o u r c e s

( T 2 ) v

1 . 1 ( T x )

=

t e m p l a t e

t y p e

Slide 101

Slide 101

Results per page Everyone’s a user @littlehelli

Slide 102

Slide 102

What is the user trying to do? What does the business want the user to do? How might the user be feeling? Everyone’s a user @littlehelli

Slide 103

Slide 103

What is the user trying to do? What does the business want the user to do? How might the user be feeling? Find out if the product is suitable for them. Impress the user, differentiate from the competition and get the user to sign up for a demo. Rushed for time. This is one of many products they’re researching. Everyone’s a user @littlehelli

Slide 104

Slide 104

  1. Share early 
 and often Everyone’s a user @littlehelli

Slide 105

Slide 105

Slide 106

Slide 106

Slide 107

Slide 107

“I can see how much thought has gone into this.” Everyone’s a user @littlehelli

Slide 108

Slide 108

Start with ‘why’? 2. Help clients and stakeholders focus on their users 3. Share early and often 3 ways to focus stakeholders on outcomes, not outputs Everyone’s a user @littlehelli

Slide 109

Slide 109

“No one is born knowing how to be a good client. Successful design projects need equal participation from the client and the designer.”

Mike Monterio, You’re my favorite client Everyone’s a user @littlehelli

Slide 110

Slide 110

Thank you! Everyone’s a user @littlehelli

Slide 111

Slide 111

You’re my favorite client, Mike Monterio

Practical Design Discovery, Dan Brown

Just enough research, Erika Hall

Lean UX, Jeff Gothelf and Josh Seiden

A web for everyone , Sarah Horton & Whitney Quesenbery 
 Everyone’s a user @littlehelli Reading recommendations