Service Monitor

Get critical availability insights and early alerts for web products.

Hand holding a phone with the Service Monitor app visible on screen.

Case

At one point our web team had a lot of digital products they needed to keep an eye on. There was a lot of time and effort spent checking and validating every product's availability. Also, being the first to get notified when a product is unreachable would be a great plus. Getting an email from a frustrated client who lets us know their website is offline is never fun.

After a fruitful brainstorm session, our team was tasked to finalize the concepts, and then design and develop a multi-purpose testing platform that does the following:

  1. Create and update assertions for testing.
  2. Assertions can have an expected result and can be given protocols on which the tests will be performed.
  3. Hierarchical step-based automatic testing and reporting based on assertion and protocol.
  4. Web-based accessible interface with an interactive overview of all product with their respective assertions, test results and other relevant info.

Approach

Sketching, brainstorming and forming lots of ideas are all meant to diverge the scope. To create a big overview of all the options we choose and directions we can go. So that's exactly what we did! We created a couple of lists and sketches forming the fundamental concept for our product. We took our most important needs and matched them to features we had in our lists. In a way, we formed our minimum viable product, our MVP!

Early sketches for Service Monitor.
Early sketches for Service Monitor.

My next task was to work out the sketches to a design, ready to be implemented for the prototype.

Early sketches for Service Monitor.
Early sketches for Service Monitor.

Development was performed in iterations, or sprints, where we decided on a weekly basis what features had to be implemented. This approach gave us an overhead view of how all the modules and components (should) work together and motivated us to write classes for each part of the product.

The front end was written from scratch with modularity in mind, with a few plugins where necessary: Tippy.js for tooltips and our own Collapsible for asynchronous expanding and collapsing of HTML elements.

Results

Service Monitor was a fun and challenging project, but it was created with love and it shows! Together with Joran Rood I set out to conceptualize, design and develop an intuitive, simple yet fully-featured service monitor.

With the configurability of the system, you can extend to test many of your services on the web. And with the web-based user interface it's easy to have an overview of all the operational (or offline) web apps and websites at a glance!

Did I spark your interest?

Let's work together! Drop me a line at: