Jen Cardello and Carl Tsui from AthenaHealth

1. Initiating and Sustaining
Design Systems for the
Enterprise
Jen Cardello & Carl Tsui
February 14, 2018
1

2. ©athenahealth 2
INITIATING SUSTAINING
Background Identifying what to build
Assembling the team Adoption, contribution, governance
Choosing technology Measuring success
Next Steps

3. © athenahealth
Our Enterprise
3
Employees
6k
Scrum
Teams
200
Developers
850
Scrum
designers
64
Applications
lots
Tech Stacks
7

4. athenahealth Experience Design Org
PRODUCT
Design
Architect
Design
Manager
Scrum Designers
PRODUCT
Design
Architect
Design
Manager
Scrum Designers
PRODUCT
Design
Architect
Design
Manager
Scrum Designers
Team size: ~90 Locations:
Watertown, MA (75)
Austin, TX (4)
Chennai, Bangalore, Pune (6)
New Zealand (1)
STRATEGIC DESIGN
PRODUCT MANAGEMENT
EXPERIENCE MEASUREMENT
HEAD OF DESIGN-OPS
Jen Cardello | Executive Director
PLATFORM DESIGN
DESIGN RESEARCH
FULL STACK & UX ENGINEERING
CHIEF EXPERIENCE OFFICER
Scott Mackie | Executive Director
4
Carl Tsui

5. DesignOps
Charter
Scale through leverage
1. Build systems and services to help scrum teams
design, build, measure, and test user experiences
without friction or undue overhead.
2. Incubate cross-product, design-led initiatives to
improve the quality, efficiency, and ROI of athena
products.
3. Provide design support for initiatives and products
outside of core athena products.

6. 2018
Initiatives
1. Drive cohesive product design & build
by launching a Design System and tools
2. Enable data-driven product development
by rolling-out the Experience Measurement
Framework
3. Deliver high-quality product definition
by providing human-centered design tools &
services
4. Create frictionless cross-product workflows
by developing Global Experiences

7. 7
Focus on UI
specification robs time
from designing highly
valuable & engaging
experiences
Teams are spending
valuable time recreating
the basics for every
feature and function
they work on.
A lack of standards has
led to the accumulation
of “Design Debt”
Design Quality Velocity Consistency
Status Quo:
● 200 scrum teams, no “Source of UI Truth”
● Scattered knowledge leads to wasteful reinvention
● Monolithic architecture limits reuse of parts
● “Distance” between design and engineering process requires heavy design documentation
The Problems we aim to solve with Forge

8. 8
DESIGN PROCESS
DESIGNERTIME
Vision Blueprint Workflows Detailed UI Design
Current
Future
Focusing designer time on higher-value design activity

9. ● Space on company intranet
● Slack channels
● Jira and Confluence
● Hackathon
User/Contributor Groundswell
● Memos
● Roadshows
● PRSM (Product Roadmap
Strategy Meeting)
● Live demos
Leadership Buy-in
Communicating for Buy-in
9

10. 1. Executive Summary
2. Progress thus far
3. What we can achieve by [when]
4. Current State
5. Vision
6. Definition of Design System
7. Impact
8. Who else has a Design System?
9. How we’ll build it and ensure adoption
10. How it’s different than anything else we have currently
11. Goals
12. Roadmap
13. Measures of Success
14. What we need from you
The memo for leadership: Outline
10

11. Getting Started
11

12. Assessment:
70 people interviewed
in 1 week
North Star Advisory:
High-level strategy
development
Visual design kick-off
12
Early Expert Guidance
Experts: Brad Frost, Dan Mall, Josh Clark

13. Design System Roadmap
Interface audit
Visual design
language
Establish
integration
strategy & tech
Design System
Web Site
MVP with pilot
projects
Select pilot
projects
MVP strategy
Address
technical debt
17.11
Launch 1.0
18.3
Early adopter
program to refine
designs
Final content
edits and
component
testing
13

14. © athenahealth
Assembling the Team
14

15. Design Systems
• Designs and develops
foundational UI element and
atomic components
• Establishes initial technical
architecture
• Facilitate guidelines creation
and documentation
• Maintains cross-product
perspective on requirements
• Assists products with adoption
• Defines and executes code
and design governance model
Each Product…
• Design and/or develops
components according to
design system guidelines
• Integrates the design system
into their respective application
codebases
• Manages technology-specific
versions of the design system
• Looks for opportunities to
contribute to the design
system
Design
Systems
Team
Product
Team
Product
Team
Design Systems Team / Product Relationship
15

16. ©athenahealth
Current Design
System Scrum Team
Roles
16
1Product
Owner
3UX
Engineers
2Full Stack
Developers
2Experience
Designers
1
Content
Designer
Business representative,
product management
Web site content
creation, technical
documentation,
editorial
Including Scrum Master role;
coding, integration,
infrastructure
Coding, prototyping,
interaction design
Component
interaction design
and usability
Foundational UI elements
and visual language

17. Technology
17

18. UI framework-agnostic design system
UI framework specific
implementations of
design system
Product specific
UIs built with
design system
Polymer
Angular
Legacy
Product
Product
Product
Product
Product
Visual
Design
Language
HTML
CSS
SASS
React
Design
Guidance
Healthcare
oriented design
and usability
principles
Presentation
code
Visual themes
applied to UI
elements
Interactivity
code
?
Design Systems Architecture
18

19. ● Widespread industry adoption and support
● Good for creating reusable components
● Productive for developers
● Define evaluation criteria
● Write test application in each framework
● Performance benchmarks
● Developer tooling support
● Author recommendation paper
Assessment Methodology
Technology Architecture Review Process
19

20. 20
“Buy” Everything Build Everything Curate
Benefits
Cheaper and quicker time to
initiate a product if no/little
UX/dev resources are expended
on re-designing or re-writing
common components
Deep understanding of
design and technology
decisions
High product consistency by
addressing athenaNet
specific cases from the
outset with fewer
compromises
Build simple, buy complex: Best
of build and buy as appropriate
Establish design and
development principles by
creating foundational pieces.
Use knowledge to make smart
buy vs. build decisions including
advice to contributing teams.
Costs
Lack of product consistency
between teams as
customizations are made
individually
Lack of athena specific design
and implementation guidance
Slowest time to having a
“complete” design system
Some components are very
costly to design, code, and
test from first principles
Re-invention
Unifying disparate sources of
design and code into a coherent
visual language and API is
challenging
Build versus Buy

21. Building a Backlog
21

22. Steel Threads
Modern
technical
architecture
Priority pilot
UI element
inventories
Design System
backlog
v1.0 product
essential UI
elements
+ + =
22

23. 4. Fulfills a design,
business, or technical
goal for design
system
5. Cross-disciplinary
alignment on
participation in pilot
program
1. Scrum team 2. Product roadmap 3. Designs
Pilot Program Prerequisites
23

24. 24
Decomposing existing workflows

25. Identify repeating user interface
25
Pilot inventory

26. Prioritization
considerations:
● Pilot participant needs
● Design system needs
● Level of effort
● Cross-product interest
● Similarity of behavior
and purpose
● Foundational
component versus
higher level “organism”
26
Initial Component Backlog

27. Product A backlog
Product B backlog
Forge backlog
Multi-scrum team pilot execution
27

28. © athenahealth
Adoption,
Governance, Contribution
28

29. 29
Change Management is Key

30. ©athenahealth 30
Illustration from Intercom on Jobs-to-be-Done: https://www.intercom.com/books/jobs-to-be-done
1. Be very deliberate in your messaging

31. ©athenahealth 31
Scope to core set of
cross-product items
(atoms and molecules)
Minimize variations
to core set
Favor adoption
over control
2. Define your Guiding Principles

32. ©athenahealth
Breadcrumbs
Buttons
Icons
Split Button
Checkboxes
Comments
Calendar/Date picker
Select
Multi-select
Filter
Feeds
Forms
Form Fields
Links
Lists
Messaging
Modals
Pagination
Patient banner
Pop-ups/overs
Progress indicator
Radio Group
Dropdowns
Loaders
Forge Core & Forge Extensions
atoms molecules organisms templates pages
Source: Pattern taxonomy from Atomic Design by Brad Frost
Cross-product reusabilityForge Core Extensions
Combining atoms, molecules, and
organisms to create new patterns

33. ©athenahealth
3. Provide Robust Outreach
and Education
Seminars
• Introduction to UI Development with Forge
• Introduction to Design with Components
• Understanding Forge UI Architecture
Apprenticeships
• Side-by-side training for individuals to new
standards of design, coding, and testing in
the context of their work
Promotion!
Wake.io
33

34. ©athenahealth
contribution
34
Merge to Repository
New Component
Pre-design Design & Prototype Design / Dev Iteration Submission
Initial Effort
Variation or Convert
Existing Component
Contribution Complete
• Forge Core roadmap fit
• Review code standards
• Advise and publicly record
estimated contribution date
• Draft design and guidance
• API design; 3rd
party lib review
• Work with design system team
on technical and interaction
design according to Forge
visual design specifications
• Review existing use cases for roadmap match
• Define technical migration approach
• Advise and publicly record estimated contribution date
Build it
• Finalize design and guidance
• Code with Contributor
Developer’s Kit
Pull Request
• Create request to Forge repository
• Review component design, code,
and guidance
• Re-code/design as needed
• Code is merged for next release
• Release notes and
documentation updated

35. EXPERIENCE MEASUREMENT FRAMEWORK (v 1.1)
Sense and respond to
opportunities:
● Pick a prioritized unmet
user need
(Job-to-be-done)
● Use internal and
research-acquired
knowledge to understand
the “why” behind the
unmet need
● Define what we could
build to solve the unmet
need (concepts)
Test concept prototypes
to determine:
● Does it resonate?
● Is it useful?
● Is it usable?
Put the feature into
production with a
limited set of users to
determine:
● Is it designed well?
● Are hypotheses
proven/disproven?
(e.g., adoption, time
savings, etc.)
● How is it perceived by
users?
Monitor applications:
● Where do users spend
their time?
● What is causing user
pleasure & pain?
DESIGN THE RIGHT THING DESIGN THE THING RIGHT
ALPHA | BETA GAEXPERIMENTATIONDISCOVERY
Usage Governance

36. ©athenahealth 36
Design Quality
Nielsen’s 10 Heuristics for Interface Design
1 Consistency and standards
2 Match between system and the real world
3 Visibility of system status
4 Flexibility and efficiency of use
5 Error prevention
6 Aesthetic and minimalist design
7 Recognition rather than recall
8 Help users recognize, diagnose, and recover from errors
9 User control and freedom
10 Help and documentation
NEW! Forge adherence
SEVERITY RATINGS
SCORE DESCRIPTION
4 Excellent - No issues that impact user success
3
Acceptable - Minor usability flaws that do not impede
task success.
2
Minor problems - One or more minor usability issues
that are impediments to efficiency and satisfaction, and
should be given a low priority to fix.
1
Major problems - One or more issues could lead to task
failure or task workarounds and are important to fix
0
Critical problems - One or more issues will likely
contribute to task failure, abandonment, and/or
downstream impacts. These issues are imperative to fix.

37. © athenahealth
Measuring Success
37

38. ©athenahealth 38
Metric Indicates
Component growth rate (by GA
release)
How comprehensive the library is
Component contribution rate from
the community
(versus Design System team)
How engaged the community is
Component usage within
new/redesigned features
applications
To what extent it’s being utilized
Metrics we’ve considered

39. ©athenahealth
Metric Breakdown
39
Features that
have used Forge*
All released features
enumerated for
readiness review
* Used defined as at minimum having included the Forge stylesheet(s) and at least one Forge component
%of released features
using Forge

40. ©athenahealth
2018 Adoption Goal
40
50%of released features using the Forge
design system by year end 2018

41. Thank you! Questions?
Jen Cardello
jcardello@athenahealth.com
jencardello
Carl Tsui
ctsui@athenahealth.com
41