Website

DeLys Hoops — Basketball Media

"Basketball beyond the score — a sports magazine that reads like a notebook, not a ticker."

An editorial basketball publication — news, long reads, original films and personal notes from the courts that shape the sport — paired with a custom Studio where one editor writes, schedules, scores games and sends push alerts without touching code.

Role: UX/UI DesignerIn ProgressEditorialSports MediaCMS

Home

View full page

Home

OVERVIEW

Problem

Basketball media is built for the score, not the story. There is no warm, editorial home for long reads, original films and personal observations — and generic CMS back offices make a one-person newsroom slow and error-prone.

Goal

Design and build a basketball publication with a distinct editorial voice, fast on phones and found on Google, plus a Studio that lets a single editor run every section, from breaking news to paid films, without a developer.

Outcome

An MVP live on Next.js 16 + Payload 3: Home, News with search and categories, articles with numbered chapters and score cards, Originals, Hoops Muse, Stories, My Notebook, About, Subscribe and Contact — and a custom Studio covering posts, scores, films, push alerts, newsletter and subscribers.

PROBLEM & STRATEGY

Problem

Basketball coverage is a race for the score: wire copy, stat tables and clickbait galleries. The stories that make people love the game — the player who came home, the city behind a club, the women of the sport — have nowhere to live. DeLys wanted an independent publication, run by one person and easy to post to from a phone between games.

UX Challenge

Two audiences with opposite needs. Readers want something that feels warm and worth slowing down for, on a phone, without the noise of a sports portal. The editor is a single person: the back office has to make a news post, a game result, a film or a push alert feel as easy as writing in a notebook — and impossible to publish half-finished.

Strategy

I designed an editorial "paper and night" system: Soft Amber paper (#FFF1DA) for reading, near-black night (#12120E) for films and drama, and one basketball orange carried all the way into the buttons, which are literally leather balls with seams and pebbles. Cormorant Garamond display with an italic orange emphasis, over Manrope for UI. Every section gets its own voice inside the same system — a hand-written notebook, a fiery Hoops Muse, a cinematic Originals page. The Studio replaces the default CMS admin with a custom workspace in the same language: dashboard, posts, scores, films, push alerts and newsletter.

Outcome

A Next.js + Payload CMS site with 12+ public page types, structured data for Google News, RSS, PWA install and web push, and a Studio where DeLys writes, previews on any device, schedules and publishes without a developer. Every text pairing in the token set is verified WCAG 2.2 AA by a contrast checker that runs against the tokens.

KEY METRICS

12+

public page types, each with its own editorial voice

43/43

token contrast pairs pass WCAG 2.2 AA

custom Studio replacing the stock CMS admin

push alerts a week at most — a promise made at opt-in

TARGET USERS

Reader

A basketball fan who follows European and NBA basketball, mostly on a phone. Wants the story behind the result, a reason to come back, and alerts only when it matters — not a feed of noise.

DeLys — Editor in chief

Founder and only full-time writer. Posts between games, often from a phone. Needs drafts, previews, scheduling and game scores that are quick to make and hard to get wrong.

DESIGNED PAGES

UI DIRECTION

DESIGN PRINCIPLES

Paper and night — Soft Amber for reading, near-black for films and drama, nothing cold or grey
One orange, many jobs — basketball orange for accents, buttons and the italic emphasis in every headline
The ball is the button — primary actions are leather basketballs with seams, sheen and pebbled grain
Serif story, sans interface — Cormorant Garamond display over Manrope UI
Italic emphasis in orange — the editor marks it with *stars* in the title, the design does the rest
Every section has a voice — notebook paper, fiery Muse, cinematic Originals — inside one token set
Numbered chapters — every Heading 2 in an article becomes 01, 02, 03 for long-read rhythm
Contrast is checked, not eyeballed — text only uses token pairs the checker verified
The Studio speaks the same language — the back office uses the site's own type and paper
Hard to publish half-finished — previews everywhere, alt text required, a ready-to-publish checklist

Colour palette

Paper

#FFF1DASoft Amber

#FFFAF0Raised

#FFF6E5Studio Surface

#FBE3BDPaper 300

Night

#12120ENight 950

#1A1914Night 900

#26241DNight 800

#A8A6A0Stone 300

Basketball Orange

#E3641AOrange 400

#C24F17Orange 500

#B84A14Ball

#8F3A12Orange 600

#FCD9AETag Fill

TYPOGRAPHY & TECHNICAL SPECS

Hoops

Display / Headlines · Serif

Cormorant Garamond

500 Medium500 Italic

Headlines, section titles and the italic orange emphasis in every title

Hero48–72 / fluid clamp

H132 / 500

EmphasisItalic, orange accent

UI / Body · Sans-Serif

Manrope

400 Regular500 Medium600 SemiBold700 Bold

Body copy, labels, navigation, buttons and the whole Studio interface

Body16 / 400

Small14 / 400

Label12 / uppercase / tracked

Floor12px — no text below

Stack

Next.js

Next.js 16 + Payload CMS 3

Postgres in production · SQLite locally · Vercel Blob media · Resend email · Sentry

Reach

SEO

Built for Google News

NewsArticle JSON-LD · Open Graph · canonical · sitemap · RSS · ISR

Engage

PWA

Install + web push

Service worker · push alerts capped at 3/week · newsletter sign-up

Quality

43/43

Contrast pairs, AA

Token contrast checker · Vitest + Playwright e2e · Semgrep, gitleaks, npm audit in CI

FINAL SCREENS

SITE & STUDIO

DeLys Hoops is a publication and the newsroom behind it — one reading experience with many section voices, and a Studio that lets a single editor keep it alive.

Editorial Site

Home, News, articles with numbered chapters, Originals, Hoops Muse, Stories and My Notebook — each section with its own mood, all on one paper-and-night system. NewsArticle JSON-LD, RSS and sitemap so Google News finds every story.

Mobile First

Most readers arrive from a phone, often from a push alert. Big serif headlines, one-thumb section chips, installable as an app and alerts capped at three a week — the promise made at opt-in.

The Studio

A custom back office in the site's own language: a dashboard of readers and drafts, posts with live previews and scheduling, one-form game scores, films and series, push alerts with a lock-screen preview, newsletter and subscribers.

DESIGN PROCESS

Discover

User interviews
Competitor audit
Problem framing

Define

Personas
User flows
Information architecture

Design

Wireframes
Visual design
Prototype

Validate

Usability testing
Iteration
Handoff

RESEARCH INSIGHTS

Key findings

Score first

mainstream basketball sites lead with results and stat tables; the human story is an afterthought, if it exists at all.

Phone, in the stands

the editor posts between games and on the move, so every Studio task had to work quickly and safely on a phone.

Alert fatigue

sports apps push constantly; capping alerts at three a week and saying so at opt-in turns them into something readers keep on.

User voices

"I don't need another app telling me the score. I want to know who these people are and why that game mattered."

Reader, 31

"I write in the stands, on my phone. If publishing takes ten steps, I'll never post on time."

DeLys — founder and editor

LEARNINGS & NEXT STEPS

Key takeaways

A strong single accent lets each section change mood without the brand falling apart
Designing the editor's workflow is as much UX as the reader's — the Studio decides how good the site stays
Putting contrast rules in the tokens, with a checker, kept accessibility intact through dozens of late design changes

Next steps

Paid Originals — Stripe checkout and signed, buyer-only film playback
Usability sessions with readers on the article and Originals flows
Newsletter issue builder inside the Studio
Follow a team — personalised push alerts beyond "Everyone"

IMPACT & SUCCESS METRICS

An MVP built to grow a loyal readership — these are the targets the site and Studio were designed to move.

Time to Publish

< 5 min

From a new post in the Studio to live on the site, photo and preview included

Read Depth

≥ 60%

Readers who reach the second chapter of an article

Push Opt-in Kept

≥ 80%

Subscribers still opted in after a month, thanks to the 3-a-week cap

Editor Autonomy

100%

Posts, scores, films, alerts and pages managed without a developer

ACCESSIBILITY AUDIT

Accessibility lives in the tokens: text may only use colour pairs listed in the contrast checker, which verifies all 43 of them against WCAG 2.2 AA — including the orange buttons and glass buttons over photos.

Contrast ratios

Ink on Soft Amber paper

#12120E on #FFF1DA

16.9:1

AAA

Muted text on paper

#4F4A43 on #FFF1DA

7.9:1

AAA

Accent text on paper

#8F3A12 on #FFF1DA

6.8:1

Orange text on night

#E3641A on #12120E

5.5:1

White on basketball button

#FFFFFF on #B84A14

5.2:1

Accessibility checklist

All 43 token text pairs pass WCAG 2.2 AA, checked by script

Visible focus rings tuned per surface (paper, night, orange)

No text below 12px; display-faint colour never used for body copy

Alt text required before a post can be published

Reduced-motion support for hero and scroll animations

Screen-reader pass across article and Studio flows

A full screen-reader pass of the article and Studio flows is the next accessibility milestone.

DESIGNER'S REFLECTION

"DeLys Hoops was about giving a sport known for numbers a voice that slows you down. The hardest part was letting every section feel different — a notebook, a fire, a cinema — without it turning into five websites. One orange and one paper colour carried all of it.

The Studio taught me that the back office is part of the product. If it's slow or scary, the site goes quiet. Designing it in the same language as the site, with previews everywhere, is what makes a one-person newsroom actually work."

— Raluca Indrecan, UX/UI Designer

What I'd do differently

Design the editor's workflow with the same care as the reader's

Put accessibility rules in the tokens, not in a review at the end

Let sections change mood inside one strict system

Test the article and Originals flows with real readers next

Want to discuss this project?

Get in touch

All projects