theWambuidesign

theWambuidesign · Studio notes · Nairobi

Building theWambuidesign

Notes on designing, coding and shipping my own site — the structure, the decisions, and what it’s like to build a product end to end with AI in the workflow.

The theWambuidesign homepage: 'I design the product, the brand, and the site that sells it,' a 'See recent work' button, and a workshop photo.

The brief

One job, three kinds of visitor

This site isn’t a gallery. It exists to turn three kinds of people into a first conversation: funded startups building for African users, international teams entering these markets, and established businesses that need a refresh or a growth push. Every decision below was measured against that.

Ideation

Paper first, then structure

A handwritten notebook page sketching the homepage layout: hero statement with a workshop photo, and a 'My work' bento grid of four items, above 'My services.'
The homepage, sketched by hand before a single pixel — section by section, in the order a visitor would actually scroll through them.

The structure it became

A sitemap diagram of the live site: Home at the root, branching to My work, Services, About, Studio and Contact; My work branching further to the Tikomatata, Champions, YONA and RSH case studies; and a footer row for Privacy Policy and Terms of Service.

The designs

From sketch to shipped page

The live 'Selected work' page: the lede paragraph followed by case-study cards for Tikomatata and Champions.
The live homepage: the Services list of four offerings, and the 'Great work starts with people, not assumptions' mid-page statement.
The live Tikomatata case study page: hero title, a laptop-and-phone product shot, and the $100K+, 3-surfaces and mobile-first stats.

The wireframe's structure held all the way to build — real pages, not templates, in the same shape they were on paper.

Working with AI

Designing and building with AI

I work the way a designer works now, not the way one worked five years ago. AI didn’t design this site — I did. What it changed is the distance between a design decision and a working product: I could build and ship something I would previously have had to hand over and wait on.

Direction

01

I made the positioning, structure and visual decisions myself. That judgment is the part that doesn’t get delegated.

Claude Code

02

I built the front end with Claude Code — translating my Figma designs into real, working components rather than a template.

ChatGPT

03

Used for filling gaps in the build: explaining unfamiliar territory, walking through approaches, unblocking me when something broke.

Judgment

04

Every output got reviewed against the design. AI accelerates execution; it doesn’t get a vote on whether something is right.

Responsive & accessible

Built for how people actually browse

The same type, spacing and structure hold at any width and on any page — Studio narrow beside Services wide, both still clearly the same site.

The Studio page at a narrow width beside the Services page at a wide width, showing the same type and spacing system holding across both.
The homepage's mid-page statement at mobile width, with no photos and a centred layout, beside the same statement at desktop width with four workshop photos orbiting around it.
The orbiting photo collage is a desktop flourish, not core content — on mobile it disappears entirely rather than getting squeezed down, leaving the statement centred and legible on its own.

Build & ship

From design file to live site

Design, code, version control, deployment — all of it myself. A designer who can ship understands what they’re asking engineers for, and can move without waiting for a team when there isn’t one.

Design

01

Figma — design system, components, responsive specs.

Build

02

Claude Code — front-end build from the design file.

Version control

03

GitHub — the repo as the source of truth.

Hosting

04

Netlify — continuous deployment, live in minutes.

How I work

Why any of this matters to you

You’re reading the site itself. The site is live, the structure held from wireframe to build, and the process above is the same one I’d run on your product. If you’re launching something, entering these markets, or refreshing a business that’s outgrown its current site — this is what you’d be buying.

Decisions, not decoration

01

Positioning and structure come before visuals, every time.

Field research

02

Real users in real markets — not assumptions made from a desk.

Design to shipped

03

Figma through to a deployed, responsive, accessible site.

Current tooling

04

AI in the workflow where it earns its place, judgment kept with me.

Next project Easy Gas Reimagining how Kenyan households order cooking gas.

Let’s build something that holds together.

If you’re building a product, a brand, a site — or need all three to finally act like one thing — start with a Launch Audit: three days, a fixed fee, and a clear plan for what to prioritise next.

Get in touch