← Back to case studies UI Case Study · Independent Practice

The Social Worth

A typography-first UI design for a global reader/writer blogging community — where the entire design brief was making dense written content genuinely comfortable to read.

RoleSolo UI designer ScopeUI only — UX research & structure pre-defined FocusTypography · information hierarchy · responsive layout

The brief

The Social Worth needed a landing and article experience built specifically around reading comfort — the brand and UX structure were already defined, so the task was purely UI: make a content-heavy platform feel effortless to scan and read, for a global audience with no single shared visual convention.

Starting from how people actually read

Nobody reads a webpage top to bottom on first arrival — they scan for something worth stopping for. That single fact shaped every decision that followed: what metadata needed to be visible before a click (cover image, title, short preview, author, category, ratings), and what could wait until someone was already committed to reading (full body copy, tags, comments, social sharing).

A typography system built for scanning and reading

I chose a strict black-and-white palette specifically to remove any colour-based distraction from the reading experience — letting typographic hierarchy carry the entire design. Every decision fed directly into readability:

  • Type hierarchy — clear differentiation between headings, subheadings and body text, so the structure of a page is visible before you've read a word of it.
  • Line height & paragraph spacing — tuned specifically to make long-form reading less fatiguing, with each paragraph visually distinct.
  • White space — used deliberately, not decoratively, to keep dense written content scannable.
Heading one Heading two — subheading Top writer Trending today Read more

Black-and-white type hierarchy on light backgrounds; inverted dark panels for trending/featured content sections.

Designing for a global, multilingual audience

The platform's UX included an AI-based language translation feature, letting readers translate any article into their language of choice — a detail I kept front of mind throughout the UI work, since a typography system built for one language and reading direction can quietly break for another. Keeping the visual hierarchy driven by contrast, spacing and weight (rather than, say, decorative script fonts) made the design naturally more portable across languages.

A floating access panel

The platform bundled several unique features — dictionary lookup, community connections, a writer's dashboard — that needed to stay reachable without competing with the reading experience itself. I designed a floating icon panel in high-contrast black-and-white, positioned for quick access from anywhere on the page, so utility features never had to interrupt the act of reading.

Reflection

This project is the clearest evidence in my portfolio of pure visual-craft thinking — no persona work, no journey mapping, just the discipline of making typography, spacing and contrast do all the work. It's a useful contrast to my more process-heavy case studies: proof that I can operate equally well when the job is "make this beautiful and legible" rather than "figure out what to build."

Want the full research, wireframes, storyboards and prototype video for this project?

← Local Grub Next: Visual & Brand Identity →