Logs Visualization
A simple histogram, built on a real support pain, translated directly into Courier’s bottom line.
Executive Summary
Role & Duration
I worked as the product designer for this project, I reported to the creative director & worked with 1 fullstack & 2 frontend engineers.
The project took ~3 months from design to implementation.
Summary
Updates to Courier's Logs to fix troubleshooting in high-volume messaging link to changelog. Developers struggled with dense tables (12 rows/page at 1-5 messages/second), demanding mental math and 15-45 "next page" clicks, causing risks and overload.
Key updates: histogram for observability, 6 color labels with text for scannability, and filter presets for speed. Histogram rollout delivered 25% faster troubleshooting and 20% reduction in pagination & clicking.
What Courier Does
A notifications API & UI management system
Courier connects with the customers code base & integrates with notification service providers such as Twilio, Whatsapp, slack, Gmail, etc.
Users can build/design their notification, set up action triggers & automations and send messages via push notification, email, sms etc.
Series B
15 employees
Thousands of customers
Clients send 10-15 million messages per month.
Twillio, Lattice & Benevity, are examples of a few of our larger customers
What is Logs
Every notification gets its own row on the logs page. This row shows:
Which message template was sent
Who it was sent to
When it was sent
The status (delivered, clicked, opened etc…)
Which provider it was sent with
Logs is mostly used by developers when they are testing or troubleshooting. Issues could stem from the customers' codebase, a provider or the notification configuration. This complexity of external origins adds a unique challenge for us at courier.
The Problem With The Old Logs
Hard To Catch Issues
Users had to scroll through table rows & do mental math to find problems. This resulted in overlooked risks & operational inefficiencies.
One small startup had setup text notifications for every sign up. This was fine when their signups were low, however, their product went viral overnight resulting in 20k of text costs over 2 days.
High Cognitive Load
High volumes overwhelmed logs; clients sent 1-5 messages per second. Each page has ~12 rows. Finding where an issue started and ended can be like finding a needle in a haystack.
If there is an issue, engineers need to find & correct that issue. For example, if appointment reminders failed to send, ideally, they would resend those successfully.
Why Do This Project
Deliver On Our Mission & Promise
High volumes overwhelmed logs; clients sent 1-5 messages per second. Each page has ~12 rows. Finding where an issue started and ended can be like finding a needle in a haystack.
If there is an issue, engineers need to find & correct that issue. For example, if appointment reminders failed to send, ideally, they would resend those successfully.
Trust Via Visibility
Logs is at the heart of the developer's setup and troubleshooting experience. A tangible improvement here can really improve the quality of the developer's experience.
Our intention is that improved observability & troubleshooting gains our users trust & confidence in using Courier. As a consequence, we hope to gain more of their business via transitioning more of their old notifications onto Courier and or sending more of their notifications through the Courier platform.
Discovery
User Analytics
There were 15-45 "next page" clicks per visit, this shows that developers are clicking, scrolling, scrolling, and then clicking and scrolling some more.
Path analysis linked 35-50% of Logs page visits to immediate navigation to the support portal, with session durations under 3 minutes, suggesting the interface fails to empower self-service troubleshooting for common issues.
Survey
In a survey of 30 customers, over 90% of reported they primarily use manual querying during troubleshooting. This shows that developers are not able to extract the information they are looking for in the logs page itself.
Support Logs Review
A review of 100 support logs show that the majority of customers are unsure about the source of the issue in their initial communications to Courier.
Courier engineers concur that they have the same initial issue spending 15-30 mins trying to track down the issue source.
Improvements
Observability
Adding a histogram to the top of the logs page.
Scannability
Replaced 14 icons with a 6 simple color strips.
3. Resolution Speed
Added the ability to save filter presets to eliminate redundancy.
Observability
Former Limitations
Engineers had to manually scan rows & click through dozens of pages.
Improvement: Data Visualization
Added a histogram at the top for a quick visual representation of the status of notifications.
Scannability
Former Limitations
16 icons are too many to be able to remember. Concepts of "queued, sent, delivered, opened, clicked" do not have standard symbols that are easily recognizable.
It is healthy & expected for Courier users to log in once a week or less. Especially since visits are infrequent, ideally we make the system as intuitive as possible without relying on them to remember Courier specific concepts.
Improvement - Half The Symbols
16 icons were replaced by 6 colors labels. Engineers come to logs to troubleshoot, which is why "delivered" green is shown by a small imperceivable dot. Now, users can focus on the categories that may be an issue for them.
Added a column with the specific text meaning of every color on every row for reliable scannability (no need to refer back to the filter legend to remember what the color means).
Resolution Speed
Former Limitations
Filters need to be applied every time and all the filters are seen at all time. This demands of a high cognitive load from the users.
Save Filter Presets
With the new design users can save their filters. All other filters are hidden while working to improve focus.
Faster Troubleshooting
On average engineers save 10-15 mins per issue. They tend to apply meaningful filters in less than 1 min of entering the logs page.
20% Reduction in Pagination & Clicking
Averages went from 15-45 clicks/visit to <10, suggesting that users no longer rely on manual clicking & scrolling to localize issues.