Nomi
Nuix Design System
Nomi is a collection of reusable components, standards, and documented guidelines that can be assembled to build applications
The Challenges
Inconsistent UI components/framework within the organization
Lack of Scalability
Insufficiency documentation
Accessibility
My role
I guided the development of the Nomi design system as part of a collaborative team, ensuring all components are designed with the diverse needs of Nuix applications in mind for a consistent and enhanced user experience.
The Goals
Establishing a Unified Visual Language
Ensuring consistency in the user experience across various interfaces and interactions by employing a cohesive visual language.
Promoting Shared Understanding
Facilitating a common comprehension of design principles among different teams - designers, developers, and stakeholders - to foster collaboration and cohesion.
Streamlining Design and Development
By offering reusable components, guidelines, and documentation, the aim is to expedite the design and development process.
Balancing Creativity and Consistency
Allowing room for creativity and innovation while ensuring that these additions maintain a unified user experience.
Prioritizing User Needs
Keeping usability and accessibility at the forefront of design decisions to create products that best serve the users.
The Process
Foundations
Design Tokens
Components
In the Nomi design system, we’ve meticulously crafted a comprehensive collection of components that cater to various design needs. Our components are organized into three categories for clarity and usability:
Simple Components, which include essential elements like buttons, pills, and tooltips;
Complex Components, featuring interactive elements such as tables, panels, form elements, feedback banners, and toolbars; and
Framework Components, which encompass more intricate structures like wizards, navigation systems, and page layouts.
Below, you'll find a selection of key components to illustrate the versatility and functionality of our design system.
Accessibility
An accessible design system prioritizes creating an equitable and user-friendly environment for everyone interacting with the interface.
Next
Implementation
Developers use the provided components, and styles to build the applications.
Testing
Validate the design system's functionality, and responsiveness.
Feedback and Iteration
Iterative improvements are made based on feedback and adapt to changing needs.
Maintenance and Updates
Keep updating the components to remain relevant and effective.