The Design of 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 accomodate 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 try to illustrate how it dynamically highlights the current event and scrolls automatically to track the real-time progression of events within the session.

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 three options above showcased different approaches to the grouping logic.

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