64
Think first, design next How a UX framework can make a difference for your web-to-print shop Johan Verhaegen – Web-to-Print, 2.12.2015

VIGC Web-to-Print 2015 - Think first, design next

Embed Size (px)

Citation preview

Page 1: VIGC Web-to-Print 2015 - Think first, design next

Think first, design next How a UX framework can make a difference for your web-to-print shop Johan Verhaegen – Web-to-Print, 2.12.2015

Page 2: VIGC Web-to-Print 2015 - Think first, design next
Page 3: VIGC Web-to-Print 2015 - Think first, design next
Page 4: VIGC Web-to-Print 2015 - Think first, design next
Page 5: VIGC Web-to-Print 2015 - Think first, design next
Page 6: VIGC Web-to-Print 2015 - Think first, design next
Page 7: VIGC Web-to-Print 2015 - Think first, design next
Page 8: VIGC Web-to-Print 2015 - Think first, design next
Page 9: VIGC Web-to-Print 2015 - Think first, design next
Page 10: VIGC Web-to-Print 2015 - Think first, design next
Page 11: VIGC Web-to-Print 2015 - Think first, design next

“It’s only when [UX] is done poorly that we notice it” Jared Spool

“You cannot NOT have a user experience” Lou Carbone

Page 12: VIGC Web-to-Print 2015 - Think first, design next
Page 13: VIGC Web-to-Print 2015 - Think first, design next

Portal Mail Email Website App eCommerce Blog PR Ads Manual Event Social

Customer Experience

User Experience

© Human Interface Group

UX STRATEGY

UX DESIGN

USER ASSISTANCE

Page 14: VIGC Web-to-Print 2015 - Think first, design next

USABILITY PRINCIPLES VALUE PROPOSITION CUSTOMER JOURNEY

UX STRATEGY

© Human Interface Group

Page 15: VIGC Web-to-Print 2015 - Think first, design next

Value Proposition Canvas

Product / Service

Needs

Wants

Concerns

Customer / User

Strategy

Technology Features

User Experience

© Human Interface Group

Page 16: VIGC Web-to-Print 2015 - Think first, design next

SWIFT UX business case

Page 17: VIGC Web-to-Print 2015 - Think first, design next
Page 18: VIGC Web-to-Print 2015 - Think first, design next

Service safari

Page 19: VIGC Web-to-Print 2015 - Think first, design next
Page 20: VIGC Web-to-Print 2015 - Think first, design next
Page 21: VIGC Web-to-Print 2015 - Think first, design next
Page 22: VIGC Web-to-Print 2015 - Think first, design next
Page 23: VIGC Web-to-Print 2015 - Think first, design next

“We zullen internet zijn. Of we zullen niet zijn”

Philippe Neyt Commercial Director, Corona Direct

“To be or not to be”

Page 24: VIGC Web-to-Print 2015 - Think first, design next
Page 25: VIGC Web-to-Print 2015 - Think first, design next

Usability principles

BASED ON HOW PEOPLE

Feel

Think

Hear See

Interact Behave

© Human Interface Group

Page 26: VIGC Web-to-Print 2015 - Think first, design next

People are motivated by mastery and control

People search for cues that tell them what to do

Usability principles

Page 27: VIGC Web-to-Print 2015 - Think first, design next
Page 28: VIGC Web-to-Print 2015 - Think first, design next

PEOPLE ARE MOTIVATED BY MASTERY AND CONTROL

Page 29: VIGC Web-to-Print 2015 - Think first, design next

PEOPLE ARE MOTIVATED BY MASTERY AND CONTROL

Page 30: VIGC Web-to-Print 2015 - Think first, design next

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 31: VIGC Web-to-Print 2015 - Think first, design next

shows the intended purpose

LIFELINE

perceived affordance, Donald Norman

Page 32: VIGC Web-to-Print 2015 - Think first, design next

LIFELINE

keeps you safely on track

Page 33: VIGC Web-to-Print 2015 - Think first, design next

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 34: VIGC Web-to-Print 2015 - Think first, design next

put waypoints along the route

WAYPOINTS

Page 35: VIGC Web-to-Print 2015 - Think first, design next
Page 36: VIGC Web-to-Print 2015 - Think first, design next

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 37: VIGC Web-to-Print 2015 - Think first, design next

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 38: VIGC Web-to-Print 2015 - Think first, design next

PEOPLE SEARCH FOR CUES THAT TELL THEM WHAT TO DO

Page 39: VIGC Web-to-Print 2015 - Think first, design next

It looks real… but it isn’t.

Page 40: VIGC Web-to-Print 2015 - Think first, design next

It looks real… but it isn’t.

Page 41: VIGC Web-to-Print 2015 - Think first, design next

It looks real… but it isn’t.

Page 42: VIGC Web-to-Print 2015 - Think first, design next
Page 43: VIGC Web-to-Print 2015 - Think first, design next

It looks real… but it isn’t.

Page 44: VIGC Web-to-Print 2015 - Think first, design next

Let’s get out of the theme park…

Page 45: VIGC Web-to-Print 2015 - Think first, design next

…and enter into the real world

Page 46: VIGC Web-to-Print 2015 - Think first, design next

Designing = visualize assumptions

Assumptions need to be investigated whether they are true (or not)

LEAN UX

Page 47: VIGC Web-to-Print 2015 - Think first, design next

How to validate?

Quantitative tests Qualitative tests What?

Prove

Statistically significant

Many users

Minimal interaction – A/B testing

Why?

Improve

What needs fixing

Few users

Interactive observation – live testing

Page 48: VIGC Web-to-Print 2015 - Think first, design next

Qualitative – live usability testing 10 test users •  30-55 years •  driver’s license and car

Setup

•  2 test scenarios •  recording audio and movements on screen •  searching for issues - difficulties - improvements

Page 49: VIGC Web-to-Print 2015 - Think first, design next

Live usability testing

Page 50: VIGC Web-to-Print 2015 - Think first, design next
Page 51: VIGC Web-to-Print 2015 - Think first, design next

A/B testing

Page 52: VIGC Web-to-Print 2015 - Think first, design next

A/B testing

Page 53: VIGC Web-to-Print 2015 - Think first, design next

USABILITY PRINCIPLES VALUE PROPOSITION CUSTOMER JOURNEY

User Experience Framework

Page 54: VIGC Web-to-Print 2015 - Think first, design next

Customer journey

SERVICE BLUE PRINT EXPERIENCE MAP

Page 55: VIGC Web-to-Print 2015 - Think first, design next
Page 56: VIGC Web-to-Print 2015 - Think first, design next
Page 57: VIGC Web-to-Print 2015 - Think first, design next
Page 58: VIGC Web-to-Print 2015 - Think first, design next

© Human Interface Group - 29.9.2015

Page 59: VIGC Web-to-Print 2015 - Think first, design next
Page 60: VIGC Web-to-Print 2015 - Think first, design next
Page 61: VIGC Web-to-Print 2015 - Think first, design next
Page 62: VIGC Web-to-Print 2015 - Think first, design next
Page 63: VIGC Web-to-Print 2015 - Think first, design next

3 takeaways

1. Challenge your own value proposition

2. Designing = visualizing and validating assumptions

3. Save time & money with UX techniques

© Human Interface Group - 29.9.2015

- every day

Page 64: VIGC Web-to-Print 2015 - Think first, design next

Contact us De Regenboog 11 2800 Mechelen Belgium www.higroup.com +32 (0)15 40 01 38

Follow us

Human Interface Group

@higroup

Human Interface Group [email protected]

Thank you!