All work

Issue #002 Lullops

A 3am outage, fixed on the first screen. Lighthouse 100 on desktop, 32 KB of JavaScript.

Concept project · Full Site · 2026

See it live
The Lullops home page in its dark theme: the headline Sleep through the night beside a short pitch, and below it a product window replaying a 3am incident with the bad deploy outlined in red. (full size, opens in a new tab)
The Lullops home page on a phone: the headline, the pitch, two buttons and the top of the incident replay, with the bad deploy flagged in red. (full size, opens in a new tab)

The problem

The brief I set myself: a launch site for Lullops, an AI on-call engineer, sold to startup CTOs.

Incident tools tend to launch the same way: a purple announcement bar with a NEW badge, "Intelligent Incident Management" in gradient text, a row of placeholder logos, and the product three scrolls down, if it shows up at all.

The person buying has been paged at 3am. I wanted the first screen to show a 3am outage getting fixed before they read any pitch.

The cast

The buyer
A startup CTO who has been paged at 3am, and reads permission screens.
On call
Priya, who sleeps through five alerts on the home page's sleep chart.
The hero
Lullops, which reads the logs, rolls back the deploy and drafts the postmortem.
The villain
Deploy #4471, which broke checkout at 03:10.

The plan

  1. A replay instead of a hero image. A real app window replays a 3am incident, from the alert to the fix. It ends on "You slept through it."
  2. Dark blue, pale yellow and a sleep chart. Deep ink blue with one brand accent, moonlight yellow, and status colors only inside the product. The proof section is a sleep chart.
  3. The permissions screen on the home page. CTOs read permission screens, so the site shows one, the audit log behind it, and exactly when it wakes a person.
  4. Where a template puts filler, the product. No logo wall, icon grid or testimonials. The same incident runs through the whole page: its route through the tools, its audit log, and the postmortem Lullops drafted before standup.

The build

Two pages of hand-written HTML and CSS, and 32 KB of plain JavaScript.

The Lullops home page in its dark theme. The headline Sleep through the night sits beside a short pitch and two buttons, a crescent moon rises behind the corner of a product window, and the window shows an incident at 03:13 with the suspect deploy #4471 outlined in red above a trace of a failing request. (full size, opens in a new tab)
The first screen: the pitch, then the product already at work.
The Lullops home page on a phone: the headline, the pitch, the Start a free trial and See pricing buttons, and the top of the incident window, where deploy #4471, Use the new currency helper in formatPrice, is flagged in red. (full size, opens in a new tab)
On a phone, the replay starts above the fold.

The replay runs on one clock. Every log line, chart and status has a timestamp, so scrubbing just sets the time. The error spike draws itself as the rate counts up, the logs scroll past while 2,418 lines are read, then everything but the errors dims.

It pauses off screen and in background tabs. With reduced motion it opens on the finished night, and the timeline is one click away as text. On a phone the window is rebuilt for the width rather than shrunk: the steps become a row of marks under the stage, and long lines wrap the way an editor wraps them.

Four frames of the incident replay, each captioned with its time. At 03:12:04 the alert card shows checkout failing 14.2% with a red spike. At 03:12:38 deploy #4471 is outlined in red above a trace that stops in formatPrice. At 03:13:52 the rollback card shows errors falling to 0.3%. At 03:14:06 the summary in the incidents channel ends on a banner that says You slept through it. (full size, opens in a new tab)
Four moments from the replay. The real one runs the two minutes in 23 seconds.

The proof is a sleep chart of the on-call engineer's night. Flip the switch and the same five alerts are drawn again without Lullops, with the time she spent awake shaded in.

The Last night chart in the light theme, switched to Without: woken 5 times, 2 h 24 min awake and 1 h 22 min of deep sleep, a red stepped sleep line from 23:00 to 07:00 with five red alert pins and shaded bands where the engineer was awake, and below it a log of the five alerts saying how she handled each one. (full size, opens in a new tab)
The same five alerts without Lullops: 2 h 24 min awake.

Cmd+K jumps to any section, replays the incident or switches the theme. It's a proper combobox: arrow keys, Enter and Escape work, and focus goes back where it came from. The theme follows your system until you pick one, and it's set before the first paint.

The command palette open over the light theme, filtered by re: actions to replay the 3:12 incident and start a free trial, jump links to the incident replay and the changelog, the compare plans page and the case study. (full size, opens in a new tab)
Typing "re" finds the replay, the changelog and this case study.

Pricing is a price list rather than three cards. Drag the slider and every plan shows its monthly price and what it costs per night. A screen reader hears the new prices once, after you let go of the slider.

The Lullops pricing page in the light theme: the headline Cheaper than one bad night, a readout of $9.86 a night, a monthly or annual switch set to annual, a slider at 10 services, and a price list of three plans, Starter at $150, Team at $300 marked as the plan in the replay, and Scale at $500 a month, each with its price per night. (full size, opens in a new tab)
At 10 services on annual billing, Team comes to $9.86 a night.
  • Night#090C20Dark theme background
  • Dawn#F4F2ECLight theme, with Ink #0D1130 text
  • Moonlight#F4D27EThe brand accent; #7A5300 by day
  • Alarm#FF9494Errors, in the product at night
  • Mended#79E2B4Recovered, in the product at night
Lighthouse performance, desktop
100
Accessibility and best practices
100
Whole home page, gzipped
87 KB
JavaScript, no framework
32 KB
Measured with Lighthouse 13 on a local static server, at least two runs each. On mobile it scores 99 served uncompressed and 100 with gzip, with a 1.5 s LCP on throttled 4G. Zero layout shift. SEO hits 100 once the concept's noindex tag comes off. The fonts are cut to the 140 or so glyphs the site uses: 39 KB, down from 68 KB.

Go poke around

  • Press Cmd+K (Ctrl+K on Windows) and type "re".
  • Flip last night's sleep chart to Without.
  • Drag the slider on the pricing page.
See Lullops live

heyim.london/demos/lullops/

Before / after

From "the future of intelligent incident management" to a 3am outage fixed on the first screen.

Before
The made-up old Lullops site, a template I mocked up to stand for the category: a purple announcement bar with a NEW badge, a nine-item menu with three buttons, an AI-Powered AIOps Platform pill, the headline The Future of Intelligent Incident Management is Here in gradient text, three more buttons, a flat illustration of a person at a laptop, a row of placeholder logos, a cookie banner and a chat bubble. (full size, opens in a new tab)
After
The new Lullops home page: Sleep through the night, one main button, and the product window finding the bad deploy. (full size, opens in a new tab)

Next issue

Issue #003 Divvyroo

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

Read the case study

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.
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.

Your startup, next issue?

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

Start a project
All work