Banyan
A unified design system for healthcare interoperability
Role:
Design system architect
Product:
Design system
Duration: 4 months (Apr 2023 - Jul 2023)
Tools:
Figma, Storybook
Duration:
6 months (July-December 2022)
The need for unity in design
Without a design system in place, our company faced numerous challenges. Inconsistency was a major problem, resulting in a lack of uniformity in our products and branding.
Our development process was inefficient and time-consuming, as designers had to constantly start from scratch rather than building from established design principles. This lack of continuity led to a fragmented platform and poor user experience for our customers.
This case study highlights my journey as the driving force behind the development of a universal design system at Health Gorilla under a range of rebranding, engineering and product constraints.
Problem
Fragmented design infrastructure
Process
Develop a universal design system
Outcome
Consistent design framework
Design process
I conducted an audit of our existing products, researched and selected a new design framework, created a roadmap for development, and oversaw the system's adoption, implementation, and maintenance.
Audit
During a thorough review of our web and mobile products, I catalogued all UI elements that would be needed in our new system. This process involved analyzing the consistency, functionality, and user experience of each component to ensure seamless integration and in our updated design approach.
PREVIOUS PRODUCT SCREEN:
Discovery
After researching dozens of references for inspiration, I chose Google's Material Design as a benchmark for our system. Leveraging an established framework as a foundation was critical for ensuring our design system would be developer-friendly, scalable, and accessible for users.
Blueprint
I worked with internal stakeholders to develop a roadmap, defining key milestones such as the creation of a style guide, component library, and documentation standards. This four-month timeline successfully guided the launch of our new system, ensuring alignment with partner teams and business objectives.
Development
With this map to guide my progress, I built our new Banyan design system. When the system was complete, I and spearheaded its deployment across our platform, collaborating with engineers to foster a more seamless integration and adoption.
Implementing the system
It was time to implement Banyan in the product development process. I launched a pilot project to redesign several pages in our responsive web product, exclusively using UI components from the new design system. The results were consistent, scalable designs that our front-end engineers could develop and ship seamlessly.
Results and next steps
Within 4 months since deploying Banyan, we’ve witnessed the following positive outcomes in our product development process:
Average engineering handoff is 2x faster, streamlining the design and development cycle
Achieved an 80% reduction in UI inconsistencies on designs handed off to engineering
95% of products utilizing Banyan adhere to WCAG standards, significantly enhancing accessibility
Moving forward, I will continue to maintain and evolve the design system by focusing on the following next steps:
Enhanced customization options: Prioritize the development of more flexible and customizable design components within Banyan. This will cater to a broader range of product needs and allow for more tailored user experiences across our platform.
Regular design audits and updates: Implement a structured schedule for maintaining Banyan. Periodic reviews and updates will ensure that the system stays current with the latest design trends and best practices, and that our products remain adaptable in the rapidly changing digital healthcare landscape.
Ongoing enablement and collaboration: Establish regular workshops and educational sessions with product teams to foster a deeper understanding of Banyan’s capabilities and encourage its effective utilization
Banyan
A unified design system for healthcare interoperability
Role:
Design system architect
Product:
Design system
Duration: 4 months (Apr 2023 - Jul 2023)
Tools:
Figma, Storybook
Duration:
6 months (July-December 2022)
The need for unity in design
Without a design system in place, our company faced numerous challenges. Inconsistency was a major problem, resulting in a lack of uniformity in our products and branding.
Our development process was inefficient and time-consuming, as designers had to constantly start from scratch rather than building from established design principles. This lack of continuity led to a fragmented platform and poor user experience for our customers.
This case study highlights my journey as the driving force behind the development of a universal design system at Health Gorilla under a range of rebranding, engineering and product constraints.
Problem
Fragmented design infrastructure
Process
Develop a universal design system
Outcome
Consistent design framework
Design process
I conducted an audit of our existing products, researched and selected a new design framework, created a roadmap for development, and oversaw the system's adoption, implementation, and maintenance.
Audit
During a thorough review of our web and mobile products, I catalogued all UI elements that would be needed in our new system. This process involved analyzing the consistency, functionality, and user experience of each component to ensure seamless integration and in our updated design approach.
PREVIOUS PRODUCT SCREEN:
Discovery
After researching dozens of references for inspiration, I chose Google's Material Design as a benchmark for our system. Leveraging an established framework as a foundation was critical for ensuring our design system would be developer-friendly, scalable, and accessible for users.
Blueprint
I worked with internal stakeholders to develop a roadmap, defining key milestones such as the creation of a style guide, component library, and documentation standards. This four-month timeline successfully guided the launch of our new system, ensuring alignment with partner teams and business objectives.
Development
With this map to guide my progress, I built our new Banyan design system. When the system was complete, I and spearheaded its deployment across our platform, collaborating with engineers to foster a more seamless integration and adoption.
Implementing the system
It was time to implement Banyan in the product development process. I launched a pilot project to redesign several pages in our responsive web product, exclusively using UI components from the new design system. The results were consistent, scalable designs that our front-end engineers could develop and ship seamlessly.
Results and next steps
Within 4 months since deploying Banyan, we’ve witnessed the following positive outcomes in our product development process:
Average engineering handoff is 2x faster, streamlining the design and development cycle
Achieved an 80% reduction in UI inconsistencies on designs handed off to engineering
95% of products utilizing Banyan adhere to WCAG standards, significantly enhancing accessibility
Moving forward, I will continue to maintain and evolve the design system by focusing on the following next steps:
Enhanced customization options: Prioritize the development of more flexible and customizable design components within Banyan. This will cater to a broader range of product needs and allow for more tailored user experiences across our platform.
Regular design audits and updates: Implement a structured schedule for maintaining Banyan. Periodic reviews and updates will ensure that the system stays current with the latest design trends and best practices, and that our products remain adaptable in the rapidly changing digital healthcare landscape.
Ongoing enablement and collaboration: Establish regular workshops and educational sessions with product teams to foster a deeper understanding of Banyan’s capabilities and encourage its effective utilization
Banyan
A unified design system for healthcare interoperability
Role:
Design system architect
Product:
Design system
Duration: 4 months (Apr 2023 - Jul 2023)
Tools:
Figma, Storybook
Duration:
6 months (July-December 2022)
The need for unity in design
Without a design system in place, our company faced numerous challenges. Inconsistency was a major problem, resulting in a lack of uniformity in our products and branding.
Our development process was inefficient and time-consuming, as designers had to constantly start from scratch rather than building from established design principles. This lack of continuity led to a fragmented platform and poor user experience for our customers.
This case study highlights my journey as the driving force behind the development of a universal design system at Health Gorilla under a range of rebranding, engineering and product constraints.
Problem
Fragmented design infrastructure
Process
Develop a universal design system
Outcome
Consistent design framework
Design process
I conducted an audit of our existing products, researched and selected a new design framework, created a roadmap for development, and oversaw the system's adoption, implementation, and maintenance.
Audit
During a thorough review of our web and mobile products, I catalogued all UI elements that would be needed in our new system. This process involved analyzing the consistency, functionality, and user experience of each component to ensure seamless integration and in our updated design approach.
PREVIOUS PRODUCT SCREEN:
Discovery
After researching dozens of references for inspiration, I chose Google's Material Design as a benchmark for our system. Leveraging an established framework as a foundation was critical for ensuring our design system would be developer-friendly, scalable, and accessible for users.
Blueprint
I worked with internal stakeholders to develop a roadmap, defining key milestones such as the creation of a style guide, component library, and documentation standards. This four-month timeline successfully guided the launch of our new system, ensuring alignment with partner teams and business objectives.
Development
With this map to guide my progress, I built our new Banyan design system. When the system was complete, I and spearheaded its deployment across our platform, collaborating with engineers to foster a more seamless integration and adoption.
Implementing the system
It was time to implement Banyan in the product development process. I launched a pilot project to redesign several pages in our responsive web product, exclusively using UI components from the new design system. The results were consistent, scalable designs that our front-end engineers could develop and ship seamlessly.
Results and next steps
Within 4 months since deploying Banyan, we’ve witnessed the following positive outcomes in our product development process:
Average engineering handoff is 2x faster, streamlining the design and development cycle
Achieved an 80% reduction in UI inconsistencies on designs handed off to engineering
95% of products utilizing Banyan adhere to WCAG standards, significantly enhancing accessibility
Moving forward, I will continue to maintain and evolve the design system by focusing on the following next steps:
Enhanced customization options: Prioritize the development of more flexible and customizable design components within Banyan. This will cater to a broader range of product needs and allow for more tailored user experiences across our platform.
Regular design audits and updates: Implement a structured schedule for maintaining Banyan. Periodic reviews and updates will ensure that the system stays current with the latest design trends and best practices, and that our products remain adaptable in the rapidly changing digital healthcare landscape.
Ongoing enablement and collaboration: Establish regular workshops and educational sessions with product teams to foster a deeper understanding of Banyan’s capabilities and encourage its effective utilization