Website Build for Design For Good
Sector: Nonprofit / Social Impact / Design
Services: Website Build on Squarespace / Figma-to-Web Development / Bespoke Coding
UX & UI Implementation / SEO Foundations
Focus: Accessibility, Design Accuracy, Ease of Use, and Scalable Content Management
Website Build for Design for Good
Bringing a bold, purpose-driven digital presence to life on Squarespace
Project Overview
Design for Good is a global nonprofit alliance mobilising design talent to create open-source products and services that advance social and environmental good aligned with the United Nations Sustainable Development Goals.
The organisation approached me with a Figma prototype that captured their brand’s mission and visual identity and my task was to bring that design to life as a fully functioning Squarespace website. This included custom coding to ensure the site not only matched the design but also provided smooth, intuitive interactions and a flexible templates the team can update independently.
The Challenge
Design for Good’s vision is ambitious and global. They needed a website that:
Showcased their mission and work clearly, so partners, designers, and NGOs instantly understand what DfG does.
Matched a detailed Figma design without compromise from bespoke layouts to custom interactive elements.
Was easy to maintain and update internally, with straightforward content management for team members who aren’t developers.
Supported strong SEO performance, so their impact, case studies, and partnerships can be found and shared widely.
Squarespace, while flexible and powerful, doesn’t natively support some of the bespoke features in the design so careful planning and custom code were essential for this project.
The Solution
I built the site on Squarespace for:
Ease of use — the team can edit pages, add news and stories, and manage content without a developer.
Strong SEO tools — intuitive control of metadata, clean site architecture, fast performance, and built-in sitemaps to support discoverability.
Security and stability — reliable hosting and regular platform updates.
Scalability for future expansion — blog, resource pages, and campaign features as the organisation grows.
From the Figma designs, I developed:
Custom Functional Elements (With Bespoke Code - JAVA, HTML & CSS)
Unique carousel styling — tailor-made to match the design’s rhythm, spacing, and animation style (not available out-of-the-box in Squarespace).
“Stats showcase” modules — data displays that highlight impact figures in engaging, accessible formats.
Dynamic profile layouts — flexible team and partner profiles that adapt beautifully across devices.
Custom navigation behaviours and transitions — preserving the original UX envisioned in Figma.
Each code enhancement was developed with a focus on maintainability, meaning the Design for Good team can continue to update content and swap imagery and more without breaking functionality.
SEO & Content Strategy Built-In
From launch, the site was structured to support search visibility:
Logical site hierarchy and internal linking
Optimised page titles, headings, and metadata
Fast-loading layout and accessible semantic HTML
Mobile-responsive design for performance and search rankings
These fundamentals create a strong foundation for ongoing content growth and audience reach.
The Result
The final site is:
✔ True to the original design — every layout and interactive element closely mirrors the Figma vision.
✔ Easy for the internal team to manage — editing content and rolling out updates is simple and intuitive.
✔ Built for impact — strategic SEO and user experience choices support broader visibility and accessibility.
✔ Flexible for the future — the site’s foundation allows new resource pages, stories, and campaigns without overhaul.
Design for Good now has a professional, purpose-aligned digital platform that supports their mission and empowers their team to share stories of global impact.
Platform: Squarespace 7.1
We chose Squarespace because it strikes a strong balance between user-friendly content management, built-in SEO capabilities, and the ability to extend with bespoke functionality where needed, perfect for mission-driven organisations who want control of their digital space without ongoing developer dependency.
Squarespace also supports best-practice SEO workflows, meaning teams can manage page titles, descriptions, structured content, and sitemaps without technical expertise — which was a key requirement for Design for Good.
💡 Looking for a unique website that reflects your values?
Let’s create a beautiful, efficient, and eco-conscious digital space for your business. Get in touch with me for a chat
More from my portfolio…
