All work

Issue #003 Divvyroo

A money app that feels like the group chat. 100 on Lighthouse desktop, 70 KB gzipped.

Concept project · Launch Site · 2026

See it live
The Divvyroo home page: the headline Your group chat just got a wallet. beside a phone showing a trip pouch 78% of the way to its £1,600 goal, the group chat it came from, and the kangaroo mascot leaning on the phone. (full size, opens in a new tab)
The Divvyroo home page on a phone: the headline, the pitch, a full-width Join the waitlist button with a link to try splitting a bill under it, a slice of the group chat and the top of the app mockup. (full size, opens in a new tab)

The problem

Divvyroo is a startup I made up. The sites I was reacting to are real enough: group-money apps whose homepages look signed off by a bank's compliance team. Navy, a stock photo of four people laughing at a laptop, and a headline like "Revolutionizing collaborative financial management", which nobody in a group chat has ever typed. The one I kept coming back to had four buttons in the hero and none of them showed the app.

So I set myself a brief: make sharing money feel as easy as the group chat, and still look safe enough to hand your rent to.

The cast

The buyers
Friends who share money: a trip to Lisbon, a house, Friday's bill.
The gang
Ciara, Dev, Jonah and Priya, from the group chat on the first screen.
The mascot
A kangaroo, because a pouch is the product.
The villain
Dev, who'll pay in on Friday, when he gets paid.

The plan

  1. Put the app in the hero. The phone is HTML and CSS: Priya's £150 lands, the ring moves to 78%, and the group chat it came from sits beside it.
  2. Let people split a real bill. Friday's £86.40 splits to the penny, and switching to By item takes Priya off the wine.
  3. Orange, and a kangaroo. A pouch is the product, so the mascot has one. The safety section is where the jokes stop.

The build

It's one hand-written page: HTML, CSS and 33 KB of JavaScript, with no framework. The phones, the card and the roo are CSS and inline SVG, so the only image file is the favicon.

The Divvyroo hero on desktop: the headline Your group chat just got a wallet., a short pitch, a Join the waitlist button and an or try splitting a bill link. On the right, a phone shows the Lisbon, baby trip pouch at £1,240 of a £1,600 goal in a tangerine progress ring, with Priya's £150 at the top of the activity feed. Beside it sits a slice of the group chat: Ciara shares the pouch link, Dev says he'll pay on Friday, and Divvyroo posts that Priya chipped in. The kangaroo mascot leans on the phone with a paw on its edge. (full size, opens in a new tab)
The first screen: the promise, then the app already doing it. The chat fills in, Priya's £150 lands and the ring moves from 68% to 78%.
The Divvyroo home page on a 390 pixel wide phone: the headline, the pitch, a full-width Join the waitlist button, an or try splitting a bill link, the group chat slice and the top of the phone mockup. (full size, opens in a new tab)
Phone first: the group chat above the fold, the app below.

Every phone screen is live HTML sized off its own width with container query units, so one mockup stays sharp from a 360 px phone to a big desktop. The progress ring fills with two rotating half discs: transform only, no canvas, no images.

How it works on a peach panel: a phone showing the Chip in screen with £150 typed on a keypad and progress bars for four friends, beside four numbered steps with Everyone chips in highlighted, and previous, next and dot controls under the phone. (full size, opens in a new tab)
A real carousel. Swipe it, arrow-key it or pick a step. Screen readers hear which screen they're on.

The math runs in whole pence. An uneven split hands out the odd pennies one at a time, and service is shared out so the rounding always lands on the total. Try £100 between four: with 12.5% service that's £112.50, so Ciara and Jonah pay 1p more, £28.13 against £28.12.

The bill splitter, split by item: four friends as chips, the bill of £86.40, and items like Bacalhau à Brás and grilled sardines with initials toggled for who had them. On the right a dark card for Tasca Lusa, Stockwell shows the cheering kangaroo with a full pouch, £97.20 in the pouch, one bar split into each friend's color, shares from £30.05 down to £18.79 with ticks, the service charge, the total and the message All square. (full size, opens in a new tab)
Split by item and settled. Each share drops into the pouch as a coin in that friend's color, and the shares add up to the total.

The roo is one SVG body with swappable arms and faces, a back ear that flicks and eyes that blink: six poses from 6 KB of drawing. It stands in three-quarter view with a long muzzle, a tail to lean on and a pouch with a receipt and a pound coin in it, so it still reads as a kangaroo at 44 pixels.

The Divvyroo kangaroo in six poses on the page's own colors: waving, leaning on the phone, in sunglasses with a cream die-cut edge on a tangerine tile, cheering with both arms up, pleased on a plum tile, and resting. Each stands in three-quarter view with a long muzzle, two leaf ears, long hind feet, a thick tail on the ground and a pouch holding a receipt and a pound coin. Beside them, the roo head mark in profile on white, plum and tangerine, and at 32 and 16 pixels. (full size, opens in a new tab)
On the tangerine cards it gets a die-cut sticker edge, so the brand color never swallows the mascot. The mark is the head in profile, because a silhouette still reads at 16 px.
Uses, each drawn as a different object: a tangerine Trips card with the kangaroo in sunglasses and a straight feed of Lisbon spends, from the £480 villa deposit to a €22.00 round at 01:12; below it, the tops of a mint Shared house card and a pink card holding Friday's receipt from Tasca Lusa. (full size, opens in a new tab)
A spend feed, a monthly statement and a torn-off receipt: three uses, three different objects.
The dark safety section: the headline Nobody spends the pot without the group seeing, a short pitch and a Pouch rules panel. Each rule shows what it does: Jonah's £480 villa deposit waiting for a second yes with Not yet and Approve buttons, a frozen card marked Frozen by Priya at 02:14, and £212.40 going back to Dev when he moved out. (full size, opens in a new tab)
Safety gets the dark background and the straightest copy on the page. The approval works: press Approve and the pouch pays.
  • Plum#1E1030Text, the dark sections and every button you should press
  • Oat#FFF7ECThe page
  • Tangerine#FF6B2BThe roo, the card, the pouch
  • Peach#FFE0CCThe tour, and Divvyroo's own messages
  • Mint#35D99AMoney in, all square
Lighthouse performance, desktop
100
Lighthouse performance, mobile
99
Whole page, gzipped, fonts included
70 KB
JavaScript, no framework
33 KB
Lighthouse 13, three runs each, plain server, no compression. Accessibility and best practices: 100. With gzip, mobile scores 100 too.

Go poke around

  • Split Friday's £86.40 by item, and take Priya off the wine.
  • Swipe or arrow-key through how it works.
  • Press Approve on Jonah's £480 villa deposit.
See Divvyroo live

heyim.london/demos/divvyroo/

Before / after

From "Revolutionizing the way groups manage shared finances" to "Your group chat just got a wallet." The old hero had four buttons and no product. The new one has one button and the app.

Before
The made-up old Divvyroo site: a blue fintech template with an eight-item menu, the headline Revolutionizing The Way Groups Manage Shared Finances, four buttons, a blurry stock photo of four people at a laptop, a row of LOGO placeholders, a chat bubble and a cookie banner. (full size, opens in a new tab)
After
The new Divvyroo home page: Your group chat just got a wallet. beside a phone showing the Lisbon, baby trip pouch 78% full, the group chat it came from, and the kangaroo leaning on the phone. (full size, opens in a new tab)

From the top

Issue #001 Emberlith

Plant managers can price their own switch off gas, then check the machine on a datasheet drawn to scale.

Read the case study

The Emberlith home page on desktop: the headline Store the sun in brick. Burn nothing. beside a live section through a brick heat store, with white-hot heating rods, a temperature profile and a readout underneath showing 14:30, charging on solar with steam on, 82% stored.
The Emberlith home page on a phone: the headline, a short pitch and two full-width buttons, Book a site assessment and See how it works, with the top of the brick core and its heating rods already in view below them.

Your startup, next issue?

Send a brief. I reply within 24 hours with a plan and a price.

Start a project
All work