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