Back to main

Design System Deep-Dive

Creating a Unified Visual Language for INGO

TLDR

Developed a comprehensive design system for INGO insurance to establish consistency across platforms, improve development efficiency, and enable scaling while maintaining visual coherence. This framework streamlined the UI design process and fostered better collaboration between design and development teams.

Back to main

Challenge

Research

Core Elements

Components

Key Insights

Challenges and goals

Design Inconsistency

Variations in UI elements across different products created a fragmented user experience

Development Inefficiency

Teams spent excessive time recreating similar components across projects

Scaling Difficulties

New features and platforms required constant redesign rather than leveraging existing patterns

Research

Product and industry analysis

Audited existing products to identify inconsistencies and common patterns

Studied successful design systems from industry leaders

Gathered feedback from both design and development teams about current workflow pain points

Core Foundational Elements

Color System

Developed a flexible color system with primary, secondary, and accent colors

Created contextual variations for different use cases

Established clear guidelines for color application to maintain accessibility standards

Grid Framework

Implemented a 12-column grid system optimized for responsive design

Defined breakpoints for various device sizes

Created documentation for proper implementation across platforms

Typography

Selected Proxima Nova as the primary typeface for its versatility and readability

Established a clear type scale with defined sizes, weights, and line heights

Created usage guidelines for maintaining proper text hierarchy

Iconography

Designed a consistent icon library with unified visual style

Established guidelines for icon sizing and spacing

Created both filled and outlined variations for different contexts

Component Library

Interactive Elements

Developed a comprehensive button system with clear states

Created consistent input fields with validation states

Designed toggles and selectors for various interaction patterns

Content Containers

Developed image card templates with various layout options

Created form structures with consistent styling and behavior

Data Visualization

Designed chart components with customizable styles

Created loading and progress indicators for system feedback

Key Insights

Balance between flexibility and consistency is crucial for adoption across different product needs

Documentation is as important as the components themselves for successful implementation

Collaboration between design and development early in the process leads to more implementable solutions

Design System Deep-Dive

Design System Deep-Dive

Design System Deep-Dive

Creating a Unified Visual Language for INGO

Creating a Unified Visual Language for INGO

Challenges and goals

Challenges and goals

Research