--- title: "Participant Clickstream Redesign — UX Case Study" url: "https://www.girishhegde.com/clickstream-case-study" language: "en" --- Enterprise SaaS Process Intelligence UX Redesign Senior Product Designer # Participant Clickstream Redesign A ground-up redesign of a session replay and investigation tool used by process analysts in an enterprise process intelligence platform. The challenge: make a dense, 6-level hierarchical data experience feel clear, fast, and navigable — without losing any analytical power. Duration 2–3 Days Format Figma + Rationale My Role Solo — Senior UX Designer Platform Web \(Desktop\) Focus Craft · Interaction · IA ![Participant Clickstream hero](https://20l43wd5v0.koniglecdn.com/images/process-iq.gif) Background ## What is Participant Clickstream? A process intelligence platform captures every interaction a user performs inside enterprise applications — clicks, keystrokes, navigation events, form fills. The Participant Clickstream feature lets analysts replay a single user's recorded session and inspect the exact sequence of actions they performed within a business process. The current experience was built incrementally and had developed serious usability problems — especially for long or complex sessions where analysts most needed it. Core User Problem "When analyzing a participant's captured workflow, analysts struggle to understand what happened, where it happened in the broader process, and how individual user events contribute to higher-level business steps." ### Specific Pain Points Critical Poor information hierarchy — raw events and high-level business steps look and feel the same. Critical No clear visual or structural mapping between low-level user actions and the business process they belong to. High Navigation breaks down entirely for long sessions with hundreds of events across multiple tasks. High Playback and manual navigation feel disconnected — users lose their place in the session. Medium UX is inconsistent with newer, cleaner modules on the platform. Medium Inspection panel is too disruptive — it pulls the analyst away from the session context rather than zooming in. User Persona ## Who I designed for ![Maya S](https://placehold.co/200x240/e0e0ff/5b5bd6?text=Maya+S) ### Maya S. Senior Process Intelligence Analyst 7 Years Experience Finance Ops "I don't have time to click around trying to find where an event fits in the process. I need to see the whole picture at once and zoom into what's relevant — fast." Analyst Overview Maya is a seasoned professional focused on investigating complex employee workflows across critical enterprise applications. She specialises in identifying friction points in multi-step processes like SAP procurement or Salesforce lead management. Her work bridges the gap between raw technical event logs and actionable business insights. Responsibilities * ·Investigate and document complex user workflow failures * ·Trace user behaviour across disparate system interactions * ·Identify operational anomalies and compliance breaches * ·Generate data-driven reports for C-suite consumption Strategic Goals * ·Identify unusual anomalies in workflow patterns * ·Trace cross-department inefficiencies and bottlenecks * ·Deliver actionable recommendations to high-level business stakeholders Critical Pain Points Time Drain Using the "play" button takes too long to reach the relevant session point. Context Loss Loses sense of where individual events belong in the larger business process. Investigation Patterns Needs to correlate current events with application workflows. Cannot take quick, actionable documentation during analysis. What Maya knows well * ✓The business process hierarchy and how sessions map to it * ✓How to identify anomaly signals from raw event patterns * ✓What metrics matter for stakeholder reports * ✓The business context for Finance Ops workflows What Maya doesn't yet understand * ·Where exactly the scope started — entry point in the hierarchy * ·What caused the specific deviation in this session * ·How many events relate to the business workflow structure * ·What happened before and after the anomaly signal Investigation Scenario ## Invoice Processing Delay Analyst: Maya S. The Context A finance team reports that invoice approvals are taking significantly longer than expected. Maya needs to uncover the root cause within the multi-step approval workflow. Core Objectives 1 Replay the workflow step-by-step 2 Understand granular delays in processing 3 Identify task transitions between teams 4 Inspect unusual behaviour or edge cases 5 Trace interactions to specific business steps 6 Capture visual evidence for stakeholders ### Maya's Needs vs. UI Solutions Maya's Need UI Solution 🧭 Orientation 📐 Persistent Hierarchy 🔍 Investigate Anomalies ⚡ Anomaly Indicators 📜 Long Sessions 🗜 Smart Compression 🔭 Overview to Detail 🔀 Progressive Disclosure 💾 Context Preservation 🔄 Synchronised Workspace Design Challenge ## 6-Level Process Hierarchy Every captured event sits within a 6-level business process hierarchy. This hierarchy is the backbone of the experience. The design must make it legible at every moment — whether the analyst is at the top level or drilling into a single raw event. L1 Business Process The top-level workflow, e.g. Purchase-to-Pay or Hire-to-Retire L2 Sub-process A major phase within the process, e.g. Invoice Processing L3 Task A discrete unit of work within the sub-process L4 Activity A step tied to a specific application action L5 Step A granular interaction within an activity L6 Event The raw captured user action: click, keystroke, screen navigation **Design challenge:** Six levels of hierarchy is a lot of information to hold at once. A key part of this challenge was deciding how to present this hierarchy so analysts always know where they are, without overwhelming them with every level simultaneously. Information Architecture ## IA for Participant Clickstream The experience is structured into three primary zones. Each zone serves a distinct analytical mode — from scanning the full session to drilling into a single event's metadata. 1 Process Navigation Panel Persistent hierarchy context. Always visible. * ·Business Process * ·Sub-process * ·Current focus level indicator 2 Session Timeline / Playback Linear session view with controls. * ·Participant Name * ·Timeline progression * ·Process segments * ·Anomaly markers * ·Play / Pause * ·Status Indicators 3 Event Details Panel Contextual inspection. Slides in on selection. * ·Application * ·Event properties * ·Signal type * ·Related activity * ·Metadata * ·Investigation notes ⛶ Fullscreen Mode Expands to unlock additional layout space. Process Navigation Panel expands to show all 6 hierarchy levels simultaneously. Timeline gains density controls. Details Panel becomes a resizable split view. Bookmark and annotation tools surface. Navigation Actions Select and inspect individual events Navigate hierarchy groups Relative event Duration Filter and isolate sub-processes Bookmark & flag events Resume playback Deep analyse view Collapse / expand hierarchy groups Design Rationale ## Why the design works the way it does ### 1 Analyst Persona I designed for Maya — a Process Intelligence Analyst responsible for investigating workflow inefficiencies and behavioural anomalies across business process operations. Maya typically enters the experience with some investigation context. She already knows the selected business process and participant. But she does not yet understand the full picture of what happened within it. Assumptions * ·Maya investigates one participant session at a time * ·Sessions may contain hundreds of consecutive events * ·A few events relate to business workflow structure * ·AI-generated anomaly signals already appear before she opens the session * ·Investigation speed and context retention are critical ### 2 Information Architecture Decisions The experience is structured into three primary zones — Process Navigation Panel, Session Timeline, Event Details Panel — which map directly to the three mental modes an analyst moves between. Process Navigation Panel * · Business Process * · Sub-process * · Task Session Timeline * · Event count * · Playback controls * · Filters + Bookmark * · Fullscreen Event Details Panel * · Current events * · Event properties * · Bookmarked notes * · More actions Crucially, the Process Navigation Panel is **always visible** and never collapses — providing the spatial anchor Maya needs to stay oriented even when deep in event-level detail. ### 3 How the Design Scales Long Sessions \(400+ events\) Smart Compression groups low-signal events into collapsible clusters. Anomaly markers surface high-priority events. Jump-to controls allow time-based and hierarchy-based navigation without scrolling linearly. Deep Hierarchies Progressive disclosure shows 2–3 hierarchy levels at a time. Breadcrumb trail in the Process Navigation Panel always shows the full ancestry. Drill-down preserves the playback position. Events with No Metadata Event Details Panel gracefully degrades — showing available fields only, with clear "No data available" states. Never shows empty containers or broken layouts. Multi Sub-process Sessions The timeline shows sub-process boundaries as visual dividers with colour-coded bands. The Process Navigation Panel shows all sub-processes as siblings, with the active one highlighted. ### 4 Interaction Model Playback, selection, and hierarchy navigation are three separate but synchronised modes. They never fight each other — any action in one zone updates the others without disruption. Playback Active → Timeline scrubhead moves → Hierarchy panel highlights current level → Details panel auto-updates Event Selected → Playback pauses at that position → Hierarchy jumps to that event's level → Details panel opens with full metadata Hierarchy Drill → Timeline filters to that scope → Playback position preserved → Back button restores previous scope ### 5 Key Tradeoffs Persistent hierarchy vs. screen real estate Resolved Always-visible hierarchy takes column space. Resolved by collapsing to icon-only mode on narrow viewports, and by making the hierarchy panel resizable in fullscreen. The mental model benefit of always knowing "where you are" outweighs the space cost. Auto-scrolling timeline vs. analyst control Resolved Decided against auto-scroll during playback. Instead, the active event is highlighted in-place and the timeline scrolls only when the analyst explicitly scrubs or plays past the viewport edge. This prevents disorientation during investigation pauses. Functional Requirements ## What the design must support 01Session Replay ·Play, pause, and resume the session ·Scrub or jump to any point by time, step, or event ·Select any individual event or step manually, independent of linear playback ·Current playback position always clearly visible in context of full session 02Process Hierarchy Visualisation ·Show all six hierarchy levels from Business Process down to Event ·Make immediately clear which level is in focus at any moment ·Support navigation between levels without losing context ·Handle sessions that span multiple sub-processes or tasks 03Step and Event Inspection ·Business context: Process, Sub-process, Task, and Activity hierarchy ·Application context: application, screen, and action type ·Duration: time spent relative to expected ·Business attributes: transaction IDs, values, process-specific metadata ·Event signals: interaction type indicators, flags, anomaly markers 04Large Dataset Navigation ·Long sessions: hundreds of events across many steps and tasks ·Always answerable: "Where am I in this session?" and "Where am I in the process?" ·Smart compression, filtering, bookmarking, and summarisation mechanisms 05Responsive & Full-Screen Mode ·Standard: embedded within the broader platform layout at default page width ·Full-screen: expanded for deep focus analysis, unlocks additional layout space and richer views Hi-Fi Designs ## High-Fidelity Screens Final production-quality screens across all required states — default, playback active, event selected, hierarchy focused, full-screen, and long session. * ![Default loaded state](https://20l43wd5v0.koniglecdn.com/images/process-iq-1.webp) * ![Playback active](https://20l43wd5v0.koniglecdn.com/images/process-iq-2.webp) * ![Event selected](https://20l43wd5v0.koniglecdn.com/images/process-iq-3.webp) * ![Hierarchy level focused](https://20l43wd5v0.koniglecdn.com/images/process-iq-4.webp) * ![Full-screen mode](https://20l43wd5v0.koniglecdn.com/images/process-iq-5.webp) * ![Long session state](https://20l43wd5v0.koniglecdn.com/images/process-iq-6.webp) 1 / 6 Default Loaded State ![]() 1 / 6 ↑