Concept · Carpool-matching platform · Accra, Ghana

Four cars, one route?
Make it one car.

Accra Commute Collective matches neighbours who drive the same corridor at the same hour — Achimota, Kaneshie, Madina — and pools them into one shared ride to town. Less traffic on the N1, more money in everyone’s pocket, and a carbon counter you can actually feel good about.

Join a corridor See how it works

Designed for a city of commuters — concept project, not a live service.

ACHIMOTA LAPAZ KANESHIE AWUDOME MADINA LEGON CIRCLE · PICKUP HUB ACCRA CENTRAL
  • AC-01 Achimota
  • AC-02 Kaneshie
  • AC-03 Madina
  • Shared trunk → Central
ROUTE MATH · 4 solo cars → 1 pooled car = ~3 fewer cars on the N1 every trip ONE POOLED SEAT ≈ 2.4 kg CO₂ kept out of the morning air per 12 km commute* SPLIT FOUR WAYS · fuel + tolls shared = the cheapest AC in Accra *modelled on an average petrol saloon · concept figures, not live data

How it works

Three stops between you and a half-empty road.

No timetables, no guesswork. The Collective works like the city already moves — along corridors, at rush hour, with people you come to know by name.

01 / PICK

Pick your corridor

Choose the line you already drive — AC-01 from Achimota, AC-02 from Kaneshie, AC-03 from Madina — and the window you leave in. That’s the whole sign-up.

02 / MATCH

Meet your pool

The matcher groups three or four verified commuters whose pins sit on the same line. One drives, everyone rides — and the driver’s seat rotates through the week.

03 / RIDE

Merge at the hub

Pools converge at pickup hubs like Circle Interchange, then ride the trunk into Central together. Costs split automatically; the app logs every kilometre you didn’t drive alone.

The app

One screen for every part of the shared ride.

Match, route, reward — the app stays out of your way and keeps the pool honest. Scroll and the phone keeps pace.

01 — Match

Co-riders you can vouch for

Every profile is verified with a Ghana Card check and rated by the people who actually rode with them. The matcher only proposes pools whose pickup pins add under six minutes to anyone’s ride.

  • ID-verified members only — no anonymous seats
  • Women-only pools on every corridor, every window
  • Same pool all week, or re-match daily — your call
02 — Route

A pickup you never have to chase

The app picks the hub that costs the pool the least total detour, pins it, and holds everyone to a five-minute window. Your driver’s dot moves on the same corridor map you saw above — no calls, no “where are you?”.

  • Live corridor map with your pool’s dot on it
  • Auto-split fares in cedis at the end of each week
  • Trip log shared with a contact you choose
03 — Rewards

Kilometres you didn’t drive, counted

Every pooled trip banks Corridor Points — redeemable with partner fuel stations and food spots along your line. The leaderboard below runs on the same numbers, corridor against corridor.

  • Points for riding, double points for driving
  • Personal CO₂ ledger, modelled per trip
  • Streak badges your pool earns together

Corridor league

Accra’s friendliest rivalry.

Every quarter the corridors race — most pooled kilometres per member wins the league and the bragging rights. A static look at the dashboard concept:

Rewards

The corridor pays you back.

Corridor Points aren’t imaginary internet confetti — they’re designed to be redeemed along the very roads you share.

Every trip

Points per pooled km

Ride and earn; drive and earn double. The week’s driver carries the pool, so the pool carries the driver’s points.

Along your line

Partner perks

Fuel discounts, free washes, waakye Wednesdays — partner spots sit on the corridors, so redeeming never means a detour.

Quarterly

League trophies

The winning corridor’s members split a season bonus, and the trophy lives at the hub kiosk until someone takes it from them.

Get the app

Your corridor is already leaving.

The Collective is a design concept — the store badges below are typographic mocks that lead to the designer’s portfolio, exactly as an honest concept should.

CONCEPT · WOULD SHIP ON THEApp Store CONCEPT · WOULD SHIP ONGoogle Play

Both badges visit the portfolio of the designer who drew every pixel of this page in code.

Join the corridor list

Interested in the concept — as a commuter, a city partner, or a client who wants product design like this? Leave a note; it lands with a real person.

Handled by Netlify Forms with a honeypot — no trackers, no spam, no live service behind it.

Design case study

Process — how this concept was designed

Concept project — adapted from a public RFQ. Frontend only; the app screens, dashboard and leaderboard shown are static UI demonstrations. Accra Commute Collective is a fictional organisation, and this site is not affiliated with any real carpool service, transport authority, or brand. No user counts are real.

The brief

Public RFQs for commuter-matching platforms keep circling the same problem: a city’s arterial roads carry thousands of nearly-empty cars along identical lines every morning. The original RFQ described a platform for a city of commuters — matching, trust, routing, incentives. This concept answers that brief for Accra, whose morning geometry is famously legible: Achimota, Kaneshie and Madina all funnel toward Central along corridors everyone already knows by heart.

The problem

Carpooling fails not on economics — splitting fuel four ways sells itself — but on trust and friction. Who is in the car? Where exactly is the pickup? Who pays whom, and when? Any design that leaves one of those questions to a WhatsApp thread has failed. So the page had to make three promises visible at a glance: verified people, a pickup you never chase, and money that settles itself.

Direction chosen — and what was rejected

The chosen direction is the route map as hero and brand: a dark, transit-diagram Accra where three corridor lines draw themselves in, car dots ride them, and — the whole thesis in one motion — three dots merge into a single pooled dot at Circle. Charcoal ground, mint as the shared-trunk colour, one route colour per corridor.

Two directions were rejected. A generic ride-hailing app template — white ground, floating phone renders, gradient blobs — was rejected because it says “another Uber” when the product is the opposite: neighbours, not strangers-for-hire. A photo-led lifestyle direction (smiling commuters, sunrise traffic) was impossible under the collection’s code-drawn constraint and, more honestly, would have needed stock photography that looks like nowhere in particular. The map direction turns the constraint into the identity: the product is the corridor, so the corridor is the brand.

Key decisions & trade-offs

  • The merge is choreographed, not looped. Independent CSS dot loops would never actually meet, and the meeting is the message. A small JS timeline moves three dots along their SVG paths so they genuinely arrive together, pulse the hub, and continue as one — carpooling, performed by the map.
  • Honest mocks, honest numbers. Every dashboard carries a “concept UI” watermark; every figure is either arithmetic (4 cars → 1) or explicitly modelled (CO₂ per pooled seat). No invented user counts anywhere on the page.
  • Sticky phone over carousel. Feature copy scrolls; the phone stays pinned and swaps screens in step. A carousel hides two-thirds of the product; the sticky mock keeps the whole story on screen and gives keyboard users dot-buttons for direct control.
  • Single dark theme. Route colours need a stable ground to keep their meaning; the charcoal commits to it. All text pairs were checked against WCAG AA — fog on charcoal is 13.9:1, the dim fog used for secondary text is 8.4:1.

Intended impact — framed as design goals

  • A first-time visitor understands the merge-at-the-hub idea from the hero animation alone, before reading a word.
  • The three trust questions — who, where, how much — are each answered by a named UI element visible in the phone mock.
  • A screen-reader user gets the same story: the map, phone and dashboard all carry narrative alt text, not “image”.
  • The page demonstrates, for real clients, that a product story can be told entirely in code-drawn UI — no renders, no stock.

Teaching artifact

Guide — how this site was built

Part of a 26-site collection designed and built by Hannah Kwakye, engineered with Fable 5. Hand-authored static HTML, CSS and vanilla JS — no frameworks, no build step, no external requests. Every visual is code-drawn: the Accra map, the phone, the dashboard, the store badges, the icons. Two font families, three self-hosted woff2 files, deployed on Netlify.

Toolchain & type

Outfit (300–700 variable, one file) carries all display and body text — a geometric sans with enough warmth to keep the dark theme friendly. Space Mono (regular + bold) does what monospace does best on a transit page: route labels, times, plate numbers, tickers, table numerals. Sizes are fluid clamp() steps from a 1.1rem body to a 5.6rem hero. The palette is the brief’s: charcoal #1B1D1F, mint #7DF0C4, corridor amber/blue/rose, fog #EFF2F1.

ColourRole
#1B1D1F charcoalGround — the night road
#7DF0C4 mintThe shared ride: trunk line, CTAs, focus rings
#F5A93F / #5B9BF0 / #F2688AOne colour per corridor — AC-01 / 02 / 03, consistent from map to table
#EFF2F1 fogText — 13.9:1 on charcoal

Signature: the merge, explained

The hero map is one inline SVG. The three corridors and the trunk are plain <path> elements that draw themselves with the stroke-dash trick — stroke-dasharray: 900; stroke-dashoffset: 900 animated to zero. The car dots are the part worth stealing: each corridor path is sampled with getPointAtLength() inside one requestAnimationFrame timeline. The loop runs a seven-second cycle: for the first stretch each feeder dot eases (cubic ease-in-out) from 0 to its path’s full length — three different roads, one shared arrival time — then the hub node rings outward, the feeder dots fade, and a single larger mint dot (three passenger dots drawn inside it) runs the trunk to Accra Central. The choreography is the product pitch. The loop pauses via IntersectionObserver when the map leaves the viewport and via the Page Visibility API when the tab hides; under prefers-reduced-motion the routes render pre-drawn and the dots sit statically mid-corridor, pooled dot on the trunk — the story still legible as a still.

The sticky phone

The phone is CSS — an aspect-ratio box, border-radius, a notch pseudo-element — holding three absolutely-stacked “screens” of ordinary HTML. position: sticky pins it beside the scrolling feature copy; an IntersectionObserver watches which feature block crosses the viewport’s middle band and cross-fades the matching screen. Three dot-buttons under the phone give direct, keyboard-reachable control of the same state, and double as the mobile affordance.

Code-drawn assets

The map’s street grid is seven low-opacity Bézier strokes; the Gulf of Guinea is one filled path with a lighter shoreline stroke. The dashboard, leaderboard and app screens are semantic HTML styled to look like UI — which means the leaderboard is a real <table> a screen reader can walk. Store badges are typographic buttons with hand-drawn SVG marks, honestly labelled “concept” and routed to the portfolio hub.

Iteration log

  • Pass 1 — critique

    • Map labels rendered at 8.5px and collided with the strokes — the hub caption sat right on the rose line. Enlarged to 10.5px, gave every label a charcoal halo (paint-order: stroke) and repositioned all eight around their routes.
    • The mobile header overflowed: the full wordmark wrapped to two lines and the CTA clipped off-canvas. Below 620px the logo now abbreviates to “ACC.” and the button to “Join”.
    • Screenshot review caught the form’s success note showing without ?success — its display: flex was beating the hidden attribute. Added a global [hidden] override; attribute semantics win again.
    • The rewards app screen overflowed the phone frame on desktop; trimmed its stat grid to two tiles and redrew the emoji streak badges as stroke SVGs — the everything-code-drawn rule applies inside the phone too.

  • Pass 2 — elevation

    • Deepened the merge moment: the pooled dot now carries a riding ×3 POOL mono tag, and the trunk sits on a soft mint glow underlay that fades in as the line finishes drawing — the shared ride reads as the highlighted line.
    • Gave the leaderboard an 8-week sparkline per corridor, each stroked in its route colour with a narrative aria-label instead of a decorative shrug.
    • Rechecked the emissions ticker copy and moved the modelling disclaimer into the marquee itself, so the honesty travels with the numbers.

  • Pass 3 — ship

    • Walked every interaction headless: ?success shows the form panel (plain loads hide it), the phone swaps screens from both scroll and dot-buttons, both stub routes land on their anchors, zero broken in-page links, zero horizontal scroll at 390px.
    • Measured all three app screens inside the phone frame — zero overflow pixels at every breakpoint after the Pass 1 trim.
    • Reduced-motion re-verified as a designed still: routes pre-drawn, one dot parked mid-corridor per line, the pooled ×3 dot resting on the trunk.
    • First view totals ≈148 KB including all three fonts — well inside the collection’s 250 KB budget. Zero console errors at 390 / 834 / 1440px.

Deploy

Netlify, straight from the repository: publish = ".", immutable cache headers on /assets/*, security headers on everything. The /guide and /process routes exist as tiny redirect stubs pointing at these anchored sections, so the collection’s route contract holds on every site.