design tips for the non designer - agile australia 19 · design tips for the non designer because...
TRANSCRIPT
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