P R A C T I C A L R E S E A R C HB 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
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
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
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 SWhat 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
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 SB U I L D E R S
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
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 T
I have to go through every single redline. And many are repetitive.
- Engineer
People wasting time on repetitive tasks
Information not readily distributed to all teams
Unwieldy and unsustainable code base
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 W A 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
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
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
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 EAs 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.
M E T R I C SU S E R S T O R I E SP 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 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
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
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, ———-—-——-.
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
T H A N K Y O UDonna Chan @heyoitsdonna
Isaak Hayes @isaakhayes
icon credits: paul f. leszek pietrzak
appdirect
#clarityresearch