An interface to display the daily scores of multiple web domains being monitored by a bot. The score is assigned based on the analysis of the trackers and vendors detected on each domain.
The project.
I was the only product designer in the team, and I was in charge of envisioning the new product features that could increase the value delivered to the users.
Before the discovery, the idea was to include this colorful matrix in our product interface. It was a heatmap displaying multiple web domains’ daily score (from A to E) during the last 90 days.
It was displayed on a 3rd party tool, hence the idea to create the same view inside our application.
The original interface is an Excel matrix displaying the scores of the last 90 days.
After three weeks of research, interviews, and analysis of the current product, the vision evolved into building a custom interface that would offer actionable insights and additional high-value information.
In parallel, I was also tackling the existing problems in the UI. I started rationalizing the current UI and defining a design system to improve consistency.
This is important since such a design system in Figma speeded up the prototype for the new concept and made it accurate enough to write user stories out of it.
From passive to active monitoring.
In a couple of weeks, I created the prototype to support the new vision by leveraging the Figma elements.
The prototype comes with a list of cards with calendar-like widgets. Each card represents a web domain, and each calendar day shows its daily score.
The daily score is assigned through a scan that analyses the state of the website. And since the most recent data are the most relevant, the last domain’s score is highlighted.
The concept prototype, it was built with elements from the just-created design system..
We wanted the product to move from passive monitoring to active monitoring, providing actionable insights that help the users understand how to improve the score of their domains.
This is why we display a “warnings” button within the card if any actionable warnings exist.
The user can click it to access more information. The prototype also provides a dedicated tab for the web domains with actionable warnings, making them faster to find.
Indeed, this was one of the first requirements I set for the new interface since some clients had hundreds of domains and encountered difficulties isolating the ones needing more attention.
The tab filtering only the domains with actionable warnings.
When the user clicks on a “warnings” button, an overlay shows the detailed counters of the detected issues. Since the problems can be at a vendor or tracker level, the counters are organised in 2 sections.
The “warning” counters of a domain help in understanding the nature of the issues found on the domain.
Each counter is clickable and brings in a secondary screen with the information the users need to take remediation action and improve their score.
This information is the precise list of detected critical trackers or vendors, along with why they are considered critical.
The user can use these detailed information about a trackers issue to evaluate the better way to solve it.
Detailed information about a vendors issue. To solve it, the user should include them in the CMP.
Conclusion.
The project was exciting from a design perspective. It practically demonstrated to the team how product discovery is essential and how the design tools effectively support it.
The prototyping was fundamental in making the product vision understandable to the team. Everyone could analyze it, evaluate the pros and cons, and check the technical requirements, the possible business impacts, and the overall user experience.