Work

About

Journal

Contact

Toolkit

Search work and notes

Command menu

Product designer

Front-end developer

Bristol, UK

I design useful things, then build them.

Wren Okafor makes products and websites for small teams. This desktop is the portfolio: open a folder, drag a window around, or use the dock to jump straight to the work.

finder — featured work

4 of 8

4 items

Featured

hello.md

edited today

Hi, I’m Wren.

Drag this window somewhere else. Everything on this desktop is a real page, and the dock at the bottom goes to the same places.

wren@desk ~ %

Booking Q4

2 of 6 slots left

Starting 12 October. Tell me what you’re building.

Desktop 1 of 10 · scroll to open more windows

Product designer

Front-end developer

Bristol, UK

I design useful things, then build them.

Wren Okafor makes products and websites for small teams. Tap an app to open the work, the story, the journal or the contact form.

Booking Q4

2 of 6 slots left

Starting 12 October. Tell me what you’re building.

  • Product design

  • Design systems

  • Front-end build

  • Prototyping

  • User research

  • Brand identity

  • Motion

  • CMS setup

02 About

A designer who also writes the code.

For nine years I’ve designed and built products and websites for small teams: booking apps, shops, a design system for ocean data. I sketch on paper first, prototype in code second, and test with real people before anything ships.

I like working with teams of three to thirty who need one person to hold the whole thing together: the research, the screens, and the front-end. You get someone who can talk to your developers in their own language, and to your customers in theirs.

about this desk

v9.0

Name

Name

Wren Okafor

Role

Role

Product designer and front-end developer

Based in

Based in

Bristol, UK · works remotely

Experience

Experience

9 years, 40+ shipped projects

Works best with

Works best with

Teams of 3 to 30

Teaches

Teaches

Interaction design, part-time

Reply time

Reply time

Within one working day

Free from

Free from

12 October 2026

Last updated September 2026

03 Process

How a project runs, one command at a time.

Five steps, the same every time. You’ll always know which one we’re on.

Five steps, the same every time. You’ll always know which one we’re on.

terminal — wren@desk

zsh

wren@desk ~ %

./process --list

01

Listen

Two weeks of calls and visits. I write down what people actually say, not what they think you want to hear.

Two weeks of calls and visits. I write down what people actually say, not what they think you want to hear.

02

Sketch

Paper first. Ten rough ideas, then the two worth testing. You see all of them.

Paper first. Ten rough ideas, then the two worth testing. You see all of them.

03

Prototype

Clickable and coded, in front of five real users by the end of week three.

Clickable and coded, in front of five real users by the end of week three.

04

Build

Components in code with a CMS you can edit. I build it, or hand it to your developers with docs.

Components in code with a CMS you can edit. I build it, or hand it to your developers with docs.

05

Hand over

A short guide, a recorded walkthrough and a call at week four to answer what you missed.

A short guide, a recorded walkthrough and a call at week four to answer what you missed.

wren@desk ~ %

04 Track record

Nine years, in numbers.

The figures that matter to clients: how much shipped, and how many came back.

The figures that matter to clients: how much shipped, and how many came back.

activity monitor — wren

all time

Years practising

9

of 10 planned

Projects shipped

42

since 2017

Teams worked with

31

across 6 countries

Clients who came back

96%

hired me again

Figures from client projects 2017 to 2026

05 Services

What I can do for you.

Six ways to work together. Most projects mix two or three.

Six ways to work together. Most projects mix two or three.

settings — services

6 panes

Product design sprint

2 weeks

Two weeks from a fuzzy idea to a prototype you can put in front of five users.

Sketches, clickable prototype, test notes

Website design and build

6 to 10 weeks

A complete site, designed and built in code with a CMS you can edit yourself.

Design, build, CMS setup, handover

Brand and identity

6 weeks

A name-safe mark, a colour and type system, and a short guide people will read.

Logo, palette, type, guideline booklet

Design system

8 to 16 weeks

Components, tokens and documentation your designers and developers share.

Component library, tokens, docs

Research and testing

3 weeks

Interviews and usability tests that tell you what to fix first.

Interview notes, findings, priority list

Monthly retainer

Monthly

A fixed number of days each month for the people who need design on call.

Reserved days, weekly check-in

6 services

Fixed quotes after a 30-minute call

06 Kind words

What clients say afterwards.

Six messages, lightly trimmed. Names and companies are fictional in this demo.

Six messages, lightly trimmed. Names and companies are fictional in this demo.

messages — kind words

6 messages

Wren rewrote our product pages around how people actually choose coffee. Our repeat orders went up and my inbox went quiet.

Priya Nandakumar

Fernhill Roasters

She sat in on our booking calls before drawing anything. That is why the flow works, and why our developers trusted it.

Tomas Berglund

Northbound Tours

Wren interviewed twenty-one stallholders in their slowest hour. Nobody else had asked them anything.

Aisha Mbeki

Quay Street Market

The site moves the way our buildings feel: slowly and in order. Clients mention it in the first meeting.

Daniel Kirkwood

Marlow & Finch Architects

She made the design system a shared project, not a handover. Engineers use it because they helped build it.

Hannah Osei

Tidepool Ocean Data

Enquiries got better overnight. People now arrive knowing the wood, the wait and roughly the cost.

Leo Marchetti

Oak & Ember Furniture

6 conversations

All replied to

07 Toolkit

The skills behind the work.

Eight things I do every week. Each one has a short note on how I actually use it.

Eight things I do every week. Each one has a short note on how I actually use it.

applications

8 items

Ui

Interface design

Layouts, type and colour that feel calm and obvious.

Daily

Pr

Prototyping

Clickable and coded prototypes you can test on a real phone.

Daily

{}

Front-end build

Components in code, from the first button to the last page.

Daily

Tk

Design tokens

One source for colour, type and spacing across design and code.

Weekly

A11

Accessibility

Contrast, focus order and screen reader checks in every project.

Every project

Mo

Motion

Transitions that explain, never decorate.

Weekly

Cm

CMS modelling

Content structures that a non-designer can edit safely.

Weekly

Ux

User testing

Five people, one afternoon, and a list of what to fix.

Monthly

8 skills

Used daily or weekly

09 Questions

Things people ask first.

help — common questions

6 topics

What does a project cost?

How long does a typical project take?

Can you work with our developers?

Do you take projects outside the UK?

Will I be able to edit the site myself?

Do you offer support after launch?

Not here? Ask me directly

10 Contact

Let’s make something useful.

Tell me a little about the project. I reply within one working day.

Tell me a little about the project. I reply within one working day.

mail — new message

to Wren

Free from 12 October

Reply time

Within one working day

Based in

Bristol, UK. Calls in your time zone

wren@desk ~ % open contact

Got a project? Say hello.

I reply to every message within one working day, usually sooner.

Now

Free from October

Bristol, UK

Reply within a day

Colophon

Set in Geist and Geist Mono

Built on Deskcase

Photos from Unsplash

© 2026 Wren Okafor · a demo portfolio

Every window on this desktop is editable in Framer

Create a free website with Framer, the website builder loved by startups, designers and agencies.