NEW RELIC / ONE CORE DESIGN SYSTEM
Components for New Relic’s design system
When creating components, I like to start with an audit to evaluate current usage and grasp any custom implementations or specific team needs. After creating the component, I also manage the implementation, offer guidance, develop documentation for our design system’s website, and design Figma components for our library.
Datatable
Datatables in New Relic must host vastly different types of datasets with their cases and characteristics. We needed to unify the experiences and make consuming their data a consistent experience, so I placed a strong emphasis on ensuring scalability, to maintain optimal performance without sacrificing functionality. This approach allowed for a cohesive and efficient user experience, regardless of the dataset's size or complexity.
Select
The Select component is an input that controls a listbox that can dynamically pop up to enable users to select a predefined value. It features both single-selection and multi-selection options, as well as a search function. We needed to rebuild a robust select component to ensure good performance and flexibility. To ensure its effectiveness, I conducted an evaluation of potential features, while ensuring its fundamental functionality wasn’t affected. Considering new UX improvements and new use case needs, I redesigned this component and worked closely with engineering to develop it. I planned the component tasks and drove some conversations on scope, engineering spikes, and reframing our old, misused “Combobox” to a proper Select to fit the new approach better, and consolidated the Listbox across different components.
In this project, documenting decisions was critical to help the team move forward. This approach allowed for a comprehensive Select component that served different use cases while providing a consistent user experience.
Timeline
A timeline provides information about changes to an object, or events related to an object or within a session. Its content is usually machine generated, but can include users' input.
Previously, we utilized different variations of this component to display a wide range of events that occurred during a session, such as requests, crashes, errors, browser interactions, and launches, as well as in incident reports.... However, each of these versions derived from the same shared component but required extensive modifications to fit specific use cases. To address this fragmentation and improve efficiency, my objective was to create a unified component that could seamlessly cater to all these different use cases, providing a cohesive and adaptable solution.
