design tips for the non designer - agile australia 19 · design tips for the non designer because...

62
DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1

Upload: others

Post on 21-Jun-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

DESIGN TIPS FOR THE NON DESIGNERBecause anybody can create awesome experiences for users

1

Page 2: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

NOT EVERYONE IS BORN A DESIGNER

2

Page 3: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

3

UNDERSTANDING YOUR USER

SOLVINGA PROBLEM

INTUITIVE ANDEASY TO USE

ESTHETICALLY PLEASING AND

ON-BRAND

Page 4: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

4

WHY IS DESIGN IMPORTANT ?

Page 5: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE

Page 6: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE FEATURE PHASE

Page 7: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE FEATURE PHASE EXPERIENCE PHASE

Page 8: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

Page 9: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

9

“You can have the best technology in the world but if it doesn’t resonate

with your user you’ve failed”

e j carter

Page 10: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

10

1

GET INTO YOUR CUSTOMERS MIND

2

TESTING ON HUMANS

3

THE ICING ONTOP OF THE CAKE

Page 11: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

GET INTO YOUR CUSTOMERS MINDThe customer is always right

11

Page 12: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

GET INTO YOUR CUSTOMERS MIND

1

GAIN CUSTOMER KNOWLEDGE

2

EMPATHY

3

USER JOURNEY

Page 13: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

BUILD CUSTOMER KNOWLEDGE

Page 14: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

EMPATHY

THINK & FEEL

SEE

SAY & DO

HEAR

PAIN GAIN

Page 15: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS
Page 16: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

3 USER JOURNEY

Page 17: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

USER JOURNEYUSER JOURNEY

SYSTEMS

PROCESS Calculate price for customer

ACTIONS Download latest calculator

QUESTIONS Does the customer have an existing account with us?

PAIN POINTS Why does it take so long to download?

HAPPY MOMENTS Price instantly approved, no need for escalation.

A B

Page 18: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

USER JOURNEYUSER JOURNEY

Page 19: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

GET INTO YOUR CUSTOMERS MIND

1

GAIN CUSTOMER KNOWLEDGE

2

EMPATHY

3

USER JOURNEY

Page 20: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

20

Centre decisions around solving problems for your users to enhance their brand experience.

Page 21: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

TESTING ON HUMANS

21

Page 22: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

3 WAYS TO TEST ON HUMANS

1

QUICK & DIRTY PROTOTYPING

2

USING MVP’S

3

PAPER PROTOTYPES

Page 23: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

PLANQUICK AND DIRTY PROTOTYPING

Page 24: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

24

USING MVP’S

Page 25: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

25

MVP Minimum Viable Product

Page 26: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

26

Page 27: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

27

Page 28: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

28

Page 29: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

29

3 PAPER PROTOTYPES

Page 30: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

30

PAPER PROTOTYPES

Page 31: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

31

Page 32: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

32

USING MVP’S

Page 33: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

A B

Page 34: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

34

Page 35: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

3 WAYS TO TEST ON HUMANS

1

QUICK & DIRTY PROTOTYPING

2

USING MVP’S

3

PAPER PROTOTYPES

Page 36: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

THE ICING ONTOP OF THE CAKE

36

Page 37: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

3 VISUAL DESIGN TIPS

1

VISUAL HIERARCHY

2

TYPOGRAPHY

3

WHITE SPACE & ICONS

Page 38: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

38

1 VISUAL HIERARCHY

Page 39: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

VISUAL HIERARCHY

Page 40: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

40

USE FONTS AND LAYOUT TO CREATE HIERARCHY

Number of Sites: Active Sensors: Active Alerts: Total Alerts: Energy Used:

14 44 36 51 1.056kWh

14 SITES

44 SENSORS

1.056 kWh ENERGY USED

36 ACTIVE ALERTS

51 TOTAL ALERTS

Page 41: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

CREATE HIERARCHY USING COLOUR

Page 42: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

42

2 TYPOGRAPHY

Page 43: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

READABILITY

43

Jon Snow, the bastard son of Eddard Stark, is inspired by his uncle, Benjen Stark, to join the Night's Watch, but becomes disillusioned when he discovers that its primary use is that of a penal colony for criminals, meant to keep "wildlings", human tribesmen in relative anarchy north of the Wall, in check. At the Wall, Jon unites the recruits against their harsh instructor and protects the cowardly but good-natured and intelligent Samwell Tarly. Jon hopes that his combat skills will earn him assignment to the Rangers, the military arm of the Night's Watch, but instead is made a steward (and thus potential successor) to the leader of the Watch, Lord Commander Jeor Mormont. Benjen, who had led a small party of Rangers beyond the Wall, fails to return, and six months later, the dead bodies of two of the Rangers from his party are recovered beyond the Wall, but soon re-animate as wights, which kill six men and threaten Mormont, who is saved by Jon.

When word of his father's execution reaches Jon, he attempts to join Robb against the Lannisters but is prevented by his comrades and persuaded by Mormont to remain loyal to the Watch. Mormont then declares his intention to find Benjen — dead or alive — and to investigate the disappearance of many wildlings and the dark rumors surrounding "the King-Beyond-the-Wall": a deserter from the Night's Watch known as Mance Rayder.

Page 44: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

READABILITY

44

Jon Snow, the bastard son of Eddard Stark, is inspired by his uncle, Benjen Stark, to join the Night's Watch, but becomes disillusioned when he discovers that its primary use is that of a penal colony for criminals, meant to keep "wildlings", human tribesmen in relative anarchy north of the Wall, in check. At the Wall, Jon unites the recruits against their harsh instructor and protects the cowardly but good-natured and intelligent Samwell Tarly.

Page 45: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

READABILITY

45

Jon Snow, the bastard son of Eddard Stark, is inspired by his uncle, Benjen Stark, to join the Night's Watch, but becomes disillusioned when he discovers that its primary use is that of a penal colony for criminals, meant to keep "wildlings", human tribesmen in relative anarchy north of the Wall, in check. At the Wall, Jon unites the recruits against their harsh instructor and protects the cowardly but good-natured and intelligent Samwell Tarly. Jon hopes that his combat skills will earn him assignment to the Rangers, the military arm of the Night's Watch, but instead is made a steward (and thus potential successor) to the leader of the Watch, Lord Commander Jeor Mormont. Benjen, who had led a small party of Rangers beyond the Wall, fails to return, and six months later, the dead bodies of two of the Rangers from his party are recovered beyond the Wall, but soon re-animate as wights, which kill six men and threaten Mormont, who is saved by Jon.

8 - 14

Page 46: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

READABILITY

46

Jon Snow, the bastard son of Eddard Stark, is inspired by his uncle,

Benjen Stark, to join the Night's Watch, but becomes disillusioned when

he discovers that its primary use is that of a penal colony for criminals,

meant to keep "wildlings", human tribesmen in relative anarchy north of

the Wall, in check. At the Wall, Jon unites the recruits against their harsh

instructor and protects the cowardly but good-natured and intelligent

Samwell Tarly. Jon hopes that his combat skills will earn him assignment

to the Rangers, the military arm of the Night's Watch, but instead is

made a steward (and thus potential successor) to the leader of the

Watch, Lord Commander Jeor Mormont. Benjen, who had led a small

party of Rangers beyond the Wall, fails to return, and six months later,

the dead bodies of two of the Rangers from his party are recovered

beyond the Wall, but soon re-animate as wights, which kill six men and

threaten Mormont, who is saved by Jon.

LEADING

Page 47: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

ONE APP, ONE TYPEFACE FAMILY

47

Page 48: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

48

Good UI’s ensure all screen elements and layout information match the prioritised

goals and tasks of the user.

Page 49: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

49

3 WHITE SPACE & ICONS

Page 50: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS
Page 51: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS
Page 52: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

KEEP ORDER AND PLACEMENT CONSISTENT

52

Page 53: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

3 VISUAL DESIGN TIPS

1

VISUAL HIERARCHY

2

TYPOGRAPHY

3

WHITE SPACE & ICONS

Page 54: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

Jared Spool

MATURITY OF MARKETPLACE

54

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

Page 55: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

Jared Spool

MATURITY OF MARKETPLACE

55

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

EXPERIENCE PHASE

Page 56: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

Jared Spool

MATURITY OF MARKETPLACE

56

DARK AGES UX INFUSED

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

EXPERIENCE PHASE

Page 57: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

57

TECHNOLOGY WORKS

MEETS BUSINESS NEEDS

DELIGHTFUL AND MEANINGFUL EXPERIENCE

Page 58: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

58

1

GET INTO YOUR CUSTOMERS MINDS

• GAIN CUSTOMER KNOWLEDGE

• EMPATHY

• USER JOURNEY

2

TESTING ON HUMANS

• QUICK & DIRTY PROTOTYPING

• USING MVP’s

• PAPER PROTOTYPES

3

THE ICING ONTOP OF THE CAKE

• VISUAL HIERARCHY

• TYPOGRAPHY

• WHITE SPACE & ICONS

Page 59: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

59

“You can have the best technology in the world but if it doesn’t resonate

with your user you’ve failed”

e j carter

Page 60: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

Emma Carter @ej_carter

THANK YOU

Page 61: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

61

SILLY COW

Page 62: DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because anybody can create awesome experiences for users 1. ... USER JOURNEY SYSTEMS PROCESS

62