On-Call Mobile: Close the loop from wherever you are.

Timeline
August 1, 2025 → September 30, 2025
Company
Harness
Summary
This case study captures the mobile-specific design learnings that are now feeding directly back into the larger product direction for our AI SRE platform.
Tags
B2BTechnical DomainMobileEnd-to-endFun project
Read Time
10min
On-Call Mobile App

This mobile application is a critical component of a broader AI SRE solution designed to help engineers resolve incidents faster, wherever they are. This case study captures the mobile-specific design learnings that are now feeding directly back into the larger product direction for our AI SRE platform.

Project Snapshot

  • Role: Product Designer (with contributions to telemetry)
  • Team: 1 Product Manager, 1 Engineering Manager, 2 Full Stack Developers
  • Timeline: 3 Months (1 Quarter)
  • Platform: iOS & Android (using TestFlight for builds and feedback)

The Problem I Set Out to Solve

On-call life is difficult enough. Engineers are triaging incidents quickly, often one-handed, typically under stress, and phones keep growing in size. Some of our existing web patterns, when ported, felt dated, making basic tasks like reading, reaching filters, or understanding list scope unnecessarily difficult.

What I Aimed For

My core goals were to:

  • Make reading and tapping comfortable at a glance.
  • Keep the overall experience calm, especially when nothing required immediate attention.
  • Be unambiguously clear about the list context: items assigned to the user versus the full organizational view.
  • Track a few key user funnels to ensure fast, evidence-based iteration.

Establishing the Mobile Design System

As this was the first mobile app at Harness (the parent company we belonged to), a ready-made mobile design system did not exist. I adapted our established web system for the small-screen, high-urgency context. I focused on adapting the existing web system for optimal one-handed use: meticulously adjusting the type scale, spacing, and card patterns. This preserved the distinct Harness look and feel while ensuring elements were easily readable and tap-friendly on mobile.

Mobile Design System

Key decisions and why they stuck

1) Type that respects newer iPhones

  • What I found: The old minimum of 14 px felt cramped on devices like the iPhone XS.
  • What I changed: Bumped the minimum body size to 16 px. Small change, big difference in legibility and comfort.

đź’ˇ Personal Note: Coming back to mobile design after a few years reminded me that thumbs have opinions. Mine voted for bigger type.

2) Filters you can actually reach

Where I started
I followed an older Human Interface Guideline (HIG) pattern with filters high up and actions split.

Old filter pattern

Where I landed
Moved filters to a bottom sheet, inspired by patterns like those in iOS Photos. This positioning is simply easier to access and operate with one hand on larger phones.

New filter pattern with bottom sheet

3) Blank states that lower your shoulders

On‑call can be tense. When there's nothing to act on, the UI should help you breathe, not keep you on edge. I designed blank states that signal safety and allow users to mentally breathe.

Blank states design

4) Telemetry without the noise

Tracking usage data was crucial, but the task fell outside of our team's immediate bandwidth; analytics typically lived with the PMs, who both, at the time, had no capacity for the setup. Determined to get the signal we needed, I took the initiative to learn and execute the analytics setup myself.

What I did
I drafted an event schema (thanks to a Gemini-seeded template), aligned with the PM, and with the feedback he gave, cut it down to three core funnels. Then pruned discrete events so we don't introduce latency. I then handed this over to our developers to create the events and set up tracking on Firebase.

What we're watching:

  • Do people use shortcuts or head to the full lists?
  • Where do acknowledge, escalate, or resolve flows stall?
The three core funnels I wanted to track

The three core funnels I wanted to track.

Pruned discrete events

Pruned discrete events.

More pruned discrete events

More pruned discrete events.

Success metrics for the three core funnels

Success metrics for the three core funnels.

5) A simple testing loop that actually works

Our feedback process uses TestFlight builds and a dedicated Slack channel, #on-call-mobile-app-ux-feedback. This setup creates a continuous feedback loop: I use the dev testing app on TestFlight to catch UX gaps and potential interaction issues missed in earlier designs. My focus is on interaction details, spacing, and timing, while engineers effectively spot payload mismatches and logic bugs. This clear division of labor allows the team to move quickly and efficiently.

Testing feedback loop

đź’ˇ Personal Note: My superpower is noticing the tiny things you feel but can't name yet; teammates balance it by breaking the app in exactly the right ways.

6) Clearing up "My list" vs "All list"

The confusion
"View all" looked like the org‑wide list, but it actually showed items assigned to you. The screens looked too similar.

Confusion between my list and all list

The product angle
Most people don't need the full org list often. The primary flow is seeing the latest items, then viewing all of yours. The full list lives in the nav for occasional research.

The fix
Tweaked copy and visuals so that clicking on the "View all" button clearly reads as showing only the incidents and alerts assigned to you.

Fixed list clarity

7) Badges that tell a clearer story, faster

The insight
Urgency comes from badge combinations. Critical + Investigating feels very different from Critical + Monitoring.

The change
Put badges side‑by‑side so you read the combo instantly and act with more confidence.

Badge design comparison
Badge implementation

8) Swipe‑tap shortcuts that save real time

The inspiration
Quick actions in Apple Mail and Gmail.

The pattern
Bring Acknowledge, Escalate, and Resolve right onto the list cards, so you can act without diving into details.

  • Incidents: Acknowledge + Escalate
  • Alerts: Acknowledge + Resolve

Visual cueing
Red, green, and blue accents that make it harder to mis‑tap when you're moving quickly.

Swipe shortcuts in action

Communicating Across Time Zones: The Power of Video

Working with a global team requires methods beyond scheduled meetings to circulate ideas and capture timely feedback. To ensure rapid alignment and address interaction details that are hard to describe in text, I adopted a strategy where I record brief, focused videos to showcase new patterns or highlight specific interaction flows.

Why It Works: Videos circumvent scheduling issues across different time zones, allowing teammates (PM, engineers, and stakeholders) to review the latest build or concept at their convenience, providing specific, contextual feedback.

This method proved highly effective in maintaining continuous momentum and ensuring everyone, regardless of location, had a shared understanding of the intended user experience.


What changed (so far)

  • Reading is easier with a 16 px baseline
  • Filters are reachable and usable one‑handed
  • "My vs All" is clearer, so people know what list they're in
  • Shortcuts speed up first actions without opening details

A quick reflection

This project helped me shake off some rust on mobile and grow my analytics chops. I leaned on native patterns where they help, and changed them where on‑call realities call for it. The goal was a calmer, faster path to the first right action, and the telemetry to keep making it better.