Demo-Grade Instrumentation System for SXSW

Portfolio project

📌 Case Study: Building a Demo-Grade Instrumentation System for Better Half (SXSW)

Overview

For Better Half's SXSW demo, the goal wasn't just to polish the product—it was to make every user interaction measurable, observable, and analyzable in real time.

While the product already had working flows (auth, onboarding, conversations), the real engineering effort went into building a robust instrumentation layer that:

Captures the entire user journey

Surfaces live insights during demos

Remains lightweight and production-portable

🎯 Core Focus: Instrumentation as Infrastructure

Instead of treating analytics as an add-on, I built instrumentation as a foundational system layered across every feature:

Auth & onboarding flows → fully tracked

Conversation engine (TAMI) → deeply instrumented

Real-time matching → latency + lifecycle tracking

UI interactions → navigation + CTA tracking

Errors → structured and queryable

Every feature shipped with built-in observability.

🧱 System Architecture

End-to-End Flow

User Interaction
   ↓
Instrumentation Layer (Frontend)
   ↓
Event Logger Abstraction
   ↓
Firebase (Realtime DB)
   ↓
Admin Dashboard (/admin)

⚙️ What I Built

1. Event Logging Abstraction

Created a centralized logging utility to standardize all event emission:

logEvent(event, payload)

Every event automatically includes:

session_id

timestamp

demo_flag: true

This ensured:

Schema consistency

Easy debugging

Seamless future migration to tools like Segment or PostHog

2. Session Lifecycle Tracking

Implemented full session tracking without backend dependency:

Generated session_id on app load

Tracked:

Session start

Session end (tab close / inactivity)

Session duration

Persisted minimal state client-side

This became the primary key for all analytics.

3. Full Funnel Instrumentation (Auth → Onboarding)

Every step in the funnel was tracked with granular timing data:

auth_step_completed

onboarding_step_completed

onboarding_completed

Captured:

Step name

Time spent per step

Drop-off points

This enabled real-time funnel analysis during demos.

4. Deep Conversation Instrumentation (TAMI)

The conversation system was fully instrumented at a behavioral level:

tami_session_started

tami_message_sent

tami_session_ended

Tracked:

Message count

Character count

Conversation duration

Engagement depth

Also implemented:

Conversation end detection → triggers feedback event

Feedback capture (rating, optional text)

5. Real-Time Match Event Tracking

For the live matching system, I instrumented the full lifecycle:

match_request_sent

match_accepted

match_popup_dismissed

Key metric: Time to match (time_to_accept_ms)

This allowed measuring:

Responsiveness of the system

Real-time engagement effectiveness

6. UI & Navigation Tracking

Hooked directly into routing and UI actions:

screen_view

button_click

dashboard_viewed

Tracked:

Navigation paths

Most interacted CTAs

Feature visibility

7. Error & Edge Case Instrumentation

Every fallback path emits structured events:

error_encountered

With:

error_type (timeout, API failure, session reset)

screen

timestamp

This ensured:

Silent failures became visible

Demo risk was significantly reduced

8. Time-Based Metrics Everywhere

Across all flows, I consistently captured:

time_on_step_ms

duration_ms

time_to_accept_ms

This enabled:

Performance insights

UX bottleneck identification

Behavioral analysis

📡 Data Layer (Firebase)

Used Firebase as a zero-backend event ingestion layer:

Direct client writes

Real-time availability

JSON-based flexible schema

All events stored as /events/{event_id} — each event is self-contained and queryable.

📊 Admin Dashboard (Real-Time Analytics)

Built a lightweight /admin panel to consume instrumentation data live.

Features

Section Metrics Funnel View Step-by-step drop-off visualization Session Metrics Total sessions, avg duration, completion rate Conversation Insights Avg messages per session, avg duration Match Analytics Requests sent, acceptance rate, avg time to match Error Monitoring Error frequency by type and screen CTA Tracking Most clicked buttons

⚡ Supporting Engineering Work

While instrumentation was the core, I also:

Stabilized auth and onboarding flows (to ensure clean data)

Refined conversation UX (to improve measurable engagement)

Built real-time matching using SSE/long polling

Added smooth transitions and loading states (to reduce drop-offs)

Created a gamified dashboard (instrumented as a feature endpoint)

All of these were implemented with instrumentation hooks embedded from the start.

🧠 Key Engineering Principles

1. Instrument First, Then Optimize

Every feature was built with observability baked in—not added later.

2. Client-Side First Approach

Eliminated backend dependency

Reduced latency

Simplified architecture

3. Structured Events > Generic Logs

Every event was named, typed, and contextual.

4. Demo ≠ Disposable

Even though this was for SXSW:

Data was clean

Schema was scalable

System was production-portable

🚀 Outcome

Full user journey tracking across all major flows

Real-time analytics during live demo sessions

Immediate visibility into drop-offs, engagement, and errors

Zero backend overhead

Clean migration path to production analytics stack

💡 Takeaway

The biggest impact didn't come from adding features—it came from making the product observable.

By turning every interaction into structured data, the demo wasn't just a presentation—it became a measurable system.

0 likes · 23 views · Mar 25, 2026

Turned a SXSW demo into a measurable system by engineering an end-to-end analytics layer tracking funnels, conversations, matches, and errors in real time.

Timeline

Mar 14, 2026 - Mar 18, 2026