Overview
The Negin Design System is the design powerhouse behind IRISA, uniting over 600 team members across 20+ projects, from ERP to information systems. Built from the ground up with the Atomic Design approach, it brings consistency, efficiency, and clarity to every project.
Team
Me (UI designer / UX designer), Design Lead, Content Writer
Date
Sep, 2021 - Mar, 2022 / 6 months
Category
Web Design - Responsive Design
Tools
Skills
Why IRISA needed a design system?
Inconsistency: Uniformity lacked not only between different products but also within a product's distinct modules.
Lack of Reliable Source: Designers and developers lacked a standardized guide, leading to the application of personal opinions in the development process.
Duplication: Time was wasted on rewriting identical components, highlighting the need for a streamlined approach to avoid redundant efforts.
Outdated Technology: Numerous components were developed using outdated technologies, necessitating the search for new alternatives to modernize and optimize these components.
So, we need a Design System as a single source to view components, patterns, and styles.
01/
How Did We Identify the Building Blocks of Our Design System?
The whole team got together to create a components list based on the common components used within the projects and any new components that are needed in future. To strengthen our approach, we drew inspiration from leading design systems like Atlassian and SAP Fiori, blending best practices with our team's unique requirements.
The design system unfolded in three phases, with the first four-month phase the focus here. Using Trello, we broke down the system into atomic components and assigned tasks efficiently.
02/
What did I do During the design Journey?
The design process explored each component’s functionality, addressing key questions and leveraging research insights. Using Figma, I crafted components aligned with user needs, business goals, and technical constraints.
This design system was my first assignment at IRISA, made even more challenging by the remote work constraints of the COVID-19 lockdown. Without meeting my team face-to-face, So, I implemented structured plans and regular virtual collaborations, successfully delivering a robust system on schedule.
Documentation Structure
· Introduction: component overview, usage guidelines, and visual preview
· States and variations: Defines how the component behaves in different scenarios and offers its style variations.
· size and spacing specifications: Outlines precise details on dimensions, colors, and typography for a consistent design.
· accessibility considerations: Ensures components are usable for everyone, including those with disabilities.
· dos and don'ts: Highlights best practices and common pitfalls to avoid when implementing the component.
· dark design: Adapts components for dark mode, ensuring usability and visual consistency.
What Real Changes Did the Design System Bring?
Reusable components and streamlined workflows reduced project timelines by 18%, saving significant time and effort.
The enhanced look and usability of interfaces delighted both end-users and high-level managers, leading to increased product satisfaction and a rise in sales.
Standardized components cut down development errors and saved time for developers, increasing overall productivity.
Teach Beyond Documentation
Written guides are essential, but true learning happens through live sessions like office hours, design reviews, and workshops.
Consistency Beyond Atoms
Atomic design isn’t just about individual elements—it’s about ensuring harmony when these elements combine into larger components.
Design doesn’t end at delivery
a design system is a cultural shift. Even after two years, I continue to lead meetings and one-on-ones, introducing design principles and ensuring the system thrives across all levels.
