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
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
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
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
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
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
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