Interactive Historical Storytelling
A cinematic web experience that turns industrial-era gang history into an atmospheric screen-based narrative using smoke, map interaction, dossier overlays, and legacy storytelling.
Overview
This project reimagines a historical case study as a dramatic interactive experience. Instead of presenting information as a flat timeline, the design turns the subject into a layered digital story about gang identity, industrial conditions, neighborhood territory, and the long memory of street culture.
Challenge
The challenge was to create an interface that feels moody and immersive without becoming hard to read. Dark textures, sepia lighting, dense content, and multiple story branches had to work together while still keeping navigation clear and repeatable across every screen.
Interactive Systems
The case study is built around several distinct interaction layers so the project feels closer to a digital exhibit than a static history page.
01
The opening scene uses smoke, mist, bloodline typography, and a live smoke index to set tone before the user enters the main experience.
02
The first screen frames gang formation through kinship, trust, loyalty, and the “code of the streets” with animated network connections and CTA-based branching.
03
The South Side, Red Hill, and Brooklyn Row zones are treated as active territories with their own descriptions, crime patterns, and neighborhood identity.
04
Hotspots open scrollable infographics about industrial toil, urban poverty, and low wages so the project connects gang culture to the realities of industrial Britain.
05
The final screen turns history into aftermath, exploring street memory, policing, codes of loyalty, and the myth-making that kept gang reputations alive.
Screen Walkthrough
The visuals below show how the project moves from mood-setting entry into narrative explanation, territorial exploration, industrial context, and legacy.
.png)
Deliverable
The full project is presented here as an embedded browser preview so the user can experience the screen transitions, map states, dossier overlays, and atmosphere directly inside the case study.
Process
The workflow started with industrial-era reference gathering and tone exploration, followed by screen planning for hierarchy, readability, and branching flow. Composited backgrounds, maps, textured overlays, and panel systems were then refined into a unified interactive sequence with repeatable controls and stronger visual continuity.
Deliverables
