Back

N1 Design System

Scalable, Cohesive & Efficient Design system for Nathan Digtial’s ERPs.

N1 Design System; Scalable, Cohesive & Efficient Design system for Nathan Digtial’s ERPs.The implementation of the N1 design system became crucial for adapting to the growth of our company and expanding digital projects seamlessly. Not only does it make development more efficient, but it also accelerates the design process, ensuring our digital products are not only intuitive but also aligned with user expectations. In essence, the N1 design system serves as a foundational solution to address past inconsistencies, streamline development efforts, and deliver a cohesive and user-friendly experience across suite of products.

MY ROLE ; As a sole Designer

As the sole designer for the NathanDigital Accounting software , I worked closely with stakeholders, and in-house accountants to understand the core requirement of the software and develop a design that was both user-friendly, intuitive efficient. I also collaborated closely with developers to ensure that my designs were feasible and implementable.

  • Conducted user research to understand the needs and pain points
  • Developed a design system to ensure a consistent look and feel for the software
  • Created wireframes and prototypes
  • Conducted usability testing & performed required iterations
  • Collaborated with developers to implement the design
  • Conducted usability testing to ensure that the design was user-friendly and efficient
Role

UX/UI Designer (Sole)

TIME

1st iteration-> 1.5week,
Completed -> 2months

DESGIN TOOL

Figma

The Problem

The Need for a design system

In a study by Nielsen Norman Group, organisations reported up to a 75% increase in development efficiency with the use of design systems.

The decision to build the N1 design system stemmed from my initial experience in designing the first ERP without a standardised system. I encountered numerous inconsistencies in the user interface, causing a lack of cohesion and a weakened brand identity especially when the team grew in number. As Nathan digital company evolved, the necessity for a design system became even more evident when we decided to develop a suite of 11 products. Without a design system, maintaining a consistent look and feel across these diverse products would have been next to impossible,

The building of the N1 design system became crucial for adapting to the growth of our company and expanding digital projects seamlessly. Not only does it make development more efficient, but it also accelerates the design process, ensuring our digital products are not only intuitive but also aligned with user expectations. In essence, the N1 design system serves as a foundational solution to address past inconsistencies, streamline development efforts, and deliver a cohesive and user-friendly experience across our suite of products.

The Problem

Research; How to build a design system

I felt a bit lost at first not knowing where to start building a design system. i wanted to understand the core concepts first. I browsed through many articles and watched YouTube videos, but all of them only showed how to design the button, input fields and so on , but this was something i already knew. what i wanted to know was why what is the right way to build a design system and the big picture structure involved.

The Problem

The concept of 'Atomic design'

Discovery of a Gold Mine: After hours of scrolling, I stumbled upon a gold mine - a website called atomicdesign.bradfrost.com. This website, authored by Brad Frost, a design system consultant, turned out to be exactly what I needed. It wasn't just about designing components; it was about building a whole design system and understanding the core concepts. out of all the core concepts the atom-molecule and organism concept helped me have a bigger picture on how to build a scalable design system.

The Problem

Setting the principles

Every design system is build upon principles, they define the why and purpose of building design system. These principles guide decision-making and explain how the design system’s creators want team members to use the system. After several hours, numerous rounds of coffee, and multiple meetings, I refined these principles to encapsulate the essence of our approach & brand.

Teamui@123
1
Consistency

Ensuring that elements such as colors, typography, spacing, and interactions are consistent throughout the system creates a cohesive and predictable user experience.

2
Modularity

Design systems should be modular, with components and patterns that can be easily reused and combined to create new interfaces. This modularity fosters scalability and allows for efficient design and development.

3
Accessibility

Prioritizing accessibility ensures that all users, including those with disabilities, can access and interact with the system effectively. This includes considerations such as color contrast, keyboard navigation, and screen reader compatibility.

3
Flexibility

While consistency is crucial, design systems should also allow for flexibility to accommodate varying contexts and use cases. Providing options for customization and adaptation ensures that the system can meet diverse user needs.

The Problem

Foundation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies. Duis ultricies lacus sed turpis tincidunt id. Cursus euismod quis viverra nibh. Praesent tristique magna sit amet purus. Ligula ullamcorper malesuada proin libero nunc consequat. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Auctor elit sed vulputate mi sit. Nunc sed id

The Problem

Figma Variables & Token Mapping.

Definition: An organism is a complex UI component that is comprised of groups of molecules working together. It represents a larger, more comprehensive section of a user interface. Example: A header is an organism that may include molecules like a navigation bar, a search bar, and a logo. The header, as an organism, combines these molecules to create a significant and recognisable part of the user interface.

Impact

The design system brought about a remarkable improvement in the consistency of our ERP products. By establishing a unified visual language and design principles, it ensured that every component and interface adhered to a cohesive style, reinforcing our brand identity.

By comparing the time it took for team members to design a specific number of screens before and after the design system implementation, we witnessed a significant 23% reduction in design time. This not only highlighted the system's impact on efficiency but also underscored its practical value in streamlining our workflows. The design system not only fostered time savings but also translated into consistency and scalability, ultimately enhancing our overall project delivery process.