NetZero Learning Hub
overview
My team and I were challenged to envision a new experience for the @NetZeroCities Learning Hub, a European platform created to support the achievement of the Climate City Contract (CCC) and the net zero emission goal, facilitating collaboration between cities.
Goal
Redesign the the main flows of the Hub Webapp
My Role
I took care of the final UI, developing the design system, defining the most critical layouts, and prototyping the main user flows.
Team
Paolo Lunardon, Martina Ricca, Simone De Marchi, Alice Gaudino, Maria Grazia Lamberti, Francesco Pollaccia
Timeline
5 days
The problem
The Hub does not provide a clear way to organise and share resources, making it difficult for cities to find information, share knowledge and connect with other cities facing similar challenges.
Our solution
Ease collaboration with new shared workspaces and project folders
Within new workspaces, cities can now store and organise all necessary resources into dedicated project folders and easily share them on their official pages.
Shared projects provide learning pathways for other cities working towards similar goals. Rather than sifting through endless materials without guidance, new cities can now remix related projects in their own workspaces to optimize their learning experience.
Within new workspaces, cities can now store and organise all necessary resources into dedicated project folders and easily share them on their official pages.
Shared projects provide learning pathways for other cities working towards similar goals. Rather than sifting through endless materials without guidance, new cities can now remix related projects in their own workspaces to optimize their learning experience.
01.
Discover similar projects
Find projects from other cities similar to the one you’re working on
02.
Explore project details
Access resources used by the project team to achieve their results
03.
Remix resources
Save all its resources directly into your worspace and start learning!
01.
Discover similar projects
Find projects from other cities similar to the one you’re working on
02.
Explore project details
Access resources used by the project team to achieve their results
03.
Remix resources
Save all its resources directly into your worspace and start learning!
01.
Discover similar projects
Find projects from other cities similar to the one you’re working on
02.
Explore project details
Access resources used by the project team to achieve their results
03.
Remix resources
Save all its resources directly into your worspace and start learning!
↓ Dive deeper into the project 🤓 ↓
Research Findings
The net zero goal is a tough challenge, and the hub isn't helping...
During the workshop presentation, we gathered feedback from city officers in Florence and Parma. Their insights highlighted the platform's major pain points and guided us in shaping its redesign.
During the workshop presentation, we gathered feedback from city officers in Florence and Parma. Their insights highlighted the platform's major pain points and guided us in shaping its redesign.
Problem 01.
Too much, too messy.
The hub has many resources but is hard to navigate. New users struggle to know where to start, often wasting time or giving up.
Problem 03.
Limited info about 'Pilot Cities'
Pilot cities are meant to be a guide for smaller cities but their profiles lack information and contacts, making it unclear how they achieved their CCC.
Problem 03.
Hard to connect with experts and advisors
Expert and city advisor profiles are incomplete and very hard to find on the platform, limiting connection between users.
Case studies
How are the 'big players' making learning easier?
We analysed some key case studies to see how leading learning platforms are tackling similar issues.
From this research we identified interesting features from Pintarest, Learnn and Thingiverse to inspire our redesign.
We analysed some key case studies to see how leading learning platforms are tackling similar issues.
From this research we identified interesting features from Pintarest, Learnn and Thingiverse to inspire our redesign.
Case studies & benchmarking
Analysis of Pintarest, Learnn and Thingiverse
UI Development
With only 4 days to redesign the UI of such a large platform, we focused our efforts on the three main flows that best showcased the new learning experience we envisioned for the Hub.
We focused our efforts on the three main flows that best showcased the new learning experience we envisioned.
Design System
A refresh was really needed!
We focused on creating a new clean and scalable design system that gives the Hub a modern and minimalist look, both easy to implement and professional!
We focused on creating a new clean and scalable design system that gives the Hub a modern and minimalist look, both easy to implement and professional!
Final Design
The final design, presented at the end of the workshop, revolves around three key scenarios of use involving the main stakeholders of the platform.
Scenario 01
Marco, the city officer of Parma, has to use the hub to learn how to reduce CO2 emissions in his city
Explore projects & save resources
Scenario 01
Projects, organised by topic for easy navigation, show their status, descriptions and resources — quickly remixable with a single click.
Projects, organised by topic for easy navigation, show their status, descriptions and resources — quickly remixable with a single click.
Scenario 02
Davide, an energy councillor of Florence, has to develop a photovoltaic-themed project and wants to contact an expert in this field
Find & connect with experts
Scenario 02
The new 'resources page' allows users to easily find experts and view their profile, projects and resources before contacting them.
The new 'resources page' allows users to easily find experts and view their profile, projects and resources before contacting them.
Scenario 03
Chiara, the city officer of a small city that has recently joined the network, wants to learn how to obtain the CCC
Explore cities & connect with advisors
Scenario 03
City pages now showcase certification documents, resources, completed projects, and direct links to their advisors.
City pages now showcase certification documents, resources, completed projects, and direct links to their advisors.
Takeaways
Proper planning is the key!
I've always been a meticulous person, often spending a lot of time on every detail of my projects — sometimes even exceeding my own deadlines🙄. Taking on such a complex redesign in a limited timeframe forced me to face a harsh reality: I had to prioritise, hard.
Working with an amazing team, I had the chance to improve my time management skills. We efficiently prioritised tasks, shared responsibilities and ensured seamless collaboration, making the workload more manageable.
This experience showed me the importance of having a clear plan before diving into complex projects!
I've always been a meticulous person, often spending a lot of time on every detail of my projects — sometimes even exceeding my own deadlines🙄. Taking on such a complex redesign in a limited timeframe forced me to face a harsh reality: I had to prioritise, hard.
Working with an amazing team, I had the chance to improve my time management skills. We efficiently prioritised tasks, shared responsibilities and ensured seamless collaboration, making the workload more manageable.
This experience showed me the importance of having a clear plan before diving into complex projects!
Next project
Jo — Build trust, step by step
Build trust in autonomous driving
Jo — Build trust, step by step
Build trust in autonomous driving
Jo — Build trust, step by step
Build trust in autonomous driving