Building and scaling a design system for Agartee Technology Inc.
Project information
- ROLEUX/UI Designer
- TEAMProduct Manager, Engineers
- TIMELINEApril 2023 - Present
- TOOLSFigma, Notation, Canva
Introduction
Agartee Technology's existing design resources were outdated and lacked the structure necessary for efficient and consistent design. The previous system, limited to basic color palettes and typography specifications, proved inadequate for the complexities of designing boththeir redesigned website and new patient data management application. This project directly addresses this deficiency by creating a fully functional, modern design system, incorporating best practices for component reusability, style consistency, and future scalability. The resulting system significantly improves the design process and ensures a cohesive user experience across all platforms.
Project Overview
This project resulted in a comprehensive design system for Agartee Technology, aimed at unifying the design language across their redesigned website and new patient data management application. The system includes a modular component library, a typography system, a cohesive color palette, and detailed style guides, all of which ensure consistency, scalability, and ease of use for future development efforts.
Problem Statement
What strategies can be employed to create a scalable and maintainable design system for Agartee Technology that enhances user experience across multiple platforms while remaining accessible to designers and developers?
Challenges
- Maintaining Consistency Across Platforms: Ensuring a unified brand experience and consistent user interface across the diverse requirements of a website and a data-heavy mobile application posed a significant challenge. Variations in screen sizes, input methods, and user expectations required careful consideration.
- Scalability and Future-Proofing: Designing a system flexible enough to accommodate future features, updates, and potential expansion of Agartee Technology's services was crucial. The system needed to be adaptable without requiring major overhauls.
- Balancing Stakeholder Needs: Aligning the needs of designers, developers, and end-users required careful onsideration and communication. Finding a design language that met everyone's needs was a delicate balancing act.
- Data Visualization and Accessibility: Effectively presenting complex patient data in a clear, concise, and accessible manner within the mobile application was a key challenge. The design needed to be both informative and easy to understand for users with varying levels of technical proficiency.
- Clear and Concise Documentation: Creating comprehensive and easily understandable documentation for the design system was essential for its adoption and maintenance by the development team. This required a well-structured and user-friendly guide.
- Integration with Existing Systems: Seamless integration of the design system with Agartee Technology’s existing infrastructure and workflows was critical. This required thorough consideration of data security, privacy, and compatibility with existing technologies.
Solutions
- Modular Component Library: Developed a comprehensive and reusable component library in Figma, ensuring consistency across both the website and the mobile application. This library included pre-built components for buttons, forms, and other UI elements.
- Comprehensive Style Guide: Created a detailed style guide that included specifications for typography, color palettes, spacing, and other design elements. This guide provided clear guidelines for designers and developers.
- Iterative Design Process: Employed an iterative design process, incorporating regular feedback from stakeholders and users to refine the design system and ensure it met their needs.
- Version Control System: Implemented a version control system (e.g., Abstract) to manage and track changes to the design system, ensuring collaboration and preventing conflicts.
Foundations
Foundations cover the core components, including color systems, typography, iconography, imagery, and accessibility guidelines. All aspects are documented as tokens in Figma, facilitating seamless integration for both designers and developers.
How can I ensure this(Atomic DS) is beneficial for designers and developers?
Reflecting on the core challenge – how to develop a design system that is scalable, maintainable, and accessible for both designers and developers – I recognized the importance of incorporating the perspectives of both groups. To achieve this, I collaborated with a front-end developer to enhance the design system. Together, we integrated design token and CSS classes into the Figma file. This approach allowed us to align our thinking and improve our communication, ensuring that the design system meets the needs of all stakeholders effectively.
Each component is designed based on the principles of atomic design, ensuring consistency, reusability, and scalability across the user interface.
- Atoms: Basic UI components like buttons and input fields.
- Molecules: Functional elements that combine atoms, such as a form.
- Organisms: More complex structures that integrate multiple molecules and atoms.
Color Styles:
This section defines the core color palette for the Agartee project, encompassing action colors, grayscale variations, and alert status colors. These styles ensure visual consistency and accessibility across the application.
Additionally, Figma tokens have been created for developers to streamline the implementation of these colors in code. Each token is linked to a specific color style, allowing for easy access and integration within design and development workflows.
Tokens Overview:
- Action Colors: Define primary interaction elements (e.g., buttons, links).
- Grayscale: Provide neutral colors for backgrounds, borders, and text.
- Alert Colors: Indicate status messages (Informative, Success, Critical, Warning) to guide user actions.
Typography:
This section defines the typography system to outline font choices, scaling, hierarchy, and usage guidelines. All typographic styles are defined as Figma tokens for easy access and implementation.
Grid System:
The Agartee design system incorporates a versatile grid system tailored for mobile, laptop, and desktop devices. This grid framework serves as the foundation for responsive layout design, ensuring consistency and alignment across various screen sizes.
Iconography:
System icons, also known as action indicators, play a crucial role in enhancing user experience within components. These icons come in various scales, typically ranging from 16px to 24px, and are designed to provide visual cues for user interactions, such as buttons, toggles, and menus.
Level 1: Atoms
Buttons:
Level 2: Molecules
Input Fileds:
⌘ Color Styles & Naming Conventions
The Color Styles & Naming Conventions section serves as a comprehensive guide for developers, ensuring consistency and clarity in the application’s visual design.
The color palette is organized into distinct categories, each with specific naming conventions that enhance usability and understanding. The categories include:
- Primary Colors: Example include: Primary/100 (Lightest variant)
- Accent Colors: Example include: Accent-1/100 (Lightest variant)
- Neutral Colors: Example include: Neutral/100 (Lightest shade)
- Informative Colors: Example include: Success/100 (Green for successful operations)
- Text Surface Colors: Example include:Text-Surface/light (Primary text on dark backgrounds)
⌘ Typography Guidelines for Developers
The system utilizes two primary font families—'Hind' and 'Open Sans'—selected for their readability, versatility, and visual appeal.
It's the specific font styles and sizes for various text elements within the application. This includes:
- Headings: 'Hind' is used for headings (H1, H2,H3, H4, H5, H6)
- Body Text: 'Open Sans' is employed for body text (Regular, Semi-Bold, Bold)
- Buttons: Button text utilizes a specific style of 'Hind' (Bold or Semi-Bold)
- Subheadings: Using 'Open Sans' to maintain a cohesive hierarchy
⌘ Alert Cards and Notification Messages
The Alert Cards and Notification Messages section provides a comprehensive guide for developers on the design and implementation of alert cards and notification messages within our application. The categories include:
- Anatomy of Alert Cards: Alert cards consist of a title, message body, action buttons, and icons. Each component plays a crucial role in conveying the intended information effectively.
- Layout and Spacing: They maintain uniform margins and padding to ensure a clean, organized appearance.
This section describes the user research activities that shaped the Agartee Design System and how key insights directly informed each design iteration. A user-centered approach was fundamental to ensuring the system’s usability and effectiveness for all stakeholders, including designers, developers, and product managers.
Key Findings:
- Consistency and Predictability Participants emphasized the importance of a unified visual language and consistent interaction patterns. This feedback led to the development of well-documented style guidelines to support cross-team consistency.
- Developer-friendly Documentation: he developer requested clearer implementation instructions, including code snippets and use-case guidelines. As a result, I created detailed documentation tailored to developer workflows.
- Accessibility Enhancements: Both users stressed early integration of accessibility standards. Their input drove improvements in color contrast, keyboard navigation, labeling, and alternative text usage.
- Responsive Flexibility: The need for adaptability across devices was highlighted. I incorporated responsive patterns and tested key components to ensure usability on varying screen sizes.
Quantifiable Results:
| Metric | Result |
|---|---|
| Design time | Reduced by 35% |
| Development cycle | Shortened by 40% |
| Qualitative Feedback | Markedly increased, with both designers and developers reporting greater clarity, consistency, and efficiency |
The Agartee Atomic Design System is an evolving framework. Core components and design foundations have been established, but ongoing work continues to expand and refine the system. While the initial phase focused on the patient data management application, the company’s recent website redesign temporarily shifted priorities. Development of the design system remains active, with continued efforts to enhance scalability, accessibility, and multi-platform integration through iterative feedback.