Qualtrics Session Replay
Qualtrics is the world’s leading experience management platform. Session replay is the first step in an ambitious expansion of the digital feature area, with an eye on building a comprehensive product analytics suite.
I led the 0-1 design effort. I worked with product and engineering teams to rework the project architecture, designed the primary capabilities, refactored legacy functionality to build upon, and collaborated with partner teams to integrate into other feature areas.
Opportunity
Building on an established foothold with CX focussed brands
Qualtrics has traditionally focused on direct customer feedback—mainly through surveys—to evaluate customer/employee experiences. Future growth leans on expanding into other channels and doing more intelligent analysis of the typically verbose and unstructured data.
The digital product area is a set of tools that capture feedback on customer’s websites and apps. Several thousand brands use it and facilitate billions of impressions a year. Session replay builds on what makes those tools run by adding analytics capabilities to customer implementations.
Session replay player
Finding the right mix of data density, navigation, and wayfinding
The design cycled primarily through the amount and type of data to show alongside the replay and how to handle navigation for scenarios the platform didn’t clearly address.
Replay player nav
Replays would be accessible through multiple areas in the platform for different uses and personas. The primary navigation, however, is biased toward Qualtrics users who work primarily within a single tool.
Platform nav
Built on a legacy codebase. Utilizes nav patterns inconsistent with the platform. Destructive features
Modal
Ideal in many ways, but had too many dependencies on other teams to achieve by v1
Simulated modal
Replicated the look of a full screen modal, but complex logic on the close button when not actually a modal
Details panel
The details panel went through lots of iteration to hone in on the right mix of what to show and how much depth each signal we present. The UI also evolved to focus on modularity to accommodate varied states and user configurations.
The v1 player focuses on showing heuristic events, session metadata, and lightweight controls for viewing playlists. The player loads in a new tab outside of the nav to avoid performance issues navigation horizontally and incongruencies with the platform nav
Incrementally building alignment to improve the architecture
Building on the existing digital product started as a balancing act. Initially, we indexed on minimally disrupting the existing project architecture to get to a testable pilot quickly. Key pages, like Deployment, were buried in tertiary navigation. Settings weren’t organized in a way that anticipated a more complex taxonomy. I saw a clear need for larger changes, but I worked to achieve that goal in smaller steps
Design iteration, buy-in for bigger changes
The deployment page represents the challenges I was trying to overcome. Work on the older monolithic code base had significant scope impacts. Changing details on a page or moving items between pages required a lot of engineering work. It also meant that where additions were necessary, they didn’t always fit into the existing conventions.
Existing state
Built on a legacy codebase. Utilizes nav patterns inconsistent with the platform. Destructive features
Low scope impact
Add only activation toggles, no changes to nav or existing deployment features
Medium scope impact
Add activation toggles, no changes to nav, refactor some existing deployment features
High scope impact
Add activation toggles, rework nav to drop legacy tertiary nav, refactor existing deployment features
Pilot solution
Add activation toggles, hold off on nav changes, but pull out existing features we plan to sunset
Addressing new/shifting requirements led to reworking all the settings area monolith for GA. That meant pages like Development could be elevated adequately in the hierarchy and unused legacy capabilities removed—small improvements but sturdier foundations
Platform integration, advanced use cases
The core of the new capabilities lived within the Digital project and the replay player tool that I designed. Much of the value came through how Digital’s capabilities work with the platform in addition to features geared toward advanced users. I designed or directed the design of these areas.
Opportunity widget, dashboards
Custom widget identifies and ranks poor experiences and their cost to the business
PII protections
Simple controls to mask content by default or allow admins to show/mask areas in replays selectively
Testing, live overlay
Allow users to test configurations live on their sites before publishing configuration changes
Access control
Refactored existing privileges and added new ones for replays and datasource management
Custom events, taxonomies
Control over understanding specific behaviors and tools to categorize/group similar pages
Admin reports
Add activation toggles, hold off on nav changes, but pull out existing features we plan to sunset
Product announcement, early access
Session replay was announced at X4 in front of more than 10,000 attendees. I worked on animations and the story that supported the presentation. We left the summit with a surplus of customers wanting early access and a sales pipeline larger than our year-one goal.
