The ICPH dashboard in a browser and the sign-in screen on a phone, over the platform’s illustrated landscape of mountains, forest and sea
Back to our work
Our work · ICP Hub

A shared space for climate action.

The International Climate Politics Hub brings together people working across climate policy, science, diplomacy and civil society. Its network shares analysis and coordinates around moments when international decisions can move climate action forward. We worked with ICPH to create a digital platform around that work: a place to find briefings, connect with colleagues and keep up with the network’s activities. The project brought user journeys, a distinctive visual environment and custom development together around the needs of a distributed community.

See the work Read the story

  • ClientInternational Climate Politics Hub
  • WorkUser journeys, information architecture, UX/UI design, custom platform development and integrations
  • PlatformLaravel and Vue.js, connected to Airtable

The work

The ICPH sign-in screen in a browser over the illustrated landscape: a white panel inviting members to activate their account, above the e-mail and password fields

01Account activation and password recovery provided routes for members to manage their access, alongside administration tools for the coordinating team.

The briefings library in a browser on pale green: filters for topic, date, geography and event, a search box, and a teal timeline of climate events above the briefing cards

02A timeline offered another route through the material, connecting briefings to moments in the international climate calendar.

A briefing open in the reading view, in a browser on teal: the title with its date, a download button, the text with bullet points, the question “Will you use this briefing?” with yes and no, topic tags and related briefings

03The reading experience combined online text with access to the PDF.

The network directory in a browser on a warm neutral background: topic and location filters above white cards for members, each with a portrait, work title, company and tags

04Search and filters for topic, location and role helped members find people through the expertise and context relevant to their work.

Four phones on teal showing the mobile designs: the latest briefings, the network directory, the calendar and the sign-in screen

05The design extended to mobile layouts, adapting navigation, filters and reading views for smaller screens.

The challenge was to make these activities feel connected while respecting the different access needs within the community.

The full story

How we got there

In this case study
ClientInternational Climate Politics Hub
WorkUser journeys, information architecture, UX/UI design, custom platform development and integrations
PlatformLaravel and Vue.js, connected to Airtable

The brief

ICPH’s existing Drupal website stored the briefings distributed to its network by email. It provided an archive, but its design and limited functionality no longer reflected how the organisation wanted to work.

The dashboard in a browser: the ICPH logo and side navigation over the illustrated mountains, and the latest briefings in white and teal cards
The dashboard, opening on the latest briefings

The new platform needed to make that growing body of knowledge easier to explore. Members needed to find analysis relevant to their interests, return to earlier documents and read briefings online as well as download them.

There was also a wider opportunity: to bring the network itself into the experience. A directory, shared calendar and connection to its conversations could help people work together across countries and areas of expertise.

The challenge was to make these activities feel connected while respecting the different access needs within the community.

Starting with the people using it

We mapped the platform around the people receiving briefings, the team coordinating the network and the editors publishing its analysis. Their journeys connected tasks that might otherwise have been treated separately: receiving an email, activating an account, opening a briefing, finding a colleague or checking an upcoming call.

This helped define the relationship between the briefing library and the working space for the network. It also brought the less visible parts of the experience into the design, including account activation, password recovery and editorial administration.

Two screens side by side on pale green: a first-login welcome asking the member to confirm their details, and the privacy policy to agree to
First sign-in: confirming details and the privacy policy

Airtable was already part of ICPH’s day-to-day work. Connecting the platform to it allowed the website to build on that existing network information, with member profiles and access roles carried into the new environment.

The profile editing panel in a browser on teal: screen name, name, e-mail, organisation, country, geographic coverage, thematic scopes and a profile picture
Editing a member profile

Making knowledge easier to explore

We organised the briefing library around several ways of finding information. Members could search by keyword and narrow the collection by topic, date, geography or event. A timeline offered another route through the material, connecting briefings to moments in the international climate calendar.

The reading experience combined online text with access to the PDF. Topics and related briefings provided routes into further reading, while a simple usefulness response gave members a way to indicate whether they would use a briefing.

The expanded reading view in a browser on pale green: a briefing over the library with its download button, text, bullet points and the usefulness question
The expanded reading view, with demonstration text

The same principle shaped the network directory. Search and filters for topic, location and role helped members find people through the expertise and context relevant to their work.

The network directory in a browser with one member card turned into a message form
Getting in touch with a member from the directory

Giving the workspace a sense of place

The interface paired a landscape of illustrated mountains, forests and water with a restrained palette of teal, pale green and warm neutral tones. It gave the platform a recognisable setting connected to the natural world behind its mission.

The illustration behind the platform: misty mountains, forests and a river running to the sea, in pale greens, greys and soft pinks
The illustrated landscape behind every screen

White content panels created space for reading within that landscape. Strong headings, rounded controls and consistent tags connected the briefing library, directory, calendar and account screens through one visual language.

The design extended to mobile layouts, adapting navigation, filters and reading views for smaller screens. The aim was a welcoming environment that could support both a quick visit to retrieve a document and a longer session exploring the network’s work.

Three phones on pale green: the sign-in screen, the first welcome with the profile form, and the user profile in teal
Sign-in, first welcome and profile on mobile

Connecting the tools behind the network

We developed the platform with a Laravel back end and a Vue.js interface. Airtable integration connected member information and roles to the platform, while editorial tools supported creating, categorising and publishing briefings.

Calendar and Slack views brought upcoming activities and selected conversations into the same workspace. Account activation and password recovery provided routes for members to manage their access, alongside administration tools for the coordinating team.

Two browser windows on a warm neutral background: the calendar month with upcoming calls for the week, and the Slack view with channels and messages
The calendar and the Slack view, shown with demonstration content

The work continued through testing and refinement with ICPH. Feedback covered the practical details of using the platform: opening documents, navigating between briefings, synchronising member records and making content comfortable to read.

A platform around the work

The project gave ICPH a custom environment bringing its briefing library, member directory, calendar and conversations together. It supported the relationship between the knowledge the network produced and the people using it.

Further design work explored how to make the network itself more legible through global, thematic and geographic visualisations. Building on the directory, these views considered how people could discover expertise and understand the community from different perspectives.

Two network directory designs on teal: the global view drawing members as connected nodes, and the thematic view dividing the network into areas such as advocacy, politics and adaptation
Design exploration: the global and thematic views of the network

Across the project, the focus remained practical: helping people reach the information and connections they needed to contribute to climate action.

Made by

Penrose

  • Sorin PavelUX and strategy
  • Elena ReghintovschiUI and design
  • Cristi LunguDevelopment