Observability @Elastic

An easy-to-use app
for testing websites
automatically

Industry

DevOps, SREs

Client

Elastic

Position

Senior product designer

Imagine you own an online store. You want to make sure that when people visit your website, everything works, buttons can be clicked, and pages load properly. Now, imagine having to check it manually by clicking through every page making sure nothing is broken. That would take forever! Developers write scripts (sets of instructions) that automatically go through a website and check if everything is working. Writing these scripts requires coding, and it's time consuming.

What I did on the project

As part of the Observability team, I led the design of a new electron app that helps developers easily record, test, and export automated scripts for synthetic monitoring without needing to write complex code manually.

The image featured in the middle of the about us page

Who Are the Users?

The people using the Script Recorder are:

01

Developers

Who build websites and apps

02

QA testers

Who make sure websites work correctly

03

DevOps teams

Who help run and monitor websites

The solution: Elastic recorder


Elastic script recorder simplifies the process by allowing developers to interact with a website naturally, while the app records every action and converts it into a ready-to-use test script.

Start the Recording

  1. The user inputs a website URL and starts a "journey."

  2. Record Interactions: Every click, text input, navigation, or button press is automatically recorded and turned into a script.

The image featured in the middle of the about us page

Micro-interactions

Add Assertions

  1. Users can define rules, like checking if a button is visible or if text appears correctly.

The image featured in the middle of the about us page

Test the Script

A built-in testing feature allows users to run the script to verify if all actions work correctly

The image featured in the middle of the about us page

Export the script

Once satisfied, users can export the script in JavaScript format for use with Elastic Synthetics or other testing frameworks.

The image featured in the middle of the about us page

What happens next?

Monitor creation

The image featured in the middle of the about us page

Why this app is a game-changer for Elastic customers

✅ No coding required: Developers can record scripts visually instead of writing them from scratch.

✅ Saves time: Automates test creation, reducing manual work.

✅ User-friendly interface: Intuitive UI allows both beginners and experts to use it efficiently.

✅ Integrated testing: Users can verify scripts before exporting them.

User feedback to shape the experience

User testing was critical in refining the tool. We conducted multiple rounds of testing with our target users, gathering feedback on usability, feature effectiveness, and areas of confusion.

The image featured in the middle of the about us page

Iterations

Based on user input, we simplified the design and enhanced performance, making it both faster and more intuitive to use. For example, users found the test creation tool complicated initially, but after refining the interface based on their suggestions, we achieved a significant reduction in setup time.

Live version

See it in action

The image featured in the middle of the about us page

Outcome: faster, more reliable websites


This app bridges the gap between developers and automated testing by making script creation effortless. It’s a powerful, time-saving tool that helps save hours of manual work, making synthetic monitoring more accessible to teams.