Building a New Content-Discovery Feature for kumparan's Product Ecosystem
An end-to-end content-curation feature, from the Magnetic CMS mechanism to the front-end discovery experience.
Overview
"Collection" was proposed as a new feature across kumparan's platforms, mobile site, app, and desktop, with a supporting mechanism built into kumparan's internal CMS, Magnetic. The feature needed to let editors package curated content (special coverage, story series, themed collections) in a way the existing topic and timeline structures couldn't support, and needed to be designed as a system that worked on both the content-management side and the reader-facing side. I led this from initial mapping through to a validated, testable prototype, starting with mobile site as the first platform.
The Problem
kumparan had recurring content that deserved to be packaged and surfaced together, special coverage, story series, and other curated collections, but the existing structure offered no dedicated way to do this. Valuable content risked getting lost in the regular timeline instead of building a cohesive reading experience, weakening both engagement and content literacy for the topics that mattered most.
The Solution
I followed a structured five-stage process end to end:
- Mapping scoping what "collection" could realistically cover (special coverage, story series, and future collection types), and defining how the feature would connect between Magnetic (CMS) and the front-end.
- Sketching low-fidelity wireframes for both the Magnetic (CMS) side and the front-end UI, establishing content placement and information architecture before visual design.
- Deciding evaluating multiple UI directions with the team (including several card-layout variations for the collection home) and converging on an approved direction for both the front-end and the Magnetic CMS experience.
- Prototyping building interactive prototypes (InVision, plus live dev prototypes) covering both the Magnetic collection-management flow and the mobile site's collection experience.
- Testing validating the concept and the high-fidelity prototype directly with prospective users before moving toward wider rollout.
On the CMS side, the design let editors create a parent "collection title," with nested sub-collections underneath it, giving them flexible control over how stories were grouped and curated.
Flow alternatives explored during Mapping
User flow alternative 1:
User flow alternative 2:
User flow alternative 3:
Magnetic (CMS) flow mechanism
Flow mechanism 1:
Flow mechanism 2:
Flow mechanism 3
Sketching: low-fidelity wireframes and hi-fidelity
Front-end UI, version 1 and alt 2:
Front-end UI, collection list page:
Magnetic (CMS) collection wireframe:
Deciding: UI directions explored
Collection card home, variation 1:
Collection card home, variation 2:
Collection card home, variation 3:
Deciding: final approved UI
Approved front-end UI (1 of 3):
Approved front-end UI (2 of 3):
Approved front-end UI (3 of 3):
Approved Magnetic (CMS) UI:
A Two-Sided System:
This wasn't just a front-end feature, it required designing two connected experiences: the content-management mechanism inside Magnetic (how editors create, structure, and populate a collection) and the reader-facing interface (how a collection is discovered and browsed). Designing both sides together, rather than the UI in isolation, was what made the feature usable end-to-end rather than just visually complete.
Like what you see?
I'm always excited to collaborate with teams and individuals who value thoughtful, user-centered design. If you're hiring, or have a project in mind, let's talk.
Get in Touch