Easy drag-and-drop report customisation tool designed for project managers
Year
2021-2022
Overview
As a product designer at CitizenLab, I had the exciting opportunity to lead the design of the "Report Builder" feature, catering to project managers involved in citizen engagement projects. This tool allows project managers to customize report layouts and content using project data and templates, and to export the reports via shareable links or printable PDFs. It was a collaborative effort to create a tool that simplifies the reporting process and empowers project managers to effectively communicate project outcomes, both with their colleagues and platform members.
Client
CitizenLab is a community engagement platform used by local governments and organisations to engage their community members. The company offers engagement tools such as surveys, ideation, participatory budgeting, online workshops, and input analysis.
My role
I took the lead on conducting user interviews, prototyping and validation. I was a sole designer, working closely with a product manager and a handful of developers.
The Problem
During or after running citizen engagement projects on our platform, project managers (clients) faced challenges in effectively tracking project progress and sharing project results.
Previously, we offered dashboards where you can track the progress of projects, which fell short compared to what our competitors were offering. It lacked rich data and insights, and admins were not able to export the report. Moreover, some charts were unintuitive, and overall, the tool appeared incomplete due to broken or empty UI.
The Process
Team workshop: What do we want to support?
To collectively imagine our end goal, a team workshop was conducted by product manager. The workshop aimed to create a story map consisting of what user actions we want to support, and to talk about what would be the ‘must,’ ‘should-have,’ and ‘could-have.’
Meeting up with cities
How do our users create reports? How can we improve the experience?
To gather real voices from client’s side on reporting pain points and needs, I had sessions with GovSuccess managers who directly work with them. I also conducted a survey to directly asked to more customers. The following challenges were identified:
Generating reports required clients to manually capture and compile screenshots of chart items, which was time-consuming. This had more impact than I thought, as they complained that it hindered internal decision-making and transparency towards community members.
Clients relied on navigating to the actual project pages and the platform dashboard to track progress, but this approach lacked rich insights and filter options. Many GovSuccess managers frequently had to manually pull the project data for clients as often our product doesn’t offer the needed data.
Many clients didn't use the existing reporting tools. The charts on the page often appeared empty as they did not reflect the participation methods utilized in the project. Additionally, the pages looked incomplete with broken and empty UIs, and some charts were unintuitive.
Additionally, I also tried prioritising client’s needs on data types and file formats for exporting reports. This prioritization helped the team adjust the plan based on progress and identified priorities, as exact timelines for each iteration were often difficult to determine.
What are the potential solutions?
While considering potential solutions with the team, improving the existing reporting tools by adding an export feature seemed like the easiest path. However, we aimed to go beyond that. Leveraging the recently launched tool that allowed customization of project page layouts with drag-and-drop functionality, we recognized the opportunity to extend the same framework to create customizable reports. With the team aligned on this direction, my next step was to design the tool with existing framework, ensuring to solve the identified problems.
Prototyping
During the design process, the primary focus was on creating a self-explanatory builder interface. Considering that many of our clients are not super digital-savvy, it was important to ensure that the customizability of the report builder, consisting of widgets (chart cards) and drag-and-drop functionality, was intuitive and easy to grasp.
Which widgets to support?
As there are different types of projects on our platform, each requiring specific chart types, the product manager and I conducted a workshop with GovSuccess managers to determine which data types or widgets would be most effective for frequently used project types. This helped us prioritize the implementation of widget types within our limited timeframe.
Client interviews & testings
With clickable prototypes in hand, the product manager and I conducted user testing and interviews with three clients. To our pleasant surprise, the clients navigated through the prototypes with ease and expressed satisfaction with the tool. These interactions provided valuable insights into how clients would use the report builder tool, which guided our final implementation focus on templates.
Outcome
As a result of our efforts, the company has incorporated the customisable report builder tool into the standard license, providing a distinct competitive advantage over competitors who offer static reports. Now clients can tailor the layout and content of their report to their specific needs, and easily export it in PDF format or get a URL, which for sure will have positive impact on better decision making and closing the loop with platform members.
This project also opened doors for me to work on the Input Form Builder, which utilizes a similar framework to create customisable forms that clients can employ for their community members.
Retro-spective
During the course of the project, I faced the challenge of managing a constantly changing schedule and plan. This required me to make tough decisions regarding which features to scope out or include. These frequent adjustments often led to confusion, as small design details had to be reworked, and scoping out important features was painful, such as one-click report sharing with residents on the project page.
Also, this experience has taught me the importance of taking responsibility for maintaining existing tools and ensuring consistency within a product. I was tempted to further polish the existing UI and made the decision to update certain UI styles exclusively on the new builder tool, inadvertently creating inconsistencies with the existing tool. This resulted in inconsistencies between the existing and new builder tools, and developers had to to invest extra time in checking and updating each element individually.
That's it! Thanks.
© 2023 Made by Yaesul