Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
P R A C T I C A L R E S E A R C H
B U I L D I N G E M P O W E R I N G S T Y L E G U I D E S W I T H
Donna Chan
@heyoitsdon...
N O
A L I G N M E N T
WA S T E D
T I M E
S I L O S
D I F F E R E N T
D I R E C T I O N S
N O
A D O P T I O N
S T Y L E G U I D E
R E S E A R C H P R O C E S S
D I S C O V E R I N T E R V I E W U N D E R S TA N D D E F I N E
D I S C O V E R
U S E R S
Designers
Front-end engineers
Product managers
QAs
Sales teams
Marketing teams
Doc writers
B U I L D E R S
Desig...
F U T U R E
P R O J E C T S
P R O D U C T
S P E C I F I C
C U R R E N T
P R O J E C T S
I N T E R V I E W
U S E R S B U I L D E R S S TA K E H O L D E R S
What are your biggest pain points?
U N C O V E R P R O B L E M S
U S E R S
What would a style guide enable you to achieve?...
Builders will be users, most likely.
A S K U S E R Q U E S T I O N S
What would make a successful style guide?
U N C O V E...
S TA K E
H O L D E R S
What impact do you hope for this style guide?
U N C O V E R G O A L S
What problems do you hope to ...
P U L L O U T
N U G G E T S
S T I C K Y
N O T E S
D I V I D E &
C O N Q U E R
FA C E - T O -
FA C E
U N D E R S TA N D
I spend a lot of time
redlining stuff.
- Designer
People are wasting time
on repetitive tasks.
P R O B L E M S TAT E M E N...
People wasting time
on repetitive tasks
Information not readily
distributed to all teams
Unwieldy and
unsustainable
code b...
D E F I N E
P R I N C I P L E S
U S E R
S T O R I E S
M E T R I C S
P R I N C I P L E S
U S E R
S T O R I E S
M E T R I C S
W H AT D O W E
WA N T T O E N A B L E
I N S T E A D ?
People are wasting time
on repetitive tasks.
P R O B L E M S TAT E M...
Information not readily
distributed to all teams
Unwieldy and
unsustainable
code base
E F F I C I E N C Y
C O N S I S T E ...
Speed Efficiency Modularity Simplicity Clarity
Transparency Consistency Readability Predictability
Real-time action clarit...
P R I N C I P L E S
U S E R
S T O R I E S
M E T R I C S
People are wasting time
on repetitive tasks.
P R O B L E M
S TAT E M E N T
Efficiency
P R I N C I P L E
As a designer, I n...
M E T R I C S
U S E R
S T O R I E S
P R I N C I P L E S
As a designer, efficiency means…
Decrease in JIRA story size
Decrease in QA tickets
M E T R I C S
Efficiency
P R I N C I P ...
JIRA story size Decrease in QA tickets Github changes
Github pull requests Bugs filed Customer support tickets
Shorter cod...
F I N A L LY…
P R I N C I P L E S M E T R I C SU S E R S T O R I E SP R O B L E M S
Transparency
Simplicity
Efficiency
As a designer, ——...
T H A N K Y O U
Donna Chan
@heyoitsdonna
Isaak Hayes
@isaakhayes
icon credits: paul f.
leszek pietrzak
appdirect
#clarityr...
Building Empowering Style Guides with Practical Research
Building Empowering Style Guides with Practical Research
Upcoming SlideShare
Loading in …5
×

Building Empowering Style Guides with Practical Research

3,388 views

Published on

Using research and design thinking methods to build style guides that are usable for all its users and impactful for the company.

Clarity Conference - March 2016

Published in: Design

Building Empowering Style Guides with Practical Research

  1. 1. P R A C T I C A L R E S E A R C H B U I L D I N G E M P O W E R I N G S T Y L E G U I D E S W I T H Donna Chan @heyoitsdonna Isaak Hayes @isaakhayes #clarityresearch
  2. 2. N O A L I G N M E N T WA S T E D T I M E S I L O S D I F F E R E N T D I R E C T I O N S N O A D O P T I O N
  3. 3. S T Y L E G U I D E R E S E A R C H P R O C E S S
  4. 4. D I S C O V E R I N T E R V I E W U N D E R S TA N D D E F I N E
  5. 5. D I S C O V E R
  6. 6. U S E R S Designers Front-end engineers Product managers QAs Sales teams Marketing teams Doc writers B U I L D E R S Designers Front-end engineers Application engineers Product managers Doc writers S TA K E H O L D E R S CEO Department heads Project leads
  7. 7. F U T U R E P R O J E C T S P R O D U C T S P E C I F I C C U R R E N T P R O J E C T S
  8. 8. I N T E R V I E W
  9. 9. U S E R S B U I L D E R S S TA K E H O L D E R S
  10. 10. What are your biggest pain points? U N C O V E R P R O B L E M S U S E R S What would a style guide enable you to achieve? U N C O V E R G O A L S What information do you need from a style guide? How would you want this information presented? U N C O V E R U S A B I L I T Y
  11. 11. Builders will be users, most likely. A S K U S E R Q U E S T I O N S What would make a successful style guide? U N C O V E R G O A L S What are important factors to consider? What constraints do you foresee? U N C O V E R R E Q U I R E M E N T S B U I L D E R S
  12. 12. S TA K E H O L D E R S What impact do you hope for this style guide? U N C O V E R G O A L S What problems do you hope to solve? U N C O V E R P R O B L E M S
  13. 13. P U L L O U T N U G G E T S S T I C K Y N O T E S D I V I D E & C O N Q U E R FA C E - T O - FA C E
  14. 14. U N D E R S TA N D
  15. 15. I spend a lot of time redlining stuff. - Designer People are wasting time on repetitive tasks. P R O B L E M S TAT E M E N T I have to go through every single redline. And many are repetitive. - Engineer
  16. 16. People wasting time on repetitive tasks Information not readily distributed to all teams Unwieldy and unsustainable code base
  17. 17. D E F I N E
  18. 18. P R I N C I P L E S U S E R S T O R I E S M E T R I C S
  19. 19. P R I N C I P L E S U S E R S T O R I E S M E T R I C S
  20. 20. W H AT D O W E WA N T T O E N A B L E I N S T E A D ? People are wasting time on repetitive tasks. P R O B L E M S TAT E M E N T Efficiency P R I N C I P L E
  21. 21. Information not readily distributed to all teams Unwieldy and unsustainable code base E F F I C I E N C Y C O N S I S T E N C Y T R A N S PA R E N C Y
  22. 22. Speed Efficiency Modularity Simplicity Clarity Transparency Consistency Readability Predictability Real-time action clarity Independent Error prevention Delightful Increasing usability Autonomous Flexibility In-sync Increases dissemination Comprehensive Accessible Decision-making Communicative Findable Guidance Goal-focused User-centered Contextual Speed Affordance Personalization Mobile/responsive fit P R I N C I P L E S
  23. 23. P R I N C I P L E S U S E R S T O R I E S M E T R I C S
  24. 24. People are wasting time on repetitive tasks. P R O B L E M S TAT E M E N T Efficiency P R I N C I P L E As a designer, I need to quickly communicate basic elements of a page to an engineer. U S E R S T O R I E S As an engineer, I need clear instructions detailing how components will be used.
  25. 25. M E T R I C S U S E R S T O R I E S P R I N C I P L E S
  26. 26. As a designer, efficiency means… Decrease in JIRA story size Decrease in QA tickets M E T R I C S Efficiency P R I N C I P L E Designer Engineer U S E R S T O R I E S x As an engineer, efficiency means… Shorter code review Fewer Github changes Decrease time to completion
  27. 27. JIRA story size Decrease in QA tickets Github changes Github pull requests Bugs filed Customer support tickets Shorter code review Time to completion Conversion rate Retention rate NPS Product management metrics Burndown Product/Feature velocity User satisfaction Product/Feature quality Team happiness Survey Cross-functional collaboration Style guide adoption Tracking analytics Style guide usage Team performance M E T R I C S
  28. 28. F I N A L LY…
  29. 29. P R I N C I P L E S M E T R I C SU S E R S T O R I E SP R O B L E M S Transparency Simplicity Efficiency As a designer, ———-—-——-. As marketing, ———————. As a PM, —————————-. As a designer, ———————. As an engineer, ——-————. As a designer, ———-—-——-. As a front-end eng, —-——-—. As an app eng, ——-————-. Satisfaction survey • Hrs spent finding answers • Faster decision-making Requirements: • Documentation of reasoning Decrease in JIRA story size Decrease in QA tickets Shorter code review Decrease in Github changes Decrease in Github changes Decrease in QA tickets Requirements: • Easy component navigation • Simple file structure
  30. 30. T H A N K Y O U Donna Chan @heyoitsdonna Isaak Hayes @isaakhayes icon credits: paul f. leszek pietrzak appdirect #clarityresearch

×