Knowledge Hub revamp

COMPany

Circle Economy

Project type

In house product

Time

July 2025-Feb 2026

Tools
Figma
Miro
Granola AI
Maze
Team

Sophia Chou: Product Design & Researcher
Lauren Zemering: Product Design Lead
James Aung: Product Manager
Isfaaq Goomany: Dev Lead
Wazeer Chadun: Full Stack Developer
Mahima Ramgolam: Front End Developer

Knowledge Hub Revamp

COMPANY
Circle Economy
PRODUCT TYPE
In house product

TIME
July 2025-Feb 2026

Tools
Figma
Miro
Granola AI
Maze
TEAM
Sophia Chou: Product Design & Researcher
Lauren Zemering: Product Design Lead
James Aung: Product Manager
Isfaaq Goomany: Dev Lead
Wazeer Chadun: Full Stack Developer
Mahima Ramgolam: Front End Developer
Deliverable

Redesigned and integrated a circular economy knowledge platform into the broader Circle Economy website, aligning user journeys, information architecture, and visual systems across products to create a cohesive product ecosystem for sustainability professionals.

Impact

Built a strong scalable design foundation

Habit-building among designers and developers

Jump to see design outcome
or scroll down to read the full project journey
Project context
The previous Knowledge Hub
About Knowledge Hub
The Knowledge Hub (KH) is an open digital repository for circular economy practices. Developed by Circle Economy as a standalone website in 2016, the platform attracts around 5,000 organic visitors per month, which is crucial to the organization’s impact goals. However, the platform had reached a breaking point, making a comprehensive revamp necessary.
The Challenge:
Legacy tech meets brand fragmentation

Critical Security Risks

The outdated architecture (Strapi pre-4.8.0) exposed user data to potential vulnerabilities (CVE-2023-22894).

Technical Debt

The frontend was five major versions behind (NextJS v9), making maintenance costly and slow.

Confusing brand identity

Research showed users were confused by the separation between the “Knowledge Hub” and the main “Circle Economy” website, diluting the brand value.
The Goals
During the process, we examined and discussed with internal stakeholders whether the Knowledge Hub (KH) should be integrated into the main Circle Economy website. As the redesign evolved, we decided to move forward with integration, aiming to boost website traffic by sharing Knowledge Hub content and visitors. Beyond increasing traffic, our other goals included securing the site architecture, reducing resource requirements, and improving the overall user experience. The aim was to launch an MVP ahead of the CGR 2026 event.

Create a secure, maintainable and scalable site architecture

Improve overall user experience

Increase Circle Economy website traffic through platform integration
*This goal emerged during the design process

Constraints & strategies
Despite high traffic, KH is not a direct revenue generator. This meant we had strict resource limitations. We needed a strategy that balanced ideal UX with feasible delivery.
Strict MVP Scope:
We had to cut non-essential features to meet the CGR 2026 deadline.
Design system development to optimize workflow:
To reduce dev time and improve integration, we leaned heavily on the brand of the circle economy website and created components that could be used widely across the whole ecosystem.
Future-Proofing:
Since maintenance resources are low, we opted to use many of the systems already in use for the Circle Economy website. Streamlining the two platforms and making them robust enough to run with minimal oversight post-launch.
Process
Phase 1: Discovery
We began with discovery research — reviewing backlogs of past user feedback, conducting new interviews, and refining the Jobs-to-Be-Done. Because Knowledge Hub serves a diverse audience: case study contributors, readers interested in circular economy topics, and Circle Economy itself as a contributor and publisher, we wanted to make sure we properly understood the diverse needs. Along with clarifying business requirements, this enabled us to define the key user stories the new Knowledge Hub needed to support.
Research methods
User interviews, past research deep dive, JTBD analysis
Phase 1 research findings:
Contributors wanted more recognition for their work and ways to connect with others to expand their network. They also wanted a more efficient way to upload case studies.
Readers wanted to navigate content by relevant filters such as the industry or region. And they wanted to see more practical, on the ground case studies.
Circle Economy wanted to host and promote its own publications while also fostering an open platform for sharing circular practices.
Phase 2: Synthesis – OOUX, user flows, OST, and wireframes
Due to short turnaround times and budget pressures, Circle Economy often moved quickly to high fidelity handover. With this project, however, we spent a long time on synthesis to ensure our foundation was solid. At the time of synthesis, it had not yet been confirmed whether Knowledge Hub will be integrated into Circle Economy’s main website. Therefore, we structured it to function either as a stand alone website or as an integrated part of the Circle Economy platform.

We conducted an object-oriented UX (OOUX) mapping, the goal of which was to simplify the old architecture while creating a framework for our wireframes. We also developed detailed user flows and an Opportunity-Solutions-Tree (OST) to design the structural foundation and map the features and experiments. These flows and wireframes were validated through internal feedback sessions involving circular economy researchers and consultants, and the tech team.
Object-oriented UX (OOUX)
The goal of which was to simplify the old architecture while creating a framework for our wireframes.
User flow
We mapped out complex flows like sign up, contributing a case, or adding a case to a collection to make sure we considered every step.
Wireframes
After having OOUX, user flows and OST, we started building low fidelity wireframes in Miro.
Internal feedback
We shared the wireframes in Miro to internal stakeholders and the developers to gather feedback before we move on to higher fidelity designs.
Phase 3: Hi-fi design & design system development
After iterations of the low-fi wireframes, we transitioned to high-fidelity design in Figma and simultaneously developed a unified design system. It was important to maintain a consistent visual style between Knowledge Hub and other Circle Economy products, as it would support potential platform integration and strengthen overall brand recognition.
This phase took considerable time due to auditing the existing Circle Economy web design and components, the creation of new responsive foundations, accessibility guidelines, and ongoing user testing to ensure the design direction was sound. To speed up delivery, developer handover happened continuously: as soon as components were mature, they were handed over for build.
See here to learn more about Circle Economy’s design system.

Example of high-fidelity design

Phase 4: Handover & integration
Before the design was fully completed and handed over, we verified the integration plan into our Circle Economy’s main website. We ran multiple rounds of internal stakeholder sessions with the communications team and facilitated an online Maze test to validate the new sitemap proposals. Combining user and stakeholder input, we finalized the Knowledge Hub’s information architecture and positioning in the main website.
Test result
The Maze test result showed that the term “Knowledge Hub” did not clearly communicate what the section contains.

Solution
Our solution was to label Knowledge Hub as “Resources” in the main navigation.
Test result
The entry points for searching by region, framework, and industry were not prominent enough, despite being important navigation routes.

Solution
Therefore, we provided additional entry points on the Knowledge Hub landing page to explore content via regions, framework, or industry.
Final Design
1. Consistent branding across platforms

Previously, the Knowledge Hub was a stand alone website with its own branding. The branding is now aligned with the other Circle Economy platforms and integrated into the Circle Economy main website.

2. Community contribution

Since investment resources are low, we wanted to take advantage on Knowledge Hub’s open access model and improve the contribution process, making it easier for individuals or organisations to add the platform and help knowledge grow.

  • Preview format: The previous contribution form was a long form to complete. We redesigned it so the layout mirrors the content page allowing users to preview how their submission will appear, which encourages users to optimize and refine their submission.
  • Guidance & tips: We made the contribution form more focused, giving contributors more tips and guidance on how to write valuable content.
  • Simplify tagging process: We simplified the tagging process by interlinking framework tags, eliminating the need for users to select tags across multiple frameworks which is something that had previously been noted by users as being confusing and tedious. 
3. Improved content pages: enhancing credibility & discovery

Based on user research, we learned that the content pages were largely serving their purpose, however we were able to improve them in a few ways.

  • Proper citation is essential for content credibility, we simplified adding references by automatically generating a citation list when links are added to the text.

  • Integrated Related Content and More from the Contributor logic to surface relevant materials, helping users discover valuable content while increasing time on site.
4. User & Organisation Profile Page: making expertise findable

This is a newly introduced feature. From user research, we learned that people wanted more recognition and easier ways to grow their network. To support this, the profile page includes:

  • A short self-introduction section, with the option to add tags that reflect their expertise or the region they’re located. These tags make profiles searchable on the platform and can help increase visibility.
  • The ability to put contact links and project links.  
  • A space to manage their own written posts and liked (saved) posts.
Reflection

The key theme of this project was investing in doing things right, rather than twice. Instead of rushing delivery on a tight budget, we focused on strong foundations across process, information architecture, design systems, and documentation. This enabled a more robust platform and reduced long-term design and technical debt.

What we did well:
Strong foundations & clear documentation for handover

We built a strong design foundation through OOUX, wireframing, and a scalable design system with responsive variables. We also delivered clear, structured Figma documentation covering components, interactions, responsiveness, and accessibility. This reduced developer handover time and, by establishing documentation habits early, helped the team stay consistent even under time pressure.

What could be improved:
Centrailised decision tracking

Product requirements and decision-making were spread across multiple tools, making it difficult to trace decisions over time. A single source of truth documenting all decisions, even small ones, would have improved clarity and continuity.

Circle Economy Design System
Scroll to Top