Redesign and Content Migration for the Kofi Annan Foundation
A complete redesign, new information architecture and content migration with over a decade of news and publications. Built with flexibility in and future growth in mind using a custom WordPress block theme.
Status: ✅ Live and ongoing
Link: https://www.kofiannanfoundation.org
Duration: 2023 -
About the Kofi Annan Foundation
The Kofi Annan Foundation is an independent, not-for-profit organisation whose mission is to help build peaceful, democratic and resilient societies. It was founded and legally incorporated in Switzerland in 2007 by the late Kofi Annan, former secretary general of the United Nations.
The Kofi Annan Foundation Website
When the team got in touch with me, they already had a great sense of what was needed for the new website. Having a background in agencies, they delivered a stellar brief with all the necessary details. The caveat with non-profit organizations is usually a limited team size with big ideas. Thanks to the quick development speed offered with WordPress block themes, we now have a design system in place that we can build upon for years to come.
It has been a pleasure to work with Silvan for the launch of our new website. Silvan is thoughtful, patient and flexible, taking the time to get to know our challenges and wishes. A website overhaul can be a challenging process, however, Silvan's organized and thorough approach made it much easier and highly rewarding. We look forward to continuing our work with him.
Development details
Data migration using WP CLI
To migrate all the content pieces, I wrote a bunch of custom WP CLI scripts to download, migrate not just the content, but also the necessary attachments, like images and more important, PDFs.
Advanced Custom Fields is very quick
To build, ship and customize our own blocks, I created custom blocks using Advanced Custom Fields. This enables configurable blocks without much code.
Full-site Editing Block Theme
Using the Ollie WP theme as a starting point turned out to be a great decision, as it provided all the necessary setup to build a block theme quickly.
GenerateBlocks and Kadence Blocks
To not re-invent the wheel, I leveraged the amazing GenerateBlocks to build out the custom mega menu:
Silvan Hagen
For the filterable news and publications, I decided to go with Kadence Blocks as it has the most comprehensive set of query blocks at the moment.
Small interactions with Alpine.js
Working more with Laravel these days, especially Livewire, I decided to build small interactive features like a custom read time block and the quotes archive using Alpine.js.
Design collaboration
Together with Genna and Laura, the communications team at the Kofi Annan Foundation, we set out to find a great design partner. After a few interviews, we found the perfect match in Reto Flühmann, a UX designer at Magma Branding:
In over 200 web projects, this collaboration was one of my favorites so far. Reto understand the brands needs and delivered a bold design system with beautiful Swiss typefaces.
Thanks
This was no small feat, but we re-launched the site and are already working on improving it further. Thank you Genna, Laura and Reto for your amazing work and the great collaboration.
Special thanks to cyon for offering Swiss hosting at a great discount. Noel Tock from Human Made for allowing us to use Altis Accelerate to improve content marketing and personalization and thank you Algolia for offering your fantastic search for free for non-profits.
What is next
We are already working on the next set of improvements for the site and I can't wait to share some of the things I learned along the way.
