Design System

A design system is a guide and toolkit that helps teams create digital products in a consistent way. It includes a set of components and styles, explaining how and why they should be used.

Design System

When we talk about AI, it's about making humans better at their jobs. It helps us do things more precisely. AI isn't just about A design system is a guide and toolkit that helps teams create digital products in a consistent way. It includes a set of components and styles, explaining how and why they should be used. Think of it as a design language that keeps product and design teams aligned, reducing confusion and extra work.

A design system ensures that digital products have a consistent look and feel. It acts as a "single source of truth" for designers, developers, and product teams. With clear guidelines, teams can create better user experiences more efficiently.

For example, if a developer needs to add a search feature, they may have several questions:

1. What should the default design look like?

2. How should it appear in its normal state?

3. What should be its width and shape?

4. How should it look when disabled?

5. What colours should be used?

6. How should it look with a label?

A design system answers these questions, ensuring consistency across the product.

​

I started working with the Appian Platform and its design system in 2022. Over time, I saw how it evolved to meet new requirements as the platform matured. When I first created wireframes, I faced challenges in fitting them to the requirements. But as I explored the design system, I began to understand how Appian structured its design and what kinds of applications could be built with it. Over the past two years, I have seen how Appian has grown, continuously adding new components and guidelines. This is likely because more clients have started using the platform for different types of applications. Since Appian is a low-code platform focused on record-centric applications, most of its components are designed for such use cases. I found many elements like form fields, search bars, CTA buttons, grids, cards, charts, status tags, layout structures, and accessibility guidelines—everything needed to build record-based applications.

Benefits of a Design System

​

• Consistency: Users become familiar with common patterns and interactions, making navigation easier and more intuitive. A consistent design reinforces brand recognition.

• Efficiency: Reusable components reduce design and development time, speeding up delivery. Designers can focus on problem-solving instead of repetitive tasks.

• Scalability: The system can easily adapt to new products, features, and platforms as technology and user needs evolve.

• Team Collaboration: A single source of truth helps designers and developers work together smoothly, reducing misunderstandings.

​

​​

Design Strategy

Building a design system should be treated like a project, with a clear strategy and roadmap. However, you don’t need to start from scratch—you can refer to existing design systems that provide UI components, guidelines, design files, and even code.

Now, let’s look at the strategy for creating a design system for an enterprise application. The goal of an design system is to help designers and developers quickly build applications that stay consistent and offer a smooth user experience.

​

Here are three key elements to focus on:

​

• Accessibility: Ensure the design system supports users with disabilities. This includes screen reader compatibility, keyboard navigation, color blindness support, and proper contrast. Follow WCAG guidelines for details.

• Scalability: The system should be able to grow and adapt to new features and future needs.

• Performance: Focus on fast loading times and smooth user interactions.

​

Planning the Evolution of a Design System

​

To grow a design system effectively, follow these steps:

​

• Start with Core Components: Focus on essential elements like buttons, forms, grids, and typography. These foundational patterns create a strong base.

• Expand to Complex Components: Add advanced elements like data tables, charts, and dashboards, tailored for the insurance domain.

• Introduce Advanced Features: Incorporate AI-powered assistance, personalized experiences, and voice interactions to enhance usability.
   

Roadmap
Now, let’s create a roadmap and put the plan into action!

​​​​

Discovery

​

• Define Business Goals: Identify the organization’s key objectives. Are they aiming for faster development, better customer retention through a consistent user experience, or quicker time-to-market for new features? A clear goal ensures the design system aligns with business needs.

• Users: Identify the different user groups, such as designers, developers, external users, and those with accessibility needs. Research is essential to understand their specific requirements for the design system.

• Brand Identity: Understand the company’s brand identity by analysing its logo, colours, and typography. Decide how to apply these elements in digital products, including the use of primary, secondary, and tertiary colours in the application.

​

Scope and Goals

​

• Initial Scope: Start by identifying the most essential components needed for the first users of the design system. Then, set a timeline for delivery, as the process involves research, design, reviews, and documentation.

• Scalability: A design system should be built with future growth in mind. As applications expand, new components, icons, and even platforms like mobile apps or wearables may be needed. The system should be flexible enough to adapt over time.

​​

ROI of a Design System

​

• Efficiency and Cost Reduction: A design system speeds up design and development, allowing for faster application building and quicker releases. It also reduces costs by eliminating the need to repeatedly design and develop the same elements.

​

Prebuilt vs. Custom Design System

​

After defining the scope and goals, the next step is to build the design system. But before starting from scratch, consider another approach—using an existing design system.

​

Building a design system from scratch takes time, resources, and increases costs. Using a prebuilt design system can save time by focusing on specific needs while allowing for future improvements. A good design system includes well-documented guidelines, best practices, and high-quality UI elements.

​

Leveraging an existing system helps speed up development and brings the product to market faster. However, if necessary, a custom design system can be built from the ground up.

​

Start a Team

Like any other project, building a design system requires a dedicated team to develop and maintain it.

​

Owner/Lead/Strategist: Defines the overall strategy, direction, and roadmap, anticipating future needs. Advocates for the design system within the organization and drives adoption.

​

Designers & Developers

• Designers create components like buttons, icons, and forms, build pattern libraries (e.g., navigation), and document best practices.

• Developers build and maintain the codebase, ensuring components follow accessibility standards.
   

Governance Committee: Makes decisions on updates and resolves conflicts within the system.

​

Design Principles

​

A design system should be built on strong guiding principles to create a seamless user experience. These principles include:

• Simplicity: Keep designs easy to understand and use.

• Consistency: Maintain uniformity across all components and interfaces.

• Usability: Ensure a smooth, intuitive experience.

• Accessibility: Make designs usable for everyone, including people with disabilities.

​

Building Blocks of a Design System

​

The interface should be structured into three key libraries.

​

• Components – Individual UI elements like buttons, input fields, and icons.

• Patterns – Reusable design solutions for navigation, forms, and layouts.

• Style Guidelines – Rules for colors, typography, spacing, and branding.

​

Components

Components are reusable building blocks of a design system. They include predefined elements like buttons, icons, labels, input fields, and search bars. To create UI components, follow the Atomic Design Principles.

​

• Atoms: Basic UI elements like buttons, labels, input fields, and icons.

• Molecules: Combinations of atoms, such as an input field with a label and button to create a form.

• Organisms: More complex structures like navigation menus or tables with sorting and filtering.

• Templates: Larger layouts, such as dashboards with charts and graphs or structured form layouts.

​

Patterns

Patterns are groups of components used together to create elements like navigation menus, grids, and interactive layouts.

​

Style Guides

Style guides define the visual language and branding rules to ensure consistency across all applications. They include:

​

• Typography: Fonts, sizes, and weights.

• Colour Palette: Primary, secondary, and accent colors with usage guidelines.

• Iconography: Icon styles, usage, and a library of icons.

• Imagery: Guidelines for photography and illustrations.

• Voice & Tone: Writing style for clear and consistent communication.

​

Documentation

Good documentation explains how to use the design system effectively. It should include:

​

• Usage Guidelines: Best practices for each component.

• Interactive Examples: Live previews and code snippets.

• Design Principles: Guidelines for consistency, usability, and accessibility.

• Accessibility Standards: Ensuring all components and interactions are inclusive for users with disabilities.

​

Governance

The final key aspect of a design system is governance, which ensures consistency and efficiency across teams. Clear rules should be in place for updates, contributions, reviews, and decision-making. Governance can be managed by a single owner or a group from multiple teams, depending on the scale of the design system.

​

BUILDING A DESIGN SYSTEM FOR AN ENTERPRISE APPLICATION

​

Now, let’s take a quick look at how to create a design system for an enterprise application without going too deep.

​

Enterprise applications often have complex workflows, so the design system must be able to support that complexity. Accessibility is also crucial—following WCAG guidelines ensures the system is usable for everyone. Additionally, the system should be scalable to support future growth and new features.

​

To build a design system, start by deciding on the necessary libraries for design elements. These include UI components like buttons and forms, typography for fonts and styles, a collection of reusable icons, structured layouts for grids and navigation, and guidelines for using images in the application. Some well-known design systems to refer to are Google Material Design, Ant Design, and IBM Carbon.

​

Core Components & Patterns

• Layout: Defines the structure of the interface, including the header, footer, sidebar, cards, and columns.

• Data Tables: Essential for displaying large datasets, with features like sorting, filtering, pagination, exporting, and manual refreshing.

• Forms: Often complex in enterprise applications. Consider validation rules, logical structure, progress indicators, and user expectations after submission. Forms can be single-step, multi-step, or wizard-based.

• Input Components: Basic elements like buttons, text inputs, dropdowns, date pickers, menus, checkboxes, and file uploaders.

• Charts: Used for data visualization. Choose the right chart type based on the data's purpose.

• Dashboards: Often serve as the main landing page for enterprise applications.

• Grid System: Ensures consistent spacing and alignment across all elements.

Style Guides

• Typography: Defines fonts, sizes, weights, and line heights for headings, body text, and buttons.

• Colour Palette: Establishes primary, secondary, and accent colours with clear usage guidelines.

• Iconography: A library of reusable icons that align with the brand.

​​

Conclusion

A design system acts as a single source of truth, saving time, improving collaboration, and ensuring a consistent brand identity. A successful design system grows alongside the application, adapting to new requirements.

​

The choice between building a design system from scratch or using a prebuilt one depends on the time and resources available.