/ Company
/ Company
/ Company
Zelis
Zelis
Zelis
/ Role
/ Role
/ Role
System Evangelist
System Evangelist
System Evangelist
/ Date
/ Date
/ Date
2021-2023
2021-2023
2021-2023
Growing
Growing
Growing
Growing
A
A
A
A
Design
Design
Design
Design
System
System
System
System
[3]
[3]
[3]
/ About the project
/ About the project
/ About the project
We built a design system from the ground up to support a small suite of products. Then, our business was acquired, and we grew the system to service ten times the products, designers, and engineers.
We built a design system from the ground up to support a small suite of products. Then, our business was acquired, and we grew the system to service ten times the products, designers, and engineers.
We built a design system from the ground up to support a small suite of products. Then, our business was acquired, and we grew the system to service ten times the products, designers, and engineers.
/ System Maturity
/ System Maturity
/ System Maturity
As a small team of three designers and a design director, we made the case for building a design system, detailing atomic construction philosophy, development efficiency gains, and product continuity benefits.
As a small team of three designers and a design director, we made the case for building a design system, detailing atomic construction philosophy, development efficiency gains, and product continuity benefits.
As a small team of three designers and a design director, we made the case for building a design system, detailing atomic construction philosophy, development efficiency gains, and product continuity benefits.
[0]
[0]
No
System
No
System
/ Start
/ Start
[1]
[1]
Style
Guide
Style
Guide
[2]
[2]
Pattern
Library
Pattern
Library
[3]
[3]
Full
System
Full
System
/ Goal
/ Goal
[4]
[4]
Integrated
System
Integrated
System
/ Contributors
/ Contributors
/ Contributors
After securing minimal leadership attention, we got to work. Etching out fractions of volunteered time from anyone convinced by the initiative.
After securing minimal leadership attention, we got to work. Etching out fractions of volunteered time from anyone convinced by the initiative.
After securing minimal leadership attention, we got to work. Etching out fractions of volunteered time from anyone convinced by the initiative.
/ Tech Stack
/ Tech Stack
/ Tech Stack
With our existing products being built with Angular, we decided to take heavy inspiration from Google's Material design system while still leaning into our own needs when creating styles, components, and guidance.
With our existing products being built with Angular, we decided to take heavy inspiration from Google's Material design system while still leaning into our own needs when creating styles, components, and guidance.
With our existing products being built with Angular, we decided to take heavy inspiration from Google's Material design system while still leaning into our own needs when creating styles, components, and guidance.
/ Figma
/ Figma
/ Material
/ Material
/ Angular
/ Angular
/ Github
/ Github
/ storybook
/ storybook
/ Unique Considerations
/ Unique Considerations
/ Unique Considerations
Our products are white-labeled, ingesting client branding while also meeting the healthcare industry's high WCAG accessibility standard.
Our products are white-labeled, ingesting client branding while also meeting the healthcare industry's high WCAG accessibility standard.
Our products are white-labeled, ingesting client branding while also meeting the healthcare industry's high WCAG accessibility standard.
/ Guidance
/ Guidance
/ Guidance
Ever-changing client configurations and growing banner blindness were some of the influencers that led us to build component recommendations based on content.
Ever-changing client configurations and growing banner blindness were some of the influencers that led us to build component recommendations based on content.
Ever-changing client configurations and growing banner blindness were some of the influencers that led us to build component recommendations based on content.
/ V1
/ V1
/ V1
We successfully shipped the design system complete with all content-agnostic elements. From here, we moved into a piece-by-piece feature replacement plan, updating components within our live products in parallel with roadmap initiatives.
We successfully shipped the design system complete with all content-agnostic elements. From here, we moved into a piece-by-piece feature replacement plan, updating components within our live products in parallel with roadmap initiatives.
We successfully shipped the design system complete with all content-agnostic elements. From here, we moved into a piece-by-piece feature replacement plan, updating components within our live products in parallel with roadmap initiatives.
/ zelis acquisition
/ zelis acquisition
/ zelis acquisition
/ zelis acquisition
/ zelis acquisition
/ zelis acquisition
Pre-Acquisition
post-Acquisition
/ evolution
/ evolution
/ evolution
System governance and maintenance went from a small working team to a truly federated model, with designers and engineers across teams influencing and using the system. As the original creators, my team facilitated this collaboration and growth.
System governance and maintenance went from a small working team to a truly federated model, with designers and engineers across teams influencing and using the system. As the original creators, my team facilitated this collaboration and growth.
System governance and maintenance went from a small working team to a truly federated model, with designers and engineers across teams influencing and using the system. As the original creators, my team facilitated this collaboration and growth.
/ v2
/ v2
/ v2
We devised a system that now acts as a foundation, supporting multiple front-end languages and accommodating a suite of products with varying users, data, and channels.
We devised a system that now acts as a foundation, supporting multiple front-end languages and accommodating a suite of products with varying users, data, and channels.
We devised a system that now acts as a foundation, supporting multiple front-end languages and accommodating a suite of products with varying users, data, and channels.
/ Outcome
/ Outcome
/ Outcome
While this system continues to grow and evolve, we've reported an estimated 36% efficiency gain for design and front-end development workstreams for nearly 80 employees, resulting in hundreds of thousands of capital expenditure dollars saved annually.
While this system continues to grow and evolve, we've reported an estimated 36% efficiency gain for design and front-end development workstreams for nearly 80 employees, resulting in hundreds of thousands of capital expenditure dollars saved annually.
While this system continues to grow and evolve, we've reported an estimated 36% efficiency gain for design and front-end development workstreams for nearly 80 employees, resulting in hundreds of thousands of capital expenditure dollars saved annually.
/ Reflection
/ Reflection
/ Reflection
I'm proud of our small team's successful execution of such an enormous project using only volunteered time. However, with the growing number of active users, maintaining the system is a challenge, so I think I would've continued to lobby leadership for resources dedicated to maintaining and evolving the system.
I'm proud of our small team's successful execution of such an enormous project using only volunteered time. However, with the growing number of active users, maintaining the system is a challenge, so I think I would've continued to lobby leadership for resources dedicated to maintaining and evolving the system.
I'm proud of our small team's successful execution of such an enormous project using only volunteered time. However, with the growing number of active users, maintaining the system is a challenge, so I think I would've continued to lobby leadership for resources dedicated to maintaining and evolving the system.
