A comprehensive design system created to streamline development and enhance accessibility for Vitala’s healthcare platform. Built with Atomic Design principles and a user-centered approach, it delivers a consistent, flexible, and inclusive experience tailored to the needs of elderly patients.
Vitala is an integrated platform allowing healthcare providers to prescribe, monitor, and manage diagnosis-specific exercise as medicine to patients with chronic health conditions.
Vitala consists of a Care Portal for Healthcare Providers and a Mobile App for the patients.
Project name:
Vitala Design System Implementation
Sector:
Healthcare / Health-tech
Start Date:
November 2023
Team:
UX Designer, UI Designer, Project Manager, Frontend Developer, Mobile App Developer
My role:
As a UX Designer at Vitala, I developed a comprehensive design system from scratch by collecting existing screens and design elements. I created a cohesive style guide, established design tokens for light and dark modes, and designed fundamental components. Applying Atomic Design Principles, I ensured accessibility and coherence, resulting in a modern design system tailored to user needs.
Design System
The Vitala Design System integrates a robust framework that supports design tokens and variables, enhancing both flexibility and consistency. With built-in micro-interactions embedded into components, prototyping time is reduced by over 50%, streamlining the design process. The use of color variables, paired with light and dark mode schemas, significantly optimizes production efficiency, cutting development time by 35-40%. This system ensures faster iterations, improved scalability, and a more cohesive user experience across all platforms.
The Vitala Design System includes components with built-in interactions, such as hover and click states that provide visual feedback to users. Functional popover panels are integrated into dropdowns and tooltips, offering contextual information without disrupting the workflow. These features enhance user engagement and contribute to a more intuitive and accessible interface.
Accessibility is a fundamental focus of the Vitala Design System, particularly for our elderly patient users. We implemented inclusive design features such as larger touch targets, readable typography, and high-contrast color schemes to enhance usability. By adhering to WCAG (Web Content Accessibility Guidelines) and other related standards, we ensured that all components are easy to navigate and interact with for individuals of all abilities, ultimately improving their overall experience and service delivery.
The implementation of the Vitala Design System resulted in significant enhancements in user experience and operational efficiency. We achieved a 35-40% reduction in production time, enabling faster rollouts of new features while maintaining consistent branding and improved accessibility for our elderly users.
The Atomic Design approach facilitated rapid prototyping, cutting design and development efforts by over 50%. This streamlined collaboration among cross-functional teams allowed for quick integration of user feedback, leading to a more responsive, user-centered platform. Overall, the Vitala Design System has improved workflow efficiency and elevated the quality of healthcare solutions we provide.
The development of the Vitala Design System reinforced the importance of collaboration and user-centered design in creating effective healthcare solutions. We learned that a cohesive design framework not only streamlines processes but also enhances accessibility and responsiveness to user needs.
Key takeaways include the value of involving cross-functional teams early in the design process to ensure alignment with business and user goals. The implementation of Atomic Design principles proved instrumental in creating scalable components that facilitate rapid iterations and prototyping.