Design System for health insurance company
Interaction Design
Designs don’t scale easily and stay consistent in large organizations with ever evolving products. This case study focuses on the methodology behind creating a design system for large organization.
Role
System designer
Timeline
2023
Team Size
1 Designer
Tools
Figma, FigJam
PROJECT BACKGROUND
The Problem Statement
Although our digital products shared a common design language, the absence of standardized components resulted in fragmented user experiences and operational inefficiencies.
As the organization expanded its digital footprint and launched new products, teams increasingly relied on custom-built components, leading to duplication, inconsistency, and slower design and development cycles.
This lack of a unified system made it difficult to maintain brand coherence and scale design effectively.
The Mission​
To establish a centralized, scalable design library aligned with the new brand identity that unifies all digital products across Members, Brokers, Providers, and Internal platforms enabling consistency, efficiency, and future-ready growth.
The Deliverables
-
Build a centralized, scalable design system to unify components across all digital products and user groups.
-
Ensure full alignment with new branding guidelines for a cohesive and consistent brand experience.
-
Standardize reusable components and clear usage guidelines to improve design and development efficiency.
-
Establish a versioned system with regular updates to support evolving product needs and feedback.
-
Deliver a consistent, intuitive user experience while reducing development time and operational overhead.
Design Process
01
Understanding Requirements
In this stage we sought to get detailed understanding of existing products in the company, the tools that are being used and if there are any design libraries that are being followed. We also had detailed discussions with the branding team to understand the new branding guidelines.
02
Define Methodology
Define stage helped us set clear expectations for our project and finalize the methodology that we will use to create the design system. We also finalized on the platform on which these design system will be created.
03
Create Design Library
In this stage we created the actual design system on Figma, set the design guidelines and communicated these new guidelines to the relevant stakeholders.
04
Test & Publish
This stage included testing the components with relevant stakeholders (Designers, POs etc), documenting the final guidelines and publishing the design system as a Figma Library.
Discovery: UNDERSTANDING THE REQUIREMENTS
Discussions with Stakeholders
We had multiple discussions with all the involved stakeholders which included Portfolio Leads, PMs, Designers and developers. This helped us understand their specific requirements for their products that they were managing, how re-branding will affect their products and how we can synergize our Design System efforts with their own design migration efforts.
As a part of overhaul of the current design landscape in the company, we were also shifting from using Sketch as our major design tool to using Figma. This helped us provide right intervention while the designs were being migrated.
Analyze Existing Design Inventory
We analyzed the branding and design guidelines used in the organization and also collected required design assets and patterns used in current products. This data was further used to understand the design issues of the current artifacts and identify areas of improvement.
Brand Identity & Visual Language
The Visual design language was determined after discussion with the Branding & Communication team. This included:
Typography & Color Palette
Icons, Images, Pictograms
Tone of language
Spacing, Size, Radii, Depth & Elevation of design artifacts
Determine requirements of the design system
Based on the discussions and auditing of the existing design files and libraries, we determined the requirements for an effective design system. We also had a peculiar challenge to make these components reusable across different product categories while maintaining their own product requirement. This required us to adopt a robust design methodology for creating our the design system.
METHODOLOGY FOR DESIGN SYSTEM
​​
The modular approach in atomic design, while maintaining brand integrity, offers a structured yet flexible way to manage and scale design systems across multiple product lines.
​
Components of Atomic Design Methodology
1. Fundamental Components: Color Palette, Typography, Spacing, Grids
2. Atoms: The basic building blocks, such as buttons, input fields, and labels. These are the smallest elements that can't be broken down further.
3. Molecules: Combinations of atoms functioning together as a unit. For example, a search bar combining an input field and a button.
4. Organisms: More complex components formed by grouping molecules and/or atoms. For instance, a header that includes a logo, navigation menu, and search bar.
5. Templates: Page-level objects that place components in a layout but don’t yet contain real content. They define the structure of a page.
6. Pages: Specific instances of templates with real content. They represent the final product seen by the user.
This helped us create consistent Atoms and Molecules across all product lines. The Organisms, Templates & Pages were to be created according to specific brand requirements of each product lines. This way we could keep the basic guidelines consistent while providing flexibility across different product categories and its products.
CREATING DESIGN LIBRARY
​​Four Fundamental components of the design system
How to use the fundamental components
On Figma, the Color palettes, Typography and Grid styles can be found on the right hand panel once the library is imported to the file. Typography & Grid systems was created separately for Mobile, Table & Desktop. Color styles were created based on context of usage.

Each style was saved with context of usage in the description section to maintain consistency across applications.​
Defining Atoms, Molecules & Organisms
Creating and Using Component Properties
.png)
Each component (Atom or Molecule) can have multiple states and properties. It was important to determine and define these properties clearly before creating these as variants in Figma. Too many properties can create confusion while lesser number of associated properties can not provide required flexibility to a design system. The above example shows properties of button that was created for our design system.
Once these variants with properties are created in Figma, the component can be selected from ‘Assets’ section. Properties of this component can then be changed from the Design tab in the right hand panel to suit the requirements. With new updates for Figma, linking different states within the component was easier. This helped in reducing time required to create prototypes for our designers.
.png)
Creating Templates and Pages
TEST & PUBLISH
​
Each component was tested with the respective stakeholders for Consistency, Usability, Interactivity & Accessibility before publishing. Periodic peer reviews were also done with concerned designers who would be using certain components. Templates were further tested for its responsiveness for different screen sizes.
Following major tests were done on each component of the library.
Visual Consistency: The design language was finalized and standardized across all product groups after discussion with the respective stakeholder. The final components, their variants & states were again tested with the respective stakeholders once they were designed.
Accessibility Checks: Components were tested for compliance with WCAG standards
Functional Tests: This included usability test and testing for interactivity of the components by putting them into prototypes and testing these with internal product stakeholders. These tests were done to determine the ease of use and system’s intuitiveness.
Backward Compatibility Check: This was done to verify that any changes in Atoms will not break the components further down the line.
Once these tests were passed the design system was published and trainings were conducted among the designers on how to use the component libraries and design guidelines.
RESULTS
​​
The efficiency of the new design system was tested against existing practices in the organization. Designers were asked to create specific pages of their products with existing practices as well as new guidelines. This exercise was repeated with 4 different teams. It was found that using the new design system, the time required to create a new screen was reduced by 28% (on Average). Our design team had dedicated designers who worked on short term projects and POCs. Implementing Design System in their workflow led to marked reduction in Turn-around time for such projects.
​
The new design system also improved collaboration between various product stakeholders since there was a single source of truth for design guidelines that a product required to follow. This also helped in quick onboarding of designers and other team members on new projects.
​
Efforts of the Design System team was widely recognized and appreciated on various platforms within the organization.
TESTIMONIALS
“ The new design systems is really good to work with. It saves me a lot of time because I don’t have to copy/paste components from other projects to have consistent design components.”
-Senior Designer, Member Portal
“ This new library has been nothing short of game changer in the way we used to communicate and share designs with the devs. The interactive elements makes your life so easy during prototyping stage”
-Senior Designer, Broker Plus
CONCLUSION
The implementation of our design system proved to be a very important initiative for our company. A unified design system helped in imparting the new brand guidelines across all products. Our Atomic Design approach particularly helped in providing the required flexibility to the design teams to create page structure based on their brand guidelines.
The design system reduced time required to create prototypes & improved collaboration across different product stakeholders. This also helped us in reducing onboarding time for new designers since they could refer to the design guidelines to understand the brand requirements. There was also a marked reduction in rework required when creating new prototypes.
In summary, a well implemented design system can help designers focus on improving user experience of the products by streamlining the internal processes.