User centred design (UCD) and the connected home

AN INTRODUCTION TO USER CENTRED DESIGNAnd The Connected Home

DANNY BLUESTONE @danny_bluestone

ANDREW PAIRMAN @andrewpairman

UX WHITE PAPEROur process evolved over ten years, now you can learn from our award winning formula

ANDREW PAIRMAN UX DESIGNER

DANNY BLUESTONE UX CONSULTANT

WHAT YOU WILL LEARN

PART 01

Introduction

What is UCD

Why connected devices

Design heuristics

Bringing UCD to the IoT world

The connected dishwasher

1 HOUR

PART 02

Evaluation model

Stakeholder interviews

Personas

Prototype

Testing

Summary

BREAK

30 MINS 1.5 HOURS

WHAT IS (UCD) OR USER CENTRED DESIGN?

The central premise of user centred design is that the best designed products and services result from understanding the needs of the people who will use them.

“

http://xkcd.com/773/

GIVING USERS WHAT THEY NEED NOT WHAT YOU THINK THEY NEED

BENEFITS OF UCD

QUALITATIVE - Find out what customers actually want.

CONTEXT – Discover the exact context to design for.

CREATIVITY – Combine UCD with branding.

FOCUS - Avoid ‘analysis paralysis’ and data numbness.

REMOVE EGOS – Verify decisions with real customers.

http://www.flickr.com/photos/matski_98/8259750205/

TAKE TIME TO OBSERVE HOW PEOPLE USE YOUR DESIGN

HOW TO APPROACH DESIGN

TIMOTHY PRESTRO, CEO of DMTDESIGN FOR PEOPLE, NOT AWARDS

http://designthatmatters.org/portfolio/projects/

DESIGN FOR OUTCOMES

www.ted.com/talks/timothy_prestero_design_for_people_not_awards.html and http://www.designthatmatters.org/pictures/dtm_blog/Baby_in_Firefly.JPG

UCD EXAMPLES

http://www.flickr.com/photos/simonw92/8534697674/

“If the engineers could, they'd give you 40 buttons, but when you're driving it's not that easy to use them all, so it's better to have the ones you really need. The key thing is to make it simpler without getting rid of stuff that I might need to make the car go quicker. Lewis Hamilton

IS UCD ALWAYS THE BEST APPROACH?

tree diagram

“ If I had asked people what they wanted, they would have said faster horses.

https://www.flickr.com/photos/centralasian/5577775866/

Henry Ford

https://www.flickr.com/photos/centralasian/5577775866/

USERS ARE NOT DESIGNERS

IT IS USER CENTRED DESIGN, NOT USER CONTROLLED DESIGN

ENTER INTERNET OF THINGS (IOT)

The Internet of Things (IoT) is a scenario in which objects, animals or people are provided with unique identifiers and the ability to transfer data over a network without requiring human-to-human or human-to-computer interaction.

http://whatis.techtarget.com/definition/Internet-‐of-‐Things

http://whatis.techtarget.com/definition/Internet-of-Things

Bringing the internet to the things and bringing the things to the internet BENJAMIN MAUGAIN

IOT MARKET MOVERS AND SHAKERS

Apple Pay / NFC

IOT GLOBAL FORECAST

There are more than 10 billion wirelessly connected devices in the market today; with over 30 billion devices expected by 2020. ABI RESEARCH

https://www.abiresearch.com/press/more-‐than-‐30-‐billion-‐devices-‐will-‐wirelessly-‐conne/

https://www.abiresearch.com/press/more-than-30-billion-devices-will-wirelessly-conne/

THE PHONE AS THE EPICENTRE OF IOT

NATIVE VS WEB

http://tidbits.com/article/13962

DESIGN HEURISTICS

AFFORDANCE

FEEDBACK

CONSTRAINTS

THE MORE CHOICES YOU HAVE TO CHOOSE FROM, THE LONGER IT TAKES FOR YOU TO MAKE A DECISION.

http://www.cirencalui.com/

HICKS LAW

BRINGING UCD METHODOLOGY INTO IOT PRODUCT DESIGN

CORE PRINCIPLES

EVALUATIVE - Research to challenge the hypothesis, business case and tech.

STAKEHOLDERS - During the process identify, embrace and involve them.

PERSONAS - Understand user intent, filter it and verify your assumptions.

PROTOTYPING - Create wireframes, prototypes and specifications.

TESTING - Throughout the above, iterate the product.

UCD IS NOT THE HOLY GRAIL

LIKE ANY METHODOLOGY, UCD SHOULD BE INCORPORATED INTO WIDER ORGANISATIONAL

FUNCTIONS

THE WIDER CONTEXT OF UCD IN A PRODUCT ORIENTATED WORLD

SYSTEM ARCHITECTURE

UCD

1. MARKET DEMAND 3. USER VALUE2. PRODUCT EDUCATION

4. TECHNOLOGY

UCD IN A WIDER CONTEXT

5. COMMERCIAL ROI

AGILE PRODUCTION

PRODUCT DISTRIBUTION

EXECUTION / QUALITY CONTROL

BRAND STRATEGY

GROWTH MARKETING

FIRST MOVERS

BERG’S APPROACH1. Evaluative

Do you think their hypothesis is correct, is the technology ready for this?

2. Personas Is the context right for the approached personas. What are your views?

3. Stakeholders What are your views on how they involved stakeholders?

4. Prototyping What do you think of their approach to prototyping the machine?

5. Testing Let us know how you feel you would test such a product

THE CONNECTED DISHWASHER

EXCERCISE

PLEASE GET INTO GROUPS OF 5

YOUR FICTIONAL PROJECT Design an app to control a smart dishwasher

THE BRIEF Whirlpool allocated a budget to produce a new smart dishwasher. The dishwasher connects to an app to provide a new way to interact with their machine. Whirlpool want you to design a smartphone app that can give the user information about the machine as well as controlling it. The app should do the following:

1. Set a wash program 2. Let the user know if the machine is running or not 3. How much power is being used 4.Salt levels and liquid levels 5. When maintenance is required 6.Connect the app to the machine

AN INTRODUCTIONTO OUR APPROACH

1. Evaluative - Firstly we will challenge the hypothesis of the brief.

2. Stakeholders - We will explore who the stakeholders are.

3. Personas - Lets set the scene for the personas and our methodology.

4. Prototyping - We will then prototype some concepts for the interface.

5. Testing - Our final task will be to ‘test’ what we designed today!

PRINCIPLE 01EVALUATE

THE LEAN CANVAS

http://kevindewalt.com/2013/04/28/how-‐a-‐1-‐page-‐business-‐model-‐will-‐and-‐wont-‐help-‐your-‐lean-‐startup/

THE HOOK

EVALUATIVE

1. Is our brief correct? Should the idea change slightly?

2. What problems will this app solve, if any?

3. How would a system API affect the design process (if at all)?

4. How does the above affect the technology we choose

5. How will the connected dishwasher connect into the wider connected home?

8 mins

PRINCIPLE 02STAKEHOLDER INTERVIEWS

https://www.boundless.com/accounting/textbooks/boundless-‐accounting-‐textbook/introduction-‐to-‐accounting-‐1/overview-‐of-‐key-‐elements-‐of-‐the-‐business-‐19/business-‐stakeholders-‐internal-‐and-‐external-‐117-‐6595/

1. UnderstandSMART and

personaobjectives

STAKEHOLDER ENGAGEMENT FRAMEWORK

Understand SMART and Persona

objectives

Align mutual interests

Define their role and availability

Manage expectations

Identify project risk upfront

Gauge their interest and

influence

Understand the politics

1. Understand who the key decision makers are upfront

2. Set your goals for the interviews; vision, requirements, KPIs

3. Stay flexible and be open to group interviews

4. Run regular show and tell presentations with them

STAKEHOLDERS

1. List the manufacturer’s internal stakeholders

2. Who are the external stakeholders (non-personas)

3. What type of questions would you ask them?

STAKEHOLDERS 6 mins

PRINCIPLE 03PERSONAS

LOW PURCHASE

POWER

HIGHPURCHASE POWER

LAGGARDS

EARLY ADOPTERS

PRIORITISING OUR PERSONAS

1. Create archetypical personas that focus on common intent

2. Get stakeholders to verify your persona assumptions

3. Consider their technology abilities and accessibility issues

PERSONA TIPS

PERSONA EXAMPLE

1. Research their mental model and affordances

2. Find out how you can relieve any concerns

3. Prioritise personas based on business goals

4. Validate personas by engaging with them

PERSONA TIPS

Please create two persona cards for one of the groups below:

1. People that would use such a dishwasher

2. People that would not use such a dishwasher

3. Employee personas that would be required

Please list the following for one of the groups

1. Intent and motivations for the groups to use the app.

2. How would they use the dishwasher in a wider context?

Then challenge our axis model

PERSONAS 8 mins

PRINCIPLE 04PROTOTYPING

1. Card sorting, or feature cards help to articulate the usage

2. Flows of control help to visualise interaction sequences

3. User stories also help to build up ideas for screen design

4. Bring the persona usage into these models

5. Humanise your prototype to get better responses

6. Often content strategies are also required

PROTOTYPING TIPS

Task Frequency Difficulty Importance / priority

Alternatives Type activity Notes

e.g. Connect to wifi Infrequent 5/10 7/10 Not use the app, over-‐ride interface

on-‐boarding

TASK TABLE

http://www.a-‐richardson.com/betabrand.html

1. Please populate the task table and do the following:

• Rate the difficulty of each task and how it can be simplified

• Specify how frequently users will perform the tasks.

• Prioritise them based on critical to non-critical.

2. Please draw a comic story showing the 3 most common usages

including the trigger, action and ‘reward’ for each

PROTOTYPING - 01 15 mins

http://wc1.smartdraw.com/examples/content/examples/01_flowcharts/4_other_flowcharts/control_flow_epc_diagram_flowchart_l.jpg

1. Please create a logical flow of usage based on the key activities(Consider on boarding as part of that)


1. Review the screens as a group

2. Critique the screens against the user stories

3. Start with low fidelity

PROTOTYPING TIPS

IxD – INTERFACE

Please wireframe the following:

1. Home screen

2. On-boarding key screen (first time user)

3. Menu for repeat user

4. Other key screens or modes you choose


https://dribbble.com/shots/1083847-‐Flat-‐UI-‐Kit-‐Free-‐PSD

https://dribbble.com/shots/1083847-Flat-UI-Kit-Free-PSD

Visual language:

1. Please design a visual language based on the kits provided

(stick them on the paper)

2. Once that is done, please stick them onto the previous screens

you created


PRINCIPLE 05TESTING

QUALITATIVE VS QUANTITATIVE

http://www.nngroup.com/articles/which-‐ux-‐research-‐methods/

1. Getting the right users is imperative but so are expert reviews

2. You can recruit users from a CRM or use professional recruiters and via

guerrilla tactics

3. Contextual enquiries and eye tracking are popular types of usability testing

4. Other testing includes remote analytics, surveys and AB/MVT testing

5. Ethnography allows for even more granular monitoring of user behaviour

TESTING TIPS

http://uxmag.com/articles/eye-‐tracking-‐the-‐best-‐way-‐to-‐test-‐rich-‐app-‐usability

COGNITIVE DISRUPTIONS

Each group should nominate a leader and take their screen designs

to another group with a notepad. The leader should explain the

rationale to each ’user’ while the others are silent. The leader should

get someone in their group to help with note taking. In summary:

1. Take one to two users through your screens

2. Then get back to your original group and present your findings

TESTING 10 mins

1. UCD theories and design principles and how they adapt to the world of IoT

2. An understanding of how to engage with the various stakeholders

3. The concept of designing ‘systems’ before ‘destinations’

WHAT WE COVERED

THANK YOUDANNY BLUESTONE @danny_bluestone

ANDREW PAIRMAN @andrewpairman

CYBER-DUCK @cyberduck_uk