![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 3.106 L 3.123 0 L 20.135 16.926 C 20.409 17.197 20.626 17.519 20.775 17.875 C 20.924 18.23 21 18.611 21 18.996 C 21 19.38 20.924 19.761 20.775 20.117 C 20.626 20.472 20.409 20.794 20.135 21.066 L 3.123 38 L 0.003 34.895 L 15.969 19 Z" fill="rgb(49, 49, 49)" height="38px" id="s7PhIa9un" transform="translate(30.212 21.908)" width="21px"/></svg>)
A UX Widget Redesign
for Smarter City Decisions
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 25.714 L 0 34.286 L 51.75 34.286 L 51.75 42.857 L 60.375 42.857 L 60.375 34.286 L 69 34.286 L 69 25.714 L 60.375 25.714 L 60.375 17.143 L 51.75 17.143 L 51.75 25.714 Z M 43.126 8.572 L 51.751 8.572 L 51.751 17.143 L 43.125 17.143 L 43.125 8.572 Z M 43.126 8.572 L 34.5 8.572 L 34.5 0 L 43.126 0 Z M 43.126 51.428 L 51.751 51.428 L 51.751 42.857 L 43.125 42.857 L 43.125 51.428 Z M 43.126 51.428 L 34.5 51.428 L 34.5 60 L 43.126 60 Z" fill="rgb(255, 255, 255)" height="59.99999755566683px" id="MM6SLOagw" transform="translate(7 11) rotate(90 34.5 30)" width="69px"/></svg>)
Client
RMIT & Regen Melbourne
Role
UIUX intern
Timeline
2 months
The Doughnut Economics framework helps policymakers and entrepreneurs visualize the social and ecological footprints of their developments. We translated this complex academic theory into an interactive web widget, making these assessments instantly readable for decision-makers. Beyond the interface, I designed a visual system to solve critical accessibility challenges, ensuring the strict data standards remained legible while transforming a theoretical model into a practical strategic tool.
Context
Most economic models stay in textbooks. This one needed to work in the boardroom
Doughnut Economics is a framework consisting of two concentric rings: a social foundation of human needs (like health and education) and an ecological ceiling of planetary boundaries (like climate change). The goal is to help humanity thrive in the "safe and just space" between them.
My task was to translate this complex socio-political theory into a digital tool. The goal was to move beyond academic diagrams and create a functional widget that entrepreneurs could use to instantly assess if their projects were falling into the "safe space" or overshooting planetary limits.
▲ Doughnut Economics Model
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 25.714 L 0 34.286 L 51.75 34.286 L 51.75 42.857 L 60.375 42.857 L 60.375 34.286 L 69 34.286 L 69 25.714 L 60.375 25.714 L 60.375 17.143 L 51.75 17.143 L 51.75 25.714 Z M 43.126 8.572 L 51.751 8.572 L 51.751 17.143 L 43.125 17.143 L 43.125 8.572 Z M 43.126 8.572 L 34.5 8.572 L 34.5 0 L 43.126 0 Z M 43.126 51.428 L 51.751 51.428 L 51.751 42.857 L 43.125 42.857 L 43.125 51.428 Z M 43.126 51.428 L 34.5 51.428 L 34.5 60 L 43.126 60 Z" fill="rgb(255, 255, 255)" height="59.99999755566683px" id="gXFm8DZHv" transform="translate(7 11)" width="69px"/></svg>)
Problem
Data Without Hierarchy. The original chart was "technically" accurate but practically unreadable.
The previous visualization suffered from "Data Dump" syndrome. It was static, cluttered, and lacked visual hierarchy. Users struggled to distinguish between the "danger zone" (overshoot) and the "safe space," meaning decision-makers couldn't quickly interpret the metrics they needed to adjust their development strategies. The message was getting lost in the noise.
▲ The original chart
Early Exploration
▲ Early User Researches
My initial research into existing sustainability tools revealed a critical gap: they were built for economists, not entrepreneurs. They prioritized data density over clarity, leaving non-experts overwhelmed.
Armed with this insight, I moved to paper sketches. The spatial challenge was real: how do you fit 20+ data points into two rings without it looking like a cluttered dartboard?
▲ Sketches and Experiments
01
The Text Issue
02
The Iteration
I experimented with moving the labels outside the rings and using hover states to reveal details, treating the chart as a navigation tool rather than a static image.
Usability Testing
We presented the mid-fidelity prototypes to a group of stakeholders, and the feedback was immediate and critical.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 82 82 L 0 82 L 0 0 L 82 0 Z M 35.306 68.334 L 44.417 68.334 L 44.417 36.445 L 35.306 36.445 Z M 34.167 22.778 C 34.167 26.058 36.609 28.464 39.861 28.464 C 43.114 28.464 45.556 26.058 45.556 22.851 C 45.556 19.498 43.187 17.092 39.861 17.092 C 36.609 17.092 34.167 19.498 34.167 22.778 Z" fill="rgb(0, 0, 0)" height="82px" id="D3F9kcYvK" width="82px"/></svg>)
The Accessibility Gap
The framework relies on Red (Bad) and Green (Good). Stakeholders pointed out that for colorblind users, the chart looked like a grey blob.
The Confusion
Users weren't sure which segments were interactive.
This feedback was the turning point. It reminded me to stop relying on color as the only indicator of "danger."
▲ Usability testing setup
Solution
I didn't just clean up the UI, I built a frictionless engine for decision-making.
I collaborated with engineers to replace the "data dump" with a logic-driven interface that empowers users to grasp insights instantly and share them seamlessly.
▲ Updated User Interface
01
Refined Doughnut Logic
A two-ring visual system—outer for high-level categories, inner for specific indicators. By using bar length and color intensity, users can now instantly decode both the direction (improvement vs. decline) and the magnitude of the impact without reading a single number
03
Closing the Loop (Actionable Results)
A one-click PNG export feature is designed. Now, users can title their scenarios and download the chart instantly to drop into reportsbridging the gap between digital analysis and real-world presentation.
01
40% Faster Time-to-Insight
By replacing the cluttered layout with a logic-driven "frictionless" flow, we significantly reduced the time it takes for a policymaker to build a full scenario and extract the data they need.
02
95% Task Completion Rate
In the previous interface, users often abandoned the tool due to cognitive overload. The new step-by-step logic and clear hierarchy ensured that nearly all users who started a scenario successfully completed and exported it.
03
Adopted by 200+ Industry Leaders
The tool was successfully launched and validated at the Regen Melbourne conference, serving as the primary visual aid for over 200 stakeholders to drive real-time sustainability discussions.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 47.04 0 L 1.96 0 C 0.878 0 0 0.878 0 1.96 L 0 47.04 C 0 48.122 0.878 49 1.96 49 L 47.04 49 C 48.122 49 49 48.122 49 47.04 L 49 1.96 C 49 0.878 48.122 0 47.04 0 Z M 14.535 41.756 L 7.264 41.756 L 7.264 18.369 L 14.535 18.369 Z M 10.898 15.17 C 8.57 15.17 6.684 13.284 6.684 10.956 C 6.684 8.629 8.57 6.742 10.898 6.742 C 13.225 6.742 15.112 8.629 15.112 10.956 C 15.112 13.284 13.225 15.17 10.898 15.17 Z M 41.748 41.756 L 34.484 41.756 L 34.484 30.38 C 34.484 27.667 34.437 24.182 30.705 24.182 C 26.926 24.182 26.346 27.134 26.346 30.184 L 26.346 41.756 L 19.09 41.756 L 19.09 18.369 L 26.06 18.369 L 26.06 21.568 L 26.158 21.568 C 27.126 19.725 29.498 17.785 33.038 17.785 C 40.4 17.785 41.756 22.63 41.756 28.93 L 41.756 41.756 Z" fill="rgb(0, 0, 0)" height="49px" id="LIGo47a1Z" transform="translate(17 17)" width="49px"/></svg>)