4Rs

4Rs is an institutional and academic project focused on environmental sustainability, supported by extensive research and a substantial body of editorial content. The previous platform held all of that knowledge — it just struggled to present it in a way that felt clear, accessible or contemporary.

The project focused on a complete restyle: improving structure, usability and visual clarity from end to end, while protecting the integrity of the original material. The brief wasn't to rewrite the content; it was to give it a setting worthy of being read.

The site had accumulated the typical limitations of long-running academic platforms — a visual language that no longer matched current standards, page after page of dense text, weak responsive behaviour and a CMS structure that made even small updates difficult. The result was an experience that asked too much of its readers, regardless of how valuable the underlying material was.

Content Reorganisation

Given the volume and density of the material, structure had to come before aesthetics. We broke long text blocks into scannable sections, introduced a consistent hierarchy across headings, paragraphs and sub-sections, and reshaped the flow so readers could navigate the content the way they actually use it — moving between depth and overview without losing their place. The goal was to keep the richness of the material intact while making it easier to read, navigate and understand.

UX & Wireframing

Wireframes were used to define a calmer, more intuitive structure across a platform with a lot of moving parts. We simplified navigation, designed a logical reading flow tuned for academic content, and aligned consistency across pages so visitors always knew where they were and where they could go next. The journey, by the end, feels clear, calm and purposeful.

UI Design & Visual Direction

The visual approach is deliberately minimal. White becomes the primary surface, letting the content lead, supported by a soft and neutral palette that protects readability over long sessions. Typography and structure carry the weight of the design, while visual noise is kept to a minimum so the material can do its job. The result reads as light, modern and academically credible.

For an academic, public-facing platform, accessibility wasn't optional — it was the point. The system was tuned for readability over long sessions and across very different devices, with structure doing as much accessibility work as the styling layer.

The site was designed in Figma and built in WordPress with Elementor — a setup that gives the team full autonomy over content and a structure that can grow with the project's research output.

Stack: WordPress · Elementor · Figma

The visual system respects the academic nature of the project and modernises its presence — a clean, neutral aesthetic built around clarity, credibility and the absence of distraction.

The new platform turns a dense, dated experience into something modern and accessible. The same depth of content is still there — but it now reads as a contemporary, structured resource rather than an archive to fight through — readable at any screen size and accessible by design, not as an afterthought.