UX & UI Design
Monitor Backlinks is an SEO SaaS tool that tracks backlinks and keywords for sites. Our goal was to make it easier for users to get the data that they needed by building a new automated reporting feature.
The platform displays a large amount of data on backlinks and keywords, but most users have a set of key metrics that they depend on and check frequently. Currently, users have to log in and navigate to the data they need each time they want to check the data.
Build an automated reporting feature that allows users to
- Create reports that contain the same updated metrics that can be accessed on site
- Custom pick which metrics to display in each report
- Schedule reports to deliver automatically, at specified intervals
Though concluded, this project was deprioritized and not implemented.
Key Design Elements
All of the charts, graphs, and tables on the platform can be added to the report as "widgets." To give users maximum flexibility with customization, each widget has its own settings.
Users needed to know exactly what the report would look like in order to be comfortable with scheduling it to be delivered by email. To ensure this, I added a persistent report preview that users could directly modify.
Drag & Drop
The report interface needed to be easy and intuitive. Despite additional development complexity, we decided to allow users to drag and drop report elements onto a report preview.
Version A: Widget Popup
In this first version, users select widgets from a popup to include in the report.
This simplified complexity on the report configuration page, as the only widgets the user sees are the ones that are in the report. However, it made it more difficult to add/delete widgets.
Version B: Drag & Drop Widgets
This second version displays all available widgets (2), which users can drag and drop onto the report. As soon as a widget is added to the report, it appears in a "Widgets in report" section with all of its configurable settings (1).
Drag & drop made it easier to configure the report, but with more complexity on the report configuration page and a disconnect between the widget in the report preview (right) and its settings (left).
Version C (Final): Inline Widget Settings
This final version keeps drag & drop widgets but moves the widget settings inline, accessible on hover.
Though this version is more complex to develop, we settled on it to minimize confusion and provide the easiest user experience.