Interactive
Storytelling
From tools for editorial teams to a bespoke branded website, this work explores how motion and interaction can give a story its own pace.
One approach, different kinds of stories.
For editorial teams, I worked on a platform and reusable modules for composing stories. For BBL Retire Box, I translated a supplied storyboard into a standalone interactive website. Both use interaction to shape how a story unfolds.
Structure the story
→Select and configure modules
→Review responsive behavior
→Deliver the experience
→A platform for stories with different needs.
Flexibility
Modules needed to support different narrative structures without becoming page-specific code.
Responsiveness
Editorial behavior had to remain intentional across desktop, tablet, and mobile.
Motion
Interaction needed to guide sequence and focus while keeping the content readable.
Translate structure and supplied direction into a working experience.
My work spans CMS structure, reusable frontend templates, responsive behavior, motion, and interaction. For BBL Retire Box, I developed the full website and translated a supplied storyboard into gestures. Editorial content and branded creative remain credited to their originating teams.
- CMS structure
- Frontend template
- Responsive behavior
- Motion and interaction
- Editorial content
- Campaign concepts
- Storyboards
- Branded artwork
A platform for composing editorial stories.
The composer combines a module library, responsive preview canvas, and an ordered section timeline.
Layouts are selected as reusable building blocks rather than authored as isolated pages.
Make the platform flexible, responsive, and readable.
Modular, not page-specific
Reusable behaviors make new stories possible without rebuilding the frontend for every article.
Trade-off: module constraints must stay clear enough for editorial use.Responsive preview, desktop authoring
The authoring workflow remains desktop-first, while device previews help editors review how the published experience will behave across screen sizes.
Trade-off: Mobile is treated as an output and review context, not as a primary content-authoring environment.Motion serves narrative
Animation controls focus, order, and reveal instead of acting as decoration.
Trade-off: every interaction needs a readable static fallback.Modules give editors different ways to tell a story.
These five editorial modules use interaction to reveal, compare, and sequence content. The studies below recreate documented behavior without publishing the raw build or source assets.
A developing story, revealed one moment at a time
Field teams arrive and establish the first perimeter
Each chapter combines imagery, context, and narrative detail to guide the reader through the sequence of events.
The operation moves into a coordinated response
Each chapter combines imagery, context, and narrative detail to guide the reader through the sequence of events.
The team reaches the location and confirms the target
Each chapter combines imagery, context, and narrative detail to guide the reader through the sequence of events.
Timeline
Turns chronology into a paced reading sequence.
Image Comparison
Places two visual states in one controlled frame.
Move to inspectMagnify
Directs attention without losing the wider image context.
Horizontal Scroll Gallery
Uses lateral movement for an extended visual sequence.
Lightbox Photostack
Builds depth while keeping individual images inspectable.
Build for desktop authors and readers on every screen.
Storytelling authoring involves long-form writing, media management, sequencing, and careful review, so the CMS was intentionally designed around a desktop workflow. The experiences it produced, however, could be previewed and adapted for different screen sizes, including mobile-specific presentation where needed.
CMS composer / device preview controls. Content creation and management remain a desktop workflow.
How the Storytelling Platform comes together.
Module selection, content configuration, ordering, preview.
Module variants, media handling, responsive states.
Motion, interaction, and static output.
Component-based frontend architecture
Responsive preview and configuration
Media-heavy asset orchestration
Static production output
A storyboard becomes an experience people can move through.
A separate branded project, BBL Retire Box began with a storyboard supplied by the client and creative team.
I translated the storyboard into gestures and interactive behavior, then developed the complete website.
The campaign concept, storyboard, and visual artwork were supplied by the client and collaborating creative teams.