Constellations of Progress is an interactive digital experience built around the idea of progress, transformation, and connected milestones.
The concept uses the visual metaphor of constellations—individual points that become meaningful when connected—to represent how separate developments, ideas, or achievements can form a larger picture.
The project takes an experimental, visual approach rather than following a conventional informational website structure.
Its subject matter is connected to digital transformation and the idea of navigating a complex journey through different stages of development.
The broader concept of “constellations of progress” has also been used to describe how organisations can use maturity assessments to understand their current position, identify gaps, and create a roadmap for incremental improvement.
From a UI/UX perspective, the project is useful as a reference for interactive storytelling, data visualisation, visual metaphors, experimental web design, motion, and immersive presentation.
The constellation concept provides an interesting way to organise complex information and communicate relationships between different points or stages.
Methodology
How Constellations of Progress Works
At first glance, Constellations of Progress feels like an interactive universe of stories. Behind the visuals is a simple idea: take 365 stories from the Beautiful News archive and explore them through two things we can easily relate to—what they’re about and where they take place.
The experience uses the archive’s existing metadata to turn those stories into an interactive visual map, with each story becoming part of a larger constellation.
The Content
All of the stories and original graphics come from Beautiful News, a project by Information is Beautiful. Constellations of Progress builds a new experience around that existing archive, adding its own data structure, interface, interactions, and WebGL visualization.
365 stories in the Universe
9 primary themes
159 stories mapped geographically
206 broader or global stories kept in the Universe
01 · Follow the Themes
One colour, one primary theme
Every story has a primary topic, and that topic determines its colour and where it sits within the visualization.
Choose a theme and the related stories come together as a visual constellation. Secondary topics create smaller connections between stories, helping reveal relationships that might not be obvious at first.
The result is a visual system where the colours, filters, and legend all stay connected to the same underlying story data.
The lines between stories represent shared metadata. Their shapes aren’t meant to be read like a traditional chart—they’re there to encourage exploration and help you spot connections.
02 · See Where the Stories Take Place
Geography, with a little flexibility
Stories with a clear geographic focus appear on Earth. But not every story points to a precise location, so the visualization uses different approaches depending on the geographic information available.
City
If a story is about a specific city, it’s placed there.
State or region
Stories covering a state or sub-national region are given an illustrative point within that area.
Country
Country-level stories use carefully chosen display points on land. Larger or densely populated countries can have more than one point, making individual stories easier to discover and select.
Continent or broad region
For stories covering a continent or wider region, the point is placed somewhere within the relevant area to give a sense of geographic coverage.
These locations are visual anchors rather than exact coordinates. They help communicate where a story belongs without pretending that every story has a single precise location.
Stories with a global focus—or those covering several disconnected places—stay in the Universe, where their thematic relationships make more sense than forcing them onto a map.
03 · Follow the Archive
Archive order becomes a journey
The original archive contains complete publication dates for some of the stories.
For now, the bottom
