Case studies Case study
Solutions for Somalia: A Block Theme a Non-Profit Team Can Run
WordPress Developer & Product Designer
Live · Product Design
Highlights
Who It Serves: A humanitarian organisation in Mogadishu working across four programme areas, publishing to donors, volunteers, partners, and the communities it serves.
Design to Build: Designed in Figma, then translated into a block theme built entirely in Gutenberg. The design was made to become patterns from the start, so what was drawn and what the editor can actually produce are the same thing.
What They Can Do Now: Programmes, newsroom, blog, volunteer, and donation pages all maintained in-house, with new content composing from patterns that already match rather than needing a developer.
The Business Problem
Solutions for Somalia is a humanitarian organisation working across four programme areas, skills and education, policy influence, economic resilience, and emergency relief, in partnership with UN agencies, international NGOs, and regional government institutions. An organisation of that shape has to speak to several audiences at once: donors deciding whether to give, volunteers deciding whether to join, partners assessing credibility, and the communities the programmes serve.
Their existing site had aged. It still carried the information but no longer reflected the scale or seriousness of the work, and for an organisation asking institutional partners and individual donors to trust it with funding, that gap matters. They came looking for a redesign that would look current and hold up as the organisation grew.
My Role & Stack
- Role: Product designer and WordPress developer, design through to build
- Tech: Figma, WordPress block theme, Gutenberg, theme.json, GiveWP
What I Did
I designed the site in Figma first, but designed it to become blocks. That constraint shaped everything. Rather than drawing pages and working out afterwards how to reproduce them, I designed the repeating pieces, programme cards, impact figures, testimonial sets, partner logo rows, as patterns the editor could compose. What was drawn and what the team can actually build are the same set of components.
From there I built the theme entirely in Gutenberg, with no page builder and no custom PHP templates:
- Established the design system in theme.json, colour, type scale, and spacing, so every block inherits the same rules and the site cannot drift as content grows
- Built block patterns for the recurring page structures: programme summaries, impact statistics, testimonials, and partner logos
- Structured the four programme areas so each has a dedicated page, letting new programmes be added as content rather than as development work
- Set up the publishing sections, blog and newsroom, as separate streams, keeping organisational announcements distinct from longer form writing
- Built the conversion paths: donation, volunteer, contact, and newsletter, reachable from anywhere on the site
- Styled the GiveWP donation flow to match the rest of the site, so giving does not feel like leaving the page
Results
- The team publishes programmes, news, and blog posts in house, composing pages from patterns rather than requesting development work
- Donation, volunteer, and contact paths are reachable from every page
- New programme areas and content sections slot into the existing structure without a rebuild
- The design holds together as content is added, because the constraints live in theme.json rather than in individual pages
- The organisation now presents at the level its partnerships suggest, which was the reason for the redesign
“Even months after completing the website, he has continued to offer support whenever I’ve needed it.”
Ayaan A., Solutions for Somalia
What This Demonstrates
I design for the medium the site is actually built in. Designing in Figma and building in Gutenberg are usually two people with a handoff problem between them. Doing both means the design system and the block system are the same system, and the client inherits something they can extend rather than something they can only fill in.