2026productRIVVI7 weeks

RIVVI — automotive social network redesign

A new interface concept and clickable PWA prototype for a Russian automotive social network that unifies feed, stories, classifieds, garage and deals into one product. Direction named Premium Automotive Editorial — premium auto magazine meets a modern social network.

social
hover.tracked
Surface

What users see. Identity, motion, UI craft, copy.

Ink (#050505), RIVVI orange (#FF6A1A) gradient into scarlet, Champagne (#E8C68A) for PRO, Chalk (#FAFAFA) text, Live (#23D27F) for online and price-up. Unbounded display (Cyrillic), Manrope body, JetBrains Mono for numbers with tabular-nums. Editorial post cards with chip-car and listing price burned right onto the image.

Editorial FeedVertical ReelsAI Photo SearchAuto-cockpit GarageVIN ScannerCompare 1v1
scripta://case/rivvi/architecture
Substrate

What holds it up. Architecture, contracts, infra, latency.

Next.js 14 App Router + Framer Motion for gesture and screen transitions. PWA — manifest, service worker, icons; installs to iPhone and Android home screens. The "Install" floating button with a bottom-sheet instruction for iOS Safari and Android Chrome. 13 interactive routes; 143 KB JS on the heaviest screen — launches instantly on 4G. Fully Russified: real-rouble prices, local marques, tabular-nums for numbers.

App RouterPWA InstallService WorkeriOS Bottom-sheetTabular Nums
Story

What was wrong before

Reels ran in a non-standard split layout — photo on top, author selfie below. Users expect full-screen vertical video and the split created a cognitive barrier. Catalogue: the search bar overlapped content. Garage greeted with an empty state and a lonely button; the value of the section wasn’t legible — it was unclear why a user should add a car. Profile showed "0 publications" instead of a reason to come back. Feed used generic post cards; the car photo and the classified price lived on different screens — that broke the path from inspiration to a deal. Menu was a flat list of 12 items without grouping or hierarchy. Add-a-car opened a bare VIN field with no explanation of what happens next.

From empty state to auto-cockpit

We turned the empty state into an auto-cockpit: portfolio value of all cars with month-over-month delta, a maintenance reminder, status tabs, cards with mileage, valuation and quick actions. Add-a-car got a VIN scanner with corner-frames and an animated scan line, manual entry as fallback, and a "what will happen next" checklist to dissolve the anxiety of the first step.

Gallery

Pieces of the product.

  • gradient
    Editorial feed · car chip + price on image01/06
  • mono
    Reels — full-screen vertical02/06
  • rings
    Catalogue · AI photo search03/06
  • scan
    Garage auto-cockpit · portfolio value04/06
  • mesh
    VIN scanner · corner-frames05/06
  • grid
    1v1 comparison · RIVVI verdict06/06
[ Results ]
13
interactive routes
143KB
JS heaviest screen
PWA
installs to home screen
9
core screens redesigned
[ Stack ]
Next.js 14TypeScriptTailwind CSSFramer MotionPWAService Worker
Next case

Mad Monkeys Events — children event agency platform