Dashboard design
Circularity Gap Report Dashboard
Digital product
Solution & Impact
Lowered production timelines and publication costs via a reusable Strapi CMS template, unlocked the organization's first-ever reader behavioral analytics, and transformed static data into actionable insights.
Role
Lead product designer
Duration
2 months, 2025
Company
Circle Economy Foundation
Team members
Sophia Chou (product designer)
James Yan Aung (product manager)
Isfaaq Goomany (dev lead)
Wazeer Chadun (full stack developer)
Mahima Ramgolam (front end developer)
Skills
User research
UX/UI
Product management
Accessibility
Design system
Tools
Figma
Miro
"How might we transform a dense, text-heavy academic publication into a streamlined digital product that drives engagement, allows us to monitor usage, and reduces our resource input?"
Poor operational efficiency
Despite a somewhat standardized methodology and process, the PDF reports required intense manual investment, including custom graphics, writing, and formatting.
Cognitive overload
Heavy academic research text risked exhausting a less scientific audience and sometimes failed to provide concrete steps or examples for circular implementation.
Hidden insights
Static charts in the PDF lacked deep data explorability, while the internal team had zero analytics on reader behavior.
Process
2
Blueprint & MVP launch
Prototyping: Using the PDF as the guide and the visual language of the report and Circle Economy website, I went straight to designing medium fidelity prototypes for review due to the time constraint.
Information layers: The biggest amount of work was focused on where information should be presented directly, or hidden within expandable sections to provide more information when the user felt it was needed.
Simple interactions: Kept complex visualizations static for the initial launch but surrounded them with "Data Cards"—high-level metric summaries that compared local data to global baselines.
Solution
Dashboard overview
"At-a-glance": Designed a dedicated overview landing page acting as a macro-summary of the report's major data points, to reduce initial cognitive overload and keep more casual readers engaged.
Fast navigation: The summary page created an intuitive starting point that allows users to jump directly to specific sub-sections or chapters of interest.
Structured navigation
Cognitive rest: Broke the endless scroll into clean, digestible chapters interspersed with relevant visuals, charts, and regional case studies to prevent user fatigue.
Flexible exploration: Added a chapter-based index, allowing researchers to pivot seamlessly through the dense report structure based on topic relevancy.
Cross-filtered interaction
Interactive, coordinated charts: User frequently stated wanting more data than was provided in the static PDF. The dashboard allowed us to provide data layers through interaction. For example, we defined interaction rules for the data science team so that clicking a specific part of a chart would result automatically updates all adjacent charts with more relevant data.
Learning by example
Dynamic real-life examples: Users frequently state that they wanted more guidance on how circular solutions can be or are implemented. So, we utilized our case study data base (Knowledge Hub) to integrate real-world circular solutions by dynamically pulling local case studies based on the region or topic being explored (e.g., Norway's waste management).
Were the challenges met?
Poor operational efficiency
Introduction of a CMS and standardizing visuals using the Vega-Altair charts cut fown production time and costs, and made it so that researchers and data analysist could work on the reports directly without design.
Cognitive overload
The "At-a-glance" dashboard overview provided a summary of the results, while strategically placed visuals, tables, case study examples, and expanding sections reduced cognitive load.
Hidden insights
Adding interactive charts to the dashboard provided more data insights that possible in the PDF report, and moving to a digital dashboard format inherently introduced analytics and the ability to evaluate usage of the platform and content.
Reflections
My role: Owned the end-to-end design lifecycle for the MVP before onboarding a junior designer for the next iteration. Led data/visual audits, drove scope-negotiation with the PM, created the UI system, and defined interaction behaviors for the data engineering team.
What went well
Data-driven pragmatism: Dropped mobile responsiveness and tooltips for launch after analytics showed 80% of traffic came from desktop research users. This allowed us to perfect the core experience within 6 weeks.