Nexus
Snapshot
The Problem
Our design team is struggling to maintain consistency across multiple products and platforms, resulting in delays, errors, and a subpar user experience. Inefficiencies in our design process are contributing to these issues. How might we streamline our design process to promote consistency and improve the user experience of our products?
The Solution
Develop a comprehensive design system that includes a library of pre-built components to ensure consistency across all products and platforms. This design system will streamline the design process, promote consistency and accessibility across all design elements, and ultimately improve the overall user experience of our products.
My Role
I worked with a team of UX designers to research existing design systems and lay the ground work for creating our own internal design system. I was responsible for creating, documenting, and updating components in the design system. These components ranged from basic building blocks like color, buttons, and input fields to use case specific items like content navs, loading scenarios, and legal disclaimers.
Users & Audience
The design system is primarily intended for use by designers and developers who are responsible for creating and maintaining the visual design of digital products across multiple platforms. However, product managers and other stakeholders will also benefit from the the consistency and efficiency the system provides.
Design System Process
Overview
The Nexus Design System is a collection of design elements, tokens, and guidelines that foster a streamlined and efficient design process for all digital products. This system is a vital tool that ensures high-quality, accessible, and consistent design work. By using the system our designers and developers can create visually appealing designs that enhance the user experience of our digital products. The name Nexus refers to the system's objective of establishing a connection between different design elements or components.
Principles
Consistency is key: one of the primary benefits of a design system is that it helps ensure consistency across different design projects. It's important to use the elements and guidelines in the system consistently in order to maintain a cohesive visual language.
Consider the context: while the design system is designed to be versatile and applicable across a range of different projects, it's still important to consider the context in which you're using it.
Keep it simple: one of the guiding principles of the design system is simplicity. As such, it's important to use the elements and guidelines in the system in a way that is simple, clear, and easy to understand.
Be user-focused: ultimately, the purpose of design is to create effective and user-friendly experiences. It's important to use the design system in a way that is focused on the needs and preferences of the end-user.
Experiment and iterate: while the design system provides a solid foundation for design work, it's important to continue experimenting and iterating in order to create new and innovative designs.
Research
The first step of the design process started with a review and critique of existing design systems such as Material Design, Lightning, Carbon, and Polaris. By analyzing these systems, I gained valuable insights into their strengths and weaknesses and learned from their successes and failures. This knowledge helped inform design decisions to create a system that builds on the strengths of existing systems while addressing their limitations. The result is a design system that is both innovative and familiar, providing our users with a seamless and intuitive experience.
The process of reviewing existing design systems involved exploring and testing a variety of core colors and typography options. The goal was to identify a few base colors and typeface that would serve as the foundation for the system. Realistic mockups were created to visualize these elements in context, which aided in the discussion and decision-making process for selecting these key design elements.
Accessibility
The design system is created with accessibility in mind, which means that it includes guidelines and best practices for creating designs that are usable and accessible for all users, regardless of any disabilities they may have. The design system ensures that accessibility is built into the design process from the very beginning, resulting in more inclusive and user-friendly products.
Design Tokens
Design tokens serve as the atoms of the design system, providing a cohesive visual language across all design elements. They are used to define and maintain important visual design properties such as spacing, sizing, and typography styles. To create the tokens, each selected core color was expanded into a palette and the chosen typeface was used to create all typography styles. These tokens are then utilized to construct components.
Components
Components are like building blocks that can be combined to create larger sets of components or screens. They provide a consistent basis for design, and highlight the functionality and versatility of this design system.
variety of Nexus components
Nexus in Context
A sampling of visuals that highlight how components are arranged to create practical screen layouts and various interfaces. By using these components, the design system promotes consistency and provides a foundation for visually appealing and functional designs.
Reflection
Start small and iterate
Creating a design system is a complex and time-consuming process, so it's important to start with a few core components and iterate as needed. By focusing on the most important and commonly used design elements first, the system can be developed efficiently while remaining manageable and scalable.
Consistency is crucial
The whole point of a design system is to ensure consistency across all digital products. It's important to establish clear guidelines and standards for design elements, and enforce them.
Maintain and evolve the system
A design system is never "finished”, it should be treated as a living system. It's important to have a plan in place for maintaining and evolving the system over time, including regular updates, testing, and user feedback. This ensures that the system remains relevant and effective in the face of changing design trends and user needs.