HealthGrid
Design System and App Design
Introducing a comprehensive Design System for the India Stack Digital Health Ecosystem, crafted to empower developers and designers with reusable, accessible components and a unified visual language. It ensures consistency and inclusivity across platforms. Demonstrated through a user flow for booking a healthcare appointment designed for low literate users.
Scope
Design system, Component Library, Interface Design, Accessibility
Timeline
August 2024, 2 weeks
Project Type
Team, 3 members
Design System with a direction
India's digital health revolution demands solutions that are
accessible, scalable, and culturally resonant.
Driven by technological advancements and rising healthcare needs, this project establishes a design system tailored for digital health, featuring multilingual support, inclusive components, and a unified visual language.
Atomic Design System
From small, modular components like atoms to a whole
Atoms
Molecules
Organisms
Templates
UI Screens
WHO is this for?
There is no front-end framework or design system tailored for accessible digital health interfaces in India until now. This system helps designers to drag, drop, and customize pre-built, WCAG-compliant components and developers to ship faster with code ready, themable UI assets.
HOW to use this system?
With the help of clear guidelines and use cases, this design system will help designers and developers to build digital health platforms, public health portals, telemedicine apps, patient dashboards, appointment interfaces or even health records with consistency.
Healthcare is expansive and provides a huge scope for Platform Applications
Studying the existing systems first
Studying existing apps tailored to digital health, was a crucial step in creating an effective and comprehensive design system. By analyzing what works well in existing systems, we drew insights to avoid common pitfalls, and ensure that your design system aligns with best practices and current standards.
Denmark
Everything about your health can be gathered in one place – namely at your fingertips. In the MinSundhed app, you can access selected health data from sundhed.dk.
MitID is the primary eID in Denmark. It's widely used by almost 5 million people to access both public and private services, as well as for signing documents.
Denmark ranks as number one in digital health readiness, according to OECD.
In Denmark, you can access your records from public hospitals on sundhed.dk. The website and records are in Danish. You need MitID to login to access.
India
AAYU
e-Sanjeevani
Three core pillars of this design system
Foundation
Establishes the core visual language, functional, and accessibility principles
Reusable Components
Translates the foundations into functional, ready to use components
Content Guidelines
Ensures all written communication is clear and aligned with the system’s voice and tone
Introducing
HealthGrid
Calendar
Foundations
Reusable components
Content Guidelines
Using the HealthGrid design system, we made user flow for booking an Appointment
Featuring the smart AI voice Assistant
please keep the volume on
