DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because...

Post on 21-Jun-2020

0 views 0 download

Transcript of DESIGN TIPS FOR THE NON DESIGNER - Agile Australia 19 · DESIGN TIPS FOR THE NON DESIGNER Because...

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

1

NOT EVERYONE IS BORN A DESIGNER

2

3

UNDERSTANDING YOUR USER

SOLVINGA PROBLEM

INTUITIVE ANDEASY TO USE

ESTHETICALLY PLEASING AND

ON-BRAND

4

WHY IS DESIGN IMPORTANT ?

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE FEATURE PHASE

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE FEATURE PHASE EXPERIENCE PHASE

MATURITY OF MARKETPLACE

Jared Spool

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

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

10

1

GET INTO YOUR CUSTOMERS MIND

2

TESTING ON HUMANS

3

THE ICING ONTOP OF THE CAKE

GET INTO YOUR CUSTOMERS MINDThe customer is always right

11

GET INTO YOUR CUSTOMERS MIND

1

GAIN CUSTOMER KNOWLEDGE

2

EMPATHY

3

USER JOURNEY

BUILD CUSTOMER KNOWLEDGE

EMPATHY

THINK & FEEL

SEE

SAY & DO

HEAR

PAIN GAIN

3 USER JOURNEY

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

USER JOURNEYUSER JOURNEY

GET INTO YOUR CUSTOMERS MIND

1

GAIN CUSTOMER KNOWLEDGE

2

EMPATHY

3

USER JOURNEY

20

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

TESTING ON HUMANS

21

3 WAYS TO TEST ON HUMANS

1

QUICK & DIRTY PROTOTYPING

2

USING MVP’S

3

PAPER PROTOTYPES

PLANQUICK AND DIRTY PROTOTYPING

24

USING MVP’S

25

MVP Minimum Viable Product

26

27

28

29

3 PAPER PROTOTYPES

30

PAPER PROTOTYPES

31

32

USING MVP’S

A B

34

3 WAYS TO TEST ON HUMANS

1

QUICK & DIRTY PROTOTYPING

2

USING MVP’S

3

PAPER PROTOTYPES

THE ICING ONTOP OF THE CAKE

36

3 VISUAL DESIGN TIPS

1

VISUAL HIERARCHY

2

TYPOGRAPHY

3

WHITE SPACE & ICONS

38

1 VISUAL HIERARCHY

VISUAL HIERARCHY

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

CREATE HIERARCHY USING COLOUR

42

2 TYPOGRAPHY

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.

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.

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

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

ONE APP, ONE TYPEFACE FAMILY

47

48

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

goals and tasks of the user.

49

3 WHITE SPACE & ICONS

KEEP ORDER AND PLACEMENT CONSISTENT

52

3 VISUAL DESIGN TIPS

1

VISUAL HIERARCHY

2

TYPOGRAPHY

3

WHITE SPACE & ICONS

Jared Spool

MATURITY OF MARKETPLACE

54

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

Jared Spool

MATURITY OF MARKETPLACE

55

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

EXPERIENCE PHASE

Jared Spool

MATURITY OF MARKETPLACE

56

DARK AGES UX INFUSED

TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE

EXPERIENCE PHASE

57

TECHNOLOGY WORKS

MEETS BUSINESS NEEDS

DELIGHTFUL AND MEANINGFUL EXPERIENCE

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

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

Emma Carter @ej_carter

THANK YOU

61

SILLY COW

62