MA Design System
The Challenge
Mediassist’s platforms—spanning B2C apps, B2B SaaS tools, and internal systems—faced fragmented visual styles, inconsistent UI components, and repetitive design efforts. These inconsistencies led to inefficiencies in development workflows and challenges in maintaining brand identity across touchpoints. Our goal was to establish a scalable and reusable design system to ensure visual cohesion, streamline development, and deliver a seamless user experience across all platforms.
Duration
Team
Tools
Audit & Research
Conducted an audit of existing designs across physical offices, B2C apps (Maven, Mayfair), internal tools, and B2B platforms for insurers, corporates, and brokers.
Identified redundant components, misaligned visuals, and usability issues.
Stakeholder Collaboration
Worked closely with stakeholders, designers, and developers to define needs.
Allowed platform-specific customizations while ensuring alignment for key products like the Maven B2C app, which mirrors Mediassist’s physical branding.
Component Library Creation
Standardized buttons, forms, typography, and color palettes, using token-based color systems to enable flexibility while maintaining usability.
Scalability Focus
Designed components for adaptability across mobile, web, and internal tools, ensuring longevity and ease of use.
Colors
Font
Iconography
80% icons are custom created and rest are from open source platforms.
Illustrations
Illustrations are mostly sourced from open source platforms like freepik and storyset, and after they are modified according to their need.
Spacing & padding
Order objects by law of proximity: The law of proximity is a Gestalt psychology principle that describes how the human eye perceives objects that are close together as related, even if they differ in other characteristics
Aligning with development team to follow the system
Created detailed usage guidelines for designers in Figma and imported components into Storybook for developers.
When you have a standard pallete of 10 colors, team is confused which is to be chosen and for what all use cases. To streamline this, we have implemented color tokens which reduces decision fatigue, for text there is only 2 colors to choose from for grey.
