UNESCO Biosphere Reserves and Global Geoparks
2026 ✦ View website
Mockup of the landing page
Background
In my role as a designer at Eau de Web, I contributed to the redesign of the UNESCO platform for biosphere reserves and global geoparks. These are community-led sites that connect governments, civil society, scientists, and local partners to protect nature and improve livelihoods through research, conservation, and sustainable development initiatives.
Objective
The focus for this project was redesigning the platform so it aligns with the UNESCO brand manual. This meant a minimalist website design that builds trust with end users, and can be recognized as associated with UNESCO. Maintaining consistency with the existing visual identity, including brand colors, logo and components was a top priority.
The platform’s map is the primary hub for discovering and navigating the list of sites. One other objective for this project was structuring the filters/sorting options and which presented as a real challenge. This page served as one of the access points for viewing the protected sites' profile pages.
A key part of the work was aligning perspectives across stakeholders: some were deeply knowledgeable about specific UX problems, while others had issues and decisions that were derived from the provided data and platform analytics.
Approach
Improving map interaction was central to the overall user experience, and where most of the design focus was at. The site profile pages were another important part of the project, where I collaborated with the client and we brainstormed and pitched ideas during a call, while I was live-editing in Figma.
Discussions with the stakeholders were beneficial because they helped me understand the UX problems we were dealing with. A review of the website highlighted several usability issues.
- slow loading times for the map, pins and sidebar information
- information hierarchy on the landing page was underdeveloped; a clearer content structure was proposed, with short descriptions for each section, visuals and buttons to reduce mental effort, improve comprehension and provide an easier navigation
- inconsistent design where elements look different across the site
- too much clutter
Initial design effort focused on improving the map experience. A spinner was added to the sidebar where the list of sites and filters was displayed. The map loaded first and the pins afterward. Markers were grouped in clusters, with numbers indicating the total number of sites within each area. To reduce visual clutter and support map performance, the controls were kept to a minimum, displaying only the zoom controls and the site legend.
The landing page was inspired by existing UNESCO platforms, because it serves as the users' first contact with the website. Existing card components were used and adapted where necessary to implement client feedback. In response to the client's first feedack that the initial design felt too simple and needed to encourage further exploration, I edited together footage from various sites for the hero banner, to create an engaging and visually dynamic introduction.
The site profile pages were a new addition to the website, and this was where I had the most freedom to explore. The client trusted my vision for displaying the sites' unique identities, allowing me to experiment with the layout. I aimed to create a reusable template, each site having different quantities of information, and through an iterative process where I brainstormed with the client in meetings, we created a profile structure which highlights the site's significance while keeping the information hierarchy clear and consistent.
Old version of the website landing page
The design system
Although UNESCO's design system was publicly available online, creating my own version proved valuable for the project. Feedback from the client through Figma comments and meetings helped refine the mockups and identify ares for improvement. Once implemented in its initial form, the design system played an important role in maintaining visual consistency across the website. It was helpful to the developers, who were writing the code and performance problems alongside the ongoing design process, to meet the project timeline.
The design system created in Figma
Final outcome
Landing page mockup
Map of the sites mockup
Site profile page mockup
Country profile mockup