01- Brief
The Luc Hoffmann Institute was a key funder of global conservation efforts, working alongside WWF to marshal world-class thinking in science, policy, and practice to improve conservation impact.
In 2023, the Luc Hoffmann Institute separated from WWF International to become a new, independent foundation: Unearthodox. This transition presented a core challenge: how to preserve the institute's original DNA while entirely reinvigorating the way it engages its full spectrum of audiences — from academics to donors.
The rebrand needed to encompass a new name, logo, and website, with the website serving as the central focal point for the public launch.
ROLE: UX Design and Research
02- Research
Sitemap
Informed by conversations with stakeholders, partners, and innovators, the rebrand set out to challenge convention and establish a distinctive, unconventional brand spirit, an ambition that also extended to enhancing website navigation and user experience.
Drawing on stakeholder research and competitor analysis, I examined the site's category structure and content hierarchy to identify key opportunities to improve organisation and navigation.
This sitemap marked the first step in aligning design with user experience — streamlining navigation, informing future optimisation efforts, and providing the foundation of web content the Luc Hoffmann team needed to begin development.
UX writing
With a rebellious rebrand underway, a new tone of voice was developed to reflect this fresh positioning. Central to Luc Hoffmann's ethos is a process of co-creation, bringing together people with diverse perspectives to imagine possible futures, and this spirit needed to be reflected in every aspect of the new Unearthodox website. My challenge was to translate that tone into website copy that felt intuitive, engaging, and user-friendly.
The sitemap called for simple, easily translatable language, minimising the need for extensive adaptation of specialised terminology. By working closely with Luc Hoffmann's stakeholders and applying UX writing principles to page titles, I established clear, universally understandable language that catered effectively to diverse audiences.
03- Strategy
Wireframes
The use of wireframes was instrumental to the rebranding process for Unearthodox's website, serving as the first tangible expression of how the organisation wanted to speak to its audience. They provided a structured framework for planning, organising, and visualising the new design, ensuring the rebranded website would deliver an engaging user experience aligned with both brand identity and strategic objectives.
As the first step in applying the new brand identity, I worked closely with Luc Hoffmann stakeholders to develop content areas and restructure the site hierarchy. This visual communication provided a common reference point for discussing design decisions, gathering feedback, and maintaining alignment with the overall brand strategy.
The wireframes also served as a structured canvas for the UI designer to translate the new brand guidelines into a digital format. Together, we ensured that both visions were aligned and ultimately agreed upon by the Luc Hoffmann board members.
04- Design
Design handoff & Module breakdown
One key aspect of this project was that the Luc Hoffmann development team would be responsible for building the website once the designs were approved. This made their involvement throughout the UX/UI design phase essential, ensuring they felt confident building the various modules we created and translating motion design to screen.
We also wanted to support the team in meeting their deadlines, so we worked together to define around 15 core modules that could be reused across different pages and use cases. These modules were extensively documented and packaged within the RY Figma file, ensuring the development team had everything they needed ahead of development. Finally, we maintained weekly stand-ups with the team to address any questions or concerns that arose during the build process.
Movement to match the brand
Movement can be used to tell a story or reinforce a brand identity. Animation, videos, and transitions can convey brand personality and values dynamically and engagingly, helping to create a memorable impression. Together with the brand team and motion designers, we translated the rebellious spirit of the brand into movement online.
To ensure the user experience remained engaging without becoming overwhelming, we designed the movement to be fluid and responsive to the user's actions on the website, providing feedback as they interacted with it. This movement flow is slower-paced and mimics the "waves of change" described in the brand guidelines. We also ensured static versions were designed to adhere to accessibility guidelines.
05- Launch
The Unearthadox website was launched in February 2023 with a small rollover contact for QA changes from the design team to update.
If you would like to see the full website in action, take a look here