One Core:
New Relic’s Design System
New Relic has a design system named One Core to ensure a cohesive user experience and visual design throughout the product. It represents and systematizes decisions made by designers, engineers, and product managers on how New Relic should work.
I was part of a team for three years where I worked on and managed several projects. These included component design, creating guidelines, assisting designers, developing agnostic patterns, and working on larger company-specific business patterns and projects.
A documentation site protects and surfaces One Core resources, knowledge, and guidelines
I conducted various surveys and uncovered an alarming statistic that revealed 50% of our consumers faced challenges while using the site, one of the main issues being the structure of our documentation. We introduced several key improvements, including a powerful new search capability and a more intuitive architecture. These enhancements resulted in a more streamlined and user-friendly documentation experience, ensuring our consumers can now find the valuable information they seek.
Creating a way for everyone to improve the Design System
Designers and engineers being able to contribute to the design system is vital for creating, maintaining, and evolving a coherent visual language across New Relic. We created a contribution process for formal contributions such as new components, changing existing components in a meaningful way, or important refactors (design or engineering).
For any contribution to be included in the One Core, it must be compliant with straightforward acceptance criteria:
It is Product generic.
It is Product-wise impactful.
It is reusable for any team to build a product experience.
It does not break an existing pattern.
It does not deviate without justification from industry patterns.
Providing tools: Figma libraries carefully matching our SDK
At the core of our design system is our UI Kit, which leverages the power of Figma libraries to streamline our design process and ensure visual consistency throughout our products. Our UI Kit consists of several key libraries that facilitate the creation of engaging and consistent user interfaces:
Color library: A comprehensive repository of semantic tokens that forms the foundation of our product interfaces.
Typography library: Includes all the typography tokens used to design product interfaces.
Component library: The component library has all the latest, up-to-date components and is kept in sync with the SDK.
Patterns and Experiences library: Contains a collection of commonly used patterns in the product like the headings, navigation, collecting user feedback, and more.
A matured Design System to elevate our product
As we continue to evolve and grow, our design system remains a cornerstone in driving user-centric design, elevating our products, and ultimately contributing to the success and competitive advantage of New Relic.
As of today, One Core continues to help designers and developers by providing a documentation site, a contribution model to assess and promote collaboration and contributions to the design system, an SDK playground and Figma UI kits and foundational styling, a help channel, weekly office hours, and formal design review process to ensure all the initiatives have a shared and coherent visual language.