New Relic Session Replay

Role
Lead designer

Team
Two product managers, 9 core engineers and another designer

Year
2023-2024

New Relic is known for its application performance management (APM) tool to help engineers debugging. Session Replay is a net new feature that expands New Relic’s capabilities from traditional app monitoring to Digital Experience Monitoring (DEM). As the lead designer in this project, I led the design effort from start to finish, collaborated closely with a team of engineers, two product managers, and another designer. Together, we crafted a prodcut that fulfils customer needs and business goal.

Here's a quick visual tour of a few key moments from my design process.

The visual comparison and analysis worked very well in helping me communicate with stakeholders and facilitate decision making during the design reviews.

Here I explored different layouts to find the best way to accomadate three components running in synchronicity -- video, event trail and traces waterfall.

Since the event trail component doesn't exist in our design system, it’s crucial to effectively convey its rules and behavior in the design specs.

In the component spec, I've illustrated how this stepper-like component dynamically highlights the current event and automatically scrolls to sync with the real-time progression of the session. As a key visual, it supplements the recording by helping users identify critical events that occurred.

Here's an interesting problem we worked on: we took a cue from Youtube’s video chapter to better visualize route changes and page loads within a replay session. The challenge arose when these segments were very brief, they became almost invisible on the video track. To solve this, we developed a grouping mechanism. The diagram shows how I define the grouping mechanism.

Final design

See it in action

Session replay is generally available since mid 2024, already adopted by over 1,000 accounts and generating $3.52M in monthely recurring revenue