All case studies
Team
Entity UI, Patterns, Maps
Role
Senior Product Designer
Date
January 2022 - June 2023
Preview
https://newrelic.com/
Building a Unified Design Language at New Relic
At New Relic, I led key initiatives to unify the platform’s design language, improve team collaboration, and optimize workflows. From establishing a cohesive design system to creating reusable patterns and standardizing Figma files, these projects significantly enhanced efficiency and consistency across the platform.
Explore the core projects that made this possible:
Entity Foundations – a unified design language for the platform.
Patterns – reusable components for consistency and speed.
Figma Standards – streamlined file structure for better collaboration.
Entity Foundations
1. Context
At New Relic, the platform was fragmented in terms of design and usability.
Different teams had developed interfaces with varied visual styles and patterns, causing inconsistency in the user experience and making development and maintenance more difficult.
The company needed a unified approach that allowed for scalability and efficiency in implementing new features.
2. Research
We conducted an analysis of all the interfaces and visual components used across the platform.
This included meetings with design and development teams to understand the different styles that had been adopted, as well as reviewing existing design documentation.
We also researched design systems from leading companies like Google (Material Design) and Salesforce (Lightning Design System) for inspiration on best practices for unifying design languages.
3. Challenge
The biggest challenge was aligning teams that worked independently, each with its own priorities and workflows. There was also initial resistance to adopting a unified design system due to the amount of work and changes it would entail.
4. Design Process
We created a base design guide that included a color palette, typography, standard components, and fundamental design principles. We decided to work iteratively, addressing the most widely used components first, like buttons and forms, and then moving on to more complex elements. As the team validated these components with other teams, we adjusted and refined the documentation.
A large part of the work also had to do with defining the concept of "entity" graphically and its state of health. To do this, we defined how to do it from our team.
5. Collaboration with Other Teams
I worked closely with developers and designers from other teams. We held workshops to align expectations, presented regular progress in design meetings, and organized internal usability tests to validate the adoption of the new design language. Developers were also involved in each iteration to ensure the components were easy to implement.
6. Results and Metrics
The Entity Foundations system was implemented in over 80% of the platform within the first six months, reducing the time to develop new features by 20%. Visual consistency improved significantly, leading to increased user satisfaction, as shown in internal user experience surveys.
7. Final Conclusion
This project allowed New Relic to have a much more cohesive platform, where users could navigate more smoothly across different parts of the application. The established design language also created a solid foundation for future projects, improving team collaboration and accelerating development.
Patterns
1. Context
With a platform as large as New Relic, design and development teams needed a clear set of reusable patterns that could be applied across different products. The lack of consistent patterns led to redundancies and a steeper learning curve for new designers joining the team.
2. Research
The research involved a thorough analysis of the components and patterns that were already being informally used in the platform. We also reviewed the most common cases of user-UI interaction to identify repeating patterns, like notification management, forms, and modals. Lastly, we conducted interviews with designers and developers to understand their needs and challenges.
3. Challenge
The main challenge was identifying which patterns were truly useful and scalable, and which ones added unnecessary complexity. We also had to define an approach for documenting them and ensure all teams could adopt these patterns without resistance.
4. Design Process
We created a pattern library that covered everything from basic components (like buttons and tables) to more complex flows, such as tabbed navigation or interactions with data charts. Each pattern was designed with a modular approach, allowing them to be adapted to different products without losing visual consistency.
5. Collaboration with Other Teams
I worked closely with development teams to ensure the patterns were easy to implement in code. I also collaborated with UX teams to validate that the patterns reflected best practices in user experience. We held recurring meetings with stakeholders to gather feedback and adjust the patterns to their needs.
6. Results and Metrics
The adoption of these patterns reduced the time to design new interfaces by 40%, as teams could reuse predefined components. Additionally, platform consistency improved, leading to a more seamless experience for users, as measured through internal NPS surveys.
7. Final Conclusion
Implementing a set of reusable patterns improved team efficiency and reduced design fragmentation at New Relic. This approach not only made the designers' work easier but also significantly enhanced the end user's experience.
Figma Standards
1. Context
Figma was widely used across New Relic's design teams, but there was no clear structure for organizing files, components, or libraries. This caused inefficiencies and made it difficult to maintain consistency as more teams adopted the tool.
2. Research
From this initiative, we reviewed how each team was using Figma and identified inconsistencies in how files and component libraries were organized. I also researched industry best practices and consulted with design ops to understand how to optimize workflow in distributed teams.
3. Challenge
The main challenge was creating a standard that worked for teams with very different needs without feeling restrictive or limiting. We also needed to ensure that the standards were easy to follow and would be maintained as the platform grew.
4. Design Process
I designed a standard file structure that included specific pages for idea exploration, final design, component documentation, and prototypes. I also created templates for common projects and established guidelines on how to organize components within Figma’s shared libraries.
5. Collaboration with Other Teams
To ensure proper adoption, I collaborated with design ops and senior designers to validate the proposed standards. I also led workshops and training sessions to help teams adapt to the new Figma structure.
6. Results and Metrics
The new Figma standards reduced the time spent searching for files by 50% and improved design consistency across teams. Teams also reported greater efficiency in collaboration, especially when sharing components and resources.
7. Final Conclusion
The Figma Standards project resulted in a more efficient and consistent workflow for New Relic's design teams. By standardizing Figma usage, teams could collaborate more effectively and maintain visual consistency across the platform.
