All work

The Weaving

A birthday story website for the Head of the DTI department at Ghana School of Law, woven from kente and twenty letters from her team.

  • Storytelling
  • Built with AI

Overview

Role
Creative director and designer
Team
Me, Claude, and my DTI colleagues
Platform
Website
Tools

The idea

Our Head of Department, Miss Lorraine Eyetsa Ocloo, had a birthday coming up. A card felt too small, so the team decided to give her a story instead.

The idea came from kente. Kente is woven slowly, thread by thread, strip by strip, until something beautiful appears. Her life has been woven the same way, and every person on her team is one of its threads. So the site tells that story, then hands her a letter from each of us.

See it live at misslorraineocloo.vercel.app.

How I made it

I built it with Claude, working in Claude Code. I was the creative director and designer: I set the direction, judged every screen and asked for changes until it felt right. Claude wrote the code. My colleagues gave their input and wrote the letters.

It was built in one evening, through about forty messages of feedback. A few examples:

  • “This background looks dull.” So it took its colours from another site I’d designed, with an African pattern behind everything.
  • “Her image should be prominent.” So her portrait became the hero, with big, bold type in the Moistly Vengions font.
  • “Let’s not use modals” and “use scroll effects rather than tapping”. So it became one continuous story you scroll through.
  • “Don’t mention kente as an Asante thing. Say it is Ghanaian.” Small words matter in a gift like this.

1. A story is waiting

The site opens on her portrait, golden confetti and one line: “A story is waiting for you”. The page is locked until she presses Start story, which also starts a Spotify playlist, so the music begins with the story.

The hero on a laptop and a phone: her portrait, confetti, “A story is waiting for you” and the Start story button.

2. The story of kente

Three short lines, one per screen, each with a Continue button that glides to the next. The last one, “Something beautiful is never made from a single thread”, sets up everything that follows.

The three lines of the kente story, each on its own screen with a Continue button.

3. Happy birthday

The wish arrives with its own burst of confetti: “Happy Birthday, Miss Lorraine Eyetsa Ocloo”. Below it: “Your team has brought you threads of their own. Open each letter, and watch what we weave together.” The page locks again until she presses Read your letters.

The birthday wish: “Happy Birthday, Miss Lorraine Eyetsa Ocloo” on orange, with confetti and the Spotify player in the corner.

4. Twenty letters, woven together

Each letter sits in an envelope sewn from a different Ghanaian cloth, like kente, fugu and Ewe kente, so you can almost feel the weave. The envelopes shake as if trying to open, but they wait for her tap. Read ones are marked, and long letters scroll inside a fixed-height sheet of paper.

Every letter she opens adds a strip to a kente cloth at the top of the page. When she has read all twenty, the cloth is complete: her team, woven together.

The letters section with the envelope grid, and three envelopes enlarged: kente, fugu and Ewe kente, each with a colleague’s name.

What I took from it

You don’t have to write the code to make something people feel. Here, my job was knowing what the moment needed, saying so clearly, and not settling until it was right.

Let's worktogether