Design System Development
Design System Oviva Patient Management System
Project Duration
9 months +
Team
Designer & Front-end devs
Outcomes:
Efficiency, consistency, scalability
Design System Development
Design system Oviva Patient Management System
Leading the development of a web-based design system from 0 -> 1
Design System Development
Design system Oviva Patient Management System
Project Duration
9 months +
Team
Designer & Front-end devs
Outcomes:
Efficiency, consistency, scalability
Project duration
9 months +
Team
Designer & Front-end devs
Outcomes:
Efficiency, consistency, scalability
The Problem - No design system. No consistency. Lots of headaches.
Over the years, the health coaches' patient management platform had grown fast but without much design oversight. Every team implemented UI elements however they saw fit, leading to messy inconsistencies, lots of duplicated work, and design elements that didn't follow UX principles and standards. It was clear: the app needed a design system. Not just to speed up the development process but also to improve the design quality of the platform to minimize UX friction to the health coaches whose time was so valuable.
The Problem - No design system. No consistency. Lots of headaches.
Over the years, the health coaches' patient management platform had grown fast but without much design oversight. Every team implemented UI elements however they saw fit, leading to messy inconsistencies, lots of duplicated work, and design elements that didn't follow UX principles and standards. It was clear: the app needed a design system. Not just to speed up the development process but also to improve the design quality of the platform to minimize UX friction to the health coaches whose time was so valuable.
The Goal
To bring order to the chaos: create a reusable component library and a design system that provides clear guidelines and specifications — making the UI more consistent, scalable, and efficient for developers and designers alike.
The Goal
To bring order to the chaos: create a reusable component library and a design system that provides clear guidelines and specifications — making the UI more consistent, scalable, and efficient for developers and designers alike.
My role
As the owner of the project, my role was to align with the front-end engineering teams, bring a common understanding of what we'd like to achieve, and produce the research, design, specification and guideline creation to each component in our system. After the development of the component library, my last task was to review the quality and sign it off.
My role
As the owner of the project, my role was to align with the front-end engineering teams, bring a common understanding of what we'd like to achieve, and produce the research, design, specification and guideline creation to each component in our system. After the development of the component library, my last task was to review the quality and sign it off.
Where we started
We kicked things off by auditing the entire platform:
• What components already exist (and how many versions of each)?
• Which pages were being migrated next?
• Which components would be needed soonest?
We then held an in-person workshop to get alignment across the front-end & design team. We discussed how to define our components, how to document them, and how to structure the system in a way that matched our web-app’s design system — for a more unified product experience.
The key outcome of our workshop:
We aligned on a clear component development process from start to finish.
Where we started
We kicked things off by auditing the entire platform:
• What components already exist (and how many versions of each)?
• Which pages were being migrated next?
• Which components would be needed soonest?
We then held an in-person workshop to get alignment across the front-end & design team. We discussed how to define our components, how to document them, and how to structure the system in a way that matched our web-app’s design system — for a more unified product experience.
The key outcome of our workshop:
We aligned on a clear component development process from start to finish.
Research
Go through all use cases or features where the component will be needed, consider edge cases.
Design
Design the component in figma, using component properties and variants for easy usage for all designers with proper documentation.
Dev review
Developers review the designs, check the guidelines and collaborate with designer to adjust and improve the specs.
Implement & review
Developers implement the designs, designer reviews and test thoroughly.
Publish
The component is published to the library - ready for use, with proper documentation.
Designing the system
Then came the detailed work. I focused on each component one by one, making sure every variation and edge case was covered — from dropdowns to buttons. For each component, I explored & defined:
Visual design and accessibility
All possible states (hover, focus, disabled, error, etc.)
Usage guidelines and do’s/don’ts
Flows for more extensive components to better showcase the interaction design
Best practices based on Material Design and our own platform needs
Designing the system
Then came the detailed work. I focused on each component one by one, making sure every variation and edge case was covered — from dropdowns to buttons. For each component, I explored & defined:
Visual design and accessibility
All possible states (hover, focus, disabled, error, etc.)
Usage guidelines and do’s/don’ts
Flows for more extensive components to better showcase the interaction design
Best practices based on Material Design and our own platform needs
The Outcome
Since the platform was gradually being migrated from legacy codebase, the new components were rolled out as part of that process. Instead of rebuilding elements from scratch, teams now rely on a growing library of well-documented, flexible components — reducing development time and improving UX consistency. The visual and interaction design of the platform has massively improved, and now looks unified even though various teams handle different parts of the platform.
The Outcome
Since the platform was gradually being migrated from legacy codebase, the new components were rolled out as part of that process. Instead of rebuilding elements from scratch, teams now rely on a growing library of well-documented, flexible components — reducing development time and improving UX consistency. The visual and interaction design of the platform has massively improved, and now looks unified even though various teams handle different parts of the platform.
Next projects
View next project
Next projects
View next project
Next projects