IN PROGRESS

IN PROGRESS

IN PROGRESS

Mozaic: Scaling with Consistency

Crafting a unified design language to accelerate product velocity

As a Product Design Intern at MediBuddy, I worked with the lead designer on Mozaic, our Design System, contributing to core patterns and components. This strengthened my understanding of how foundational design decisions shape scalable and accessible user experiences.

As a Product Design Intern at MediBuddy, I worked with the lead designer on Mozaic, our Design System, contributing to core patterns and components. This strengthened my understanding of how foundational design decisions shape scalable and accessible user experiences.

As a Product Design Intern at MediBuddy, I worked with the lead designer on Mozaic, our Design System, contributing to core patterns and components. This strengthened my understanding of how foundational design decisions shape scalable and accessible user experiences.

Product

MediBuddy

Skills

Responsive design

Accessibility-first design

Visual hierarchy

Component-based design

My role

Product Designer

Timeline

In process always

What's MediBuddy?

An one-stop digital platform for healthcare

A B2B2C digital healthcare platform, offers corporate employees services like consultations, lab tests, and medicine delivery. Employee benefits allows the use of a pre-funded wallet ("cashless") or reimbursement of any out-of-pocket payment.

Some numbers for context
Some numbers for context
Some numbers for context

10+

End-to-end healthcare offerings

End-to-end healthcare offerings

End-to-end healthcare offerings

30M+

Users served across India

Users served across India

Users served across India

4.5

Rating on the Google Play Store

Rating on the Google Play Store

Rating on the Google Play Store

Challenge

"Can we unify our design approach to reduce rework and ship faster?"

MediBuddy needed a robust and scalable design system to support its expanding range of healthcare services across platforms and user types. The existing UI approach lacked standardization, leading to inconsistent experiences, slower delivery cycles, and increased design-developer inefficiencies. As the platform grew to serve millions of users and multiple product lines, maintaining consistency and quality became a significant challenge.

Business goal
Business goal
Business goal

The goal was to build a flexible, reusable design system as a single source of truth—enabling faster feature rollout, reducing rework, and ensuring consistent, trustworthy user experiences across MediBuddy’s growing platform.

Key identifiable issues
Inconsistent UI Patterns

Without a central system, different designers used different design styles, causing visual and functional fragmentation across the product.

Slowed Delivery & Handoff Issues

Lack of reusable components and poor documentation led to repeated effort and communication gaps between design and engineering.

Scalability Challenges

As new services were added rapidly, the platform struggled to maintain coherence and accessibility without a unified design language.

Process

To tackle the challenges of scaling MediBuddy’s growing digital ecosystem and building a unified design system, I adopted a strategy that combined Atomic Design principles with the Lean UX process.

This approach was selected for its adaptability, emphasis on user validation, and efficiency in development.

Atomic Design

to create a clear hierarchy from foundational elements to complex components

Lean UX

to rapidly test, iterate, and improve based on real team feedback

DesignOps

to ensure the system is maintainable, documented, and adopted at scale across teams

5 Step design process

From audit to release, this process helped us ship reusable UI backed by clear documentation and team alignment.

Component design process based on lean & atomic design

A modular, iterative system that helps us think, make, and validate components efficiently—driven by user needs and scalable UI principles.

Foundational guidelines and visual styles

Typography

A consistent system of fonts and text styles.

Typography

A consistent system of fonts and text styles.

Typography

A consistent system of fonts and text styles.

Spacing

A spacing system simplifies the creation of page layouts and UI.

Spacing

A spacing system simplifies the creation of page layouts and UI.

Spacing

A spacing system simplifies the creation of page layouts and UI.

Layout Grids

Grid is used to position content and create consistent page layouts.

Layout Grids

Grid is used to position content and create consistent page layouts.

Layout Grids

Grid is used to position content and create consistent page layouts.

Corner Radius

Defines the roundness of component edges to create a friendly, modern feel across the UI.

Corner Radius

Defines the roundness of component edges to create a friendly, modern feel across the UI.

Corner Radius

Defines the roundness of component edges to create a friendly, modern feel across the UI.

Components

Buttons

A button triggers an event or action. They let users know what will happen next.

Buttons

A button triggers an event or action. They let users know what will happen next.

Buttons

A button triggers an event or action. They let users know what will happen next.

Avatars

An avatar is a visual representation of a user or entity.

Avatars

An avatar is a visual representation of a user or entity.

Avatars

An avatar is a visual representation of a user or entity.

Top Nav Bar

Primary interface element offering navigation, context, and key actions.

Top Nav Bar

Primary interface element offering navigation, context, and key actions.

Top Nav Bar

Primary interface element offering navigation, context, and key actions.

Beneficiary Select

A selection component used to choose a predefined entity within a flow.

Beneficiary Select

A selection component used to choose a predefined entity within a flow.

Beneficiary Select

A selection component used to choose a predefined entity within a flow.

Upload Module

A selection component used to choose a predefined entity within a flow.

Upload Module

A selection component used to choose a predefined entity within a flow.

Upload Module

A selection component used to choose a predefined entity within a flow.

Toast

Provides brief, non-intrusive feedback about an action or system status.

Toast

Provides brief, non-intrusive feedback about an action or system status.

Toast

Provides brief, non-intrusive feedback about an action or system status.

Slot Selection

Allows users to select a date and time from available options.

Slot Selection

Allows users to select a date and time from available options.

Slot Selection

Allows users to select a date and time from available options.

Accordion

Displays content in collapsible sections to manage space and focus.

Accordion

Displays content in collapsible sections to manage space and focus.

Accordion

Displays content in collapsible sections to manage space and focus.

Bottom Nav Bar

The bottom navigation component provides persistent global navigation across an app.

Bottom Nav Bar

The bottom navigation component provides persistent global navigation across an app.

Bottom Nav Bar

The bottom navigation component provides persistent global navigation across an app.

Section Header

Label for grouping and organizing related content.

Section Header

Label for grouping and organizing related content.

Section Header

Label for grouping and organizing related content.

Divider

A lightweight visual element that separates content sections in an interface.

Divider

A lightweight visual element that separates content sections in an interface.

Divider

A lightweight visual element that separates content sections in an interface.

Before & After Screens

Before & After Screens

Before & After Screens

A cluttered, ad-hoc interface before Mozaic (left) compared to a refined, consistent design after Mozaic (right).

Provider Central

Designed fully with the Mozaic Design System for a cohesive and scalable UI.

Impact

Within 1 month of adopting the updated design system:

20+

20+

20+

Reusable components designed

Reusable components designed

Reusable components designed

28%

28%

28%

Increase in task completion rate

Increase in task completion rate

Increase in task completion rate

35%

35%

35%

Increase in design-to-dev handoff

Increase in design-to-dev handoff

Increase in design-to-dev handoff