Elastic · front-end observability

Catching front-end problems before users ever feel them.

Front-end teams had no fast way to know their users were hitting problems until the complaints came in.

Role

Senior Product Designer

Company

Elastic

Scope

Front-end observability (RUM & synthetics)

In short

Problem

Front-end teams were blind to their users' real experience until the complaints came in; browser performance and errors were invisible to the tools they had.

My role

As senior product designer I designed the front-end observability experience inside Elastic's platform.

Key decision

Lead with the user's real experience, not raw metrics, so a team sees a problem the way a user felt it and can trace it to a cause.

Outcome

Front-end teams could catch and diagnose problems earlier, inside the same platform as the rest of their observability.

01 · The challenge

Slow pages and broken flows cost businesses their users.

Have you ever been on a website that takes forever to load, or suddenly stops working? Websites and apps face these issues all the time, and businesses need to catch them before end users experience the problem.

Catch it before
the user does.

The best time to find a slow page or a broken flow is while it is still yours to fix, not after it reaches someone's screen.

02 · What we shipped

Surface the problem, then guide the fix.

A set of features that surface performance and reliability problems to front-end teams and guide them to a fix, before those problems reach end users.

The Synthetics Recorder

Writing the tests was harder than running them.

Catching problems early means constantly testing real user flows, but writing those synthetic tests took code and time. So we built a recorder: click through your site once and it captures every step as an editable, exportable test. No code required.

Elastic Synthetics Recorder

The Synthetics Recorder: from the starting point to a run with passing and failing steps