Our approach began with a comprehensive discovery phase, establishing the foundations for the website before moving into visual design. We developed a detailed sitemap to understand the overall information architecture, alongside a page planning document to identify the purpose, content requirements and functionality needed across the site. This was supported by an initial wireframing exercise, allowing us to establish consistent page structures and ensure the full breadth of Habitat’s content could be accommodated within the new digital approach.
The discovery process was particularly important given the breadth of Habitat for Humanity UK’s work. The website needed to communicate everything from its international housing programmes and disaster response work to its Great Britain initiatives, research, fundraising, volunteering and partnership opportunities. By mapping these requirements early, we were able to create a flexible design architecture capable of supporting different content types and user journeys without becoming overly complex.
Brand-Led Design
Once the structural foundations were established, we explored how the existing Habitat brand could be translated into a more contemporary digital experience. Rather than restricting the design to a rigid interpretation of the existing guidelines, we allowed the brand’s vibrant colour palette to become a central part of the visual language. Bold colours were used purposefully throughout the interface, creating hierarchy, energy and visual distinction while ensuring that individual colours complemented rather than competed with one another.
Flexible Architecture
The square visual language within the Habitat identity provided a strong foundation for developing a modular design system. We incorporated square and geometric elements throughout the interface to create a recognisable connection to the wider Habitat brand, while using them as flexible building blocks for content, imagery, calls to action and supporting information. This created a consistent visual rhythm across the website while allowing individual pages to feel dynamic and tailored to their content.
Visual Storytelling
Photography was given a prominent role within the design, reflecting the human stories and real-world impact at the heart of Habitat’s work. Large-scale imagery and carefully considered content layouts were used to create emotional engagement while giving important stories, projects and people the space they deserved. This helped move the experience beyond simply communicating information, allowing the website to demonstrate the tangible impact of Habitat’s work.
Designing for Action
The website was ultimately designed to make it easier for users to move from understanding Habitat’s work to becoming involved. Clear calls to action and considered content structures support key journeys around donating, fundraising, volunteering and partnering with the organisation. By combining intuitive UX foundations with a bold, brand-led visual system, the new website creates a more engaging platform for Habitat to communicate its mission, demonstrate its impact and inspire action.
