/ ux case studies / global plastic treaty

/ ux case studies / global plastic treaty

Global Plastic Treaty

UX/UI

Wireframing

Design Management

Image credits: Minderoo Foundation - Sick of Plastic.

Image credits: Minderoo Foundation - Sick of Plastic.

Project Overview

Part of Minderoo Foundation’s advocacy for a Global Plastics Treaty, ‘Sick of Plastic’ was designed to remind international delegates of what’s truly at stake—the health of their children and grandchildren.

Developed in partnership by Minderoo’s Advocacy & Engagement team, Mediahub and Berlin Creative, the campaign strategically targeted country delegates and key decision-makers at major international events leading up to the Treaty’s pivotal negotiating session in South Korea (INC-5), including CHOGM in Samoa, BIOCOP16 in Colombia, and the G20 Summit in Brazil.

The Global Plastic Treaty website serves as a central hub for information, advocacy, and engagement around the international treaty aimed at tackling plastic pollution and was designed to support the campaign.

Additionally, the website needed to be ready in time for INC-5, the fifth session of the Intergovernmental Negotiating Committee on Plastic Pollution, making timely delivery and clear communication of treaty updates critical.

My Role

As the UX Designer for this project, I was responsible for designing an intuitive, visually engaging, and user-centric experience that effectively communicates the treaty's objectives and drives user engagement.

The Global Plastic Treaty website serves as a central hub for information, advocacy, and engagement around the international treaty aimed at tackling plastic pollution. The website is designed to provide clear, accessible, and action-driven content for policymakers, organisations, and the general public.

The Challenge

The challenge was to create a platform that simplified complex treaty-related information while catering to diverse audiences, from policymakers to environmental advocates.

The Website needed to be:

  • Informative yet digestible, avoiding information overload.

  • Action-oriented, guiding users toward engagement opportunities.

  • Visually compelling, aligning with the initiative’s branding while ensuring accessibility and usability.

  • Evidence-driven, providing credible research and data to support advocacy against plastic pollution.

Research & Strategy

Understanding the needs of different user groups was a priority. Through stakeholder discussions and competitive analysis of similar advocacy platforms, we identified key user and related goals:

This informed the site’s structure, emphasising clarity, streamlined navigation, and strategic content placement.

Policymakers

Needes easy access to treaty updates and supporting research.

NGOs & Advocacy Groups

Sought shareable resources and campaign materials.

The General Public

Require simple, clear information on how to support the initiative.

This informed the site’s structure, emphasising clarity, streamlined navigation, and strategic content placement.

Information Architecture

Design Process

Using Stories for empathy, Evidence & Connection

To strengthen emotional engagement and provide credible evidence, we incorporated a dedicated Stories section on the website.

These real-world narratives highlight the impact of plastic pollution on individuals and communities, making the issue more relatable and compelling. Additionally, the stories serve as evidence, reinforcing the research and advocacy efforts by showcasing real-life consequences and the urgent need for action.

By integrating personal experiences, we aimed to foster empathy, provide data-driven insights, and drive stronger advocacy and support for the treaty.

Wireframing & Prototype

Low-fidelity wireframes were developed to map out the site’s layout, ensuring that key content areas were easily accessible. After feedback from stakeholders, I created high-fidelity prototypes in Figma, refining the design to enhance usability and engagement.

Visual & Interaction

The design balanced bold visuals with clean typography and ample white space to improve readability. Interactive elements, such as hover effects and call-to-action buttons, were designed to guide user engagement seamlessly.

Style Guides - Colours and Fonts
Style Guides - Colours and Fonts
Style Guides - Colours and Fonts

Content Layout - Bento Box

To create a visually structured and engaging interface, I opted for a bento box layout. This modular approach allowed me to present diverse content types in a visually cohesive and digestible manner.

Bento Grid Layout Example
Bento Grid Layout Example
Bento Grid Layout Example

Pros:

  • Improved content discoverability: Users could easily scan and engage with different sections.

  • Flexible design: Adaptable to various screen sizes and devices.

  • Visual appeal: Created a dynamic, modern look that aligned with the branding.

Cons:

  • Potential cognitive overload: Too many elements could overwhelm users if not balanced properly.

  • Development complexity: Required careful implementation to ensure performance and responsiveness.

Screenshot of the Polymer Premium webpage
Screenshot of the Polymer Premium webpage
Screenshot of the Polymer Premium webpage
Screenshot of the Take Action at Home webpage
Screenshot of the Take Action at Home webpage
Screenshot of the Take Action at Home webpage

Developer Handover & Collaboration

Due to limited time, we engaged an external supplier (AMMO Marketing) to handle the coding of the design.

I also managed this part of the project, ensuring smooth collaboration, and directing design decisions to align with the overall UX vision.

I worked closely with the supplier to guarantee accurate implementation, maintain performance and accessibility standards, and uphold the integrity of the design throughout development.

Image of a button component guidelines
Image of a button component guidelines
Image of a button component guidelines

Outcome & Impact

The final website successfully met the project’s objectives, resulting in:

Accessibility

Improved information accessibility for policymakers and advocates.

Engagement

Increased engagement through clear calls-to-action and interactive resources.

Positive Feedback

Positive feedback from stakeholders on the site’s usability and design.

General statistics chart of the website
General statistics chart of the website
General statistics chart of the website

Monitoring & Iterating

Engagement

The Engagement Zone map combines click, move, and scroll interaction data into one view to let you see which parts of your page users are engaging with most.

Hotjar screenshot of user engagment chart

Scrolling

Data is calculated by analysing the amount of users who visited the page against the depth each of them have scrolled down.

Data is calculated by analysing the amount of users who visited the page against the depth each of them have scrolled down.




Hotjar screenshot of user scrolling chart

Movements

Move Heat-maps show where users have moved their mouse on the screen.


Move Heat-maps show where users have moved their mouse on the screen.





Hotjar screenshot of user mouse movements chart

Key Takeaways

Clear, structured content hierarchy is essential when designing for information-heavy platforms.

  • Early and continuous collaboration with stakeholders ensures a smooth design-to-development process.

  • Accessibility and engagement must go hand in hand to create an inclusive user experience.

This project reinforced the importance of designing for clarity, advocacy, and action-driven user experiences in digital platforms focused on global policy initiatives.

Feel free to hit me up. I'm looking

forward to hearing from you.

© 2025 The Sicilian Studio | Tim Colica Design Portfolio. All rights reserved.

Made with love on Planet Earth.

© 2025 The Sicilian Studio | Tim Colica Design Portfolio. All rights reserved.

Made with love on Planet Earth.

© 2025 The Sicilian Studio | Tim Colica Design Portfolio. All rights reserved.

Made with love on Planet Earth.