All case studies
Team
Entity UI, Patterns, Maps
Role
Senior Product Designer
Date
January 2022 - June 2023
Preview
https://newrelic.com/
Revamping Navigation and Maps UI at New Relic
In a data-driven digital world, the ability to navigate and visualize information efficiently is crucial for monitoring and analysis teams. At New Relic, we’ve tackled the challenge of redesigning our navigation and maps interface, focusing on improving usability and the overall user experience. This project not only restructures how users interact with monitoring tools but also optimizes workflows, enabling quicker and more intuitive access to critical real-time data.
On this page, we’ll dive into the key aspects behind the redesign, the main issues we addressed, and how the new solutions make navigating through complex infrastructures easier. From improved map layouts to the integration of new functionalities, this project demonstrates our commitment to providing a smoother, more efficient experience for New Relic users.
Navigation Revamp
1. Context
New Relic’s growing platform faced navigation challenges as new features and functionalities were introduced. The existing navigation system lacked scalability, leading to confusion for users trying to find key tools and data.
2. Research
We conducted usability studies and analyzed user behavior data to identify pain points in the navigation experience. The research revealed that users struggled to find certain features, leading to lower engagement and retention.
3. Challenge
The primary challenge was to create a scalable navigation system that could grow with the platform. It had to accommodate both new and existing users while maintaining a clean, intuitive experience.
4. Design Process
The design process began with information architecture workshops to map out the platform’s core features. We explored various navigation patterns (sidebars, top nav, and contextual menus) through wireframes and prototypes. After user testing, we settled on a scalable hybrid system combining a top bar for global actions and a collapsible sidebar for more granular controls.
5. Collaboration with Other Teams
This project involved close collaboration with the product management team to ensure business goals were aligned with user needs. We also worked with engineering to guarantee the new navigation was feasible and easy to implement without disrupting current workflows.
6. Results and Metrics
The revamped navigation significantly reduced the time users spent searching for tools and improved overall platform engagement. Key metrics:
20% reduction in time-to-task.
Increased user retention and lower churn rates.
7. Final Conclusion
Compared with the previous one, the new navigation improved navigation greatly, creating a more cohesive and scalable structure, making it easier for users to access the platform's full potential. It laid the groundwork for future scalability while providing immediate usability improvements.
HomeFeed Concept
1. Context
We experimented with the idea of a feed-based homepage for New Relic, aimed at delivering personalized insights and updates to users upon logging in. The goal was to increase engagement by making important data more visible and relevant.
2. Research
Interviews and surveys were conducted with existing users to understand how they used the homepage and what they expected from it. Many users desired a more personalized experience, but there were concerns about information overload and prioritization of data.
3. Challenge
The challenge was to create a feed that was both informative and not overwhelming. We needed to present real-time data updates and notifications without disrupting the user’s workflow or burying critical information.
4. Design Process
We created several iterations of the homepage feed concept, experimenting with different layouts and ways to display notifications, system alerts, and data visualizations. Usability testing revealed mixed reactions—while users appreciated the personalized content, it was difficult to balance relevance with clutter.
5. Collaboration with Other Teams
Working alongside data scientists, we ensured that the feed was pulling relevant, actionable insights. We also collaborated with the frontend development team to explore the technical limitations and capabilities of creating a dynamic feed within the platform.
6. Results and Metrics
Unfortunately, the HomeFeed Concept was shelved after initial testing, as the feedback suggested it didn't align well with how users wanted to interact with their data. However, key learnings were applied to other areas, such as notifications and alerts. Metrics gathered:
15% of users found it useful, but 50% felt it was too cluttered.
Insights from this project informed future improvements to user alerts and data displays.
7. Final Conclusion
Though the feed concept didn’t become a final product, it was a valuable experiment that helped shape our understanding of how users prefer to consume information. This insight influenced other aspects of the platform, ensuring data relevance and clarity remained a priority.
Visual Language for Maps
1. Context
New Relic’s mapping tools were becoming increasingly important for visualizing data across complex infrastructures. However, the visual language for maps was inconsistent and lacked clarity, making it difficult for users to derive meaningful insights from the data presented.
2. Research
We conducted a competitive analysis of other platforms offering mapping tools and interviewed users to understand their pain points when interacting with the maps. A key finding was that users needed clearer, more consistent visual cues to differentiate between various data points.
3. Challenge
The main challenge was to create a clear, intuitive visual language for maps that could accommodate a wide range of use cases—from infrastructure monitoring to application performance tracking—while maintaining consistency across the platform.
4. Design Process
We started by defining core visual elements such as color schemes, icons, and data markers. A major focus was on establishing a hierarchy that made it easy to interpret the most critical information at a glance. We created prototypes, tested them with users, and iterated based on feedback, ensuring that the visual system was scalable across different map types.
5. Collaboration with Other Teams
We worked closely with the data visualization and engineering teams to ensure that the visual language was not only aesthetically pleasing but also functionally robust. Engineers played a key role in implementing the design into the actual map rendering processes, while the UX team ensured that user needs were addressed.
6. Results and Metrics
The updated visual language made it easier for users to interact with the maps and extract insights quickly. Metrics showed:
30% faster time to insight.
A 25% increase in the use of mapping tools across the platform.
7. Final Conclusion
By redefining the visual language for maps, we significantly improved the clarity and usability of New Relic’s mapping tools. This not only enhanced the user experience but also strengthened the platform's data visualization capabilities, making it a more effective tool for infrastructure and performance monitoring.
