Sanwha: The Fallen
A report on South Korean firefighters, honored with the Innovative Journalism Award at one of Korea's top journalism awards
Challenge
Bring more awareness to the firefighters who have died in the line of duty
Opportunity
Create an interactive article to immerse readers in a firefighter’s life by enabling readers experience their lives
Team
Lead designer worked in a team of 12, including journalists and developers
Timeline
2 Months (July - August 2022)
Tool
Reality Capture
Figma
Adobe Photoshop
Protopie
Maya
Task
Content creation
Prototyping
Writing
UI Design
Wireframe
Data visualization
Background
Interactive article as a magnifier, shedding light on unseen aspects of society
Fallen firefighters' families in Korea lacked government support. Our team worked to expose this issue and raise awareness.
Process
Creating original content that goes beyond text
Rather than relying on the traditional method of visualizing reporters' text, we used interactive webpages to present independent content beyond words.
Result
Won the Innovative Journalism Award for revolutionizing digital experience
Article
The article was structured into two parts for effective storytelling:
They Were My Family
Showcases mementos of fallen firefighters, accompanied by stories from their families collected from interviews
The Moment Your Press 911
Depicts the reality of firefighters' work with an informative yet emotional tone
Tells firefighters' stories through numbers, dividing them into three chapters: 2.6 seconds, 25 KG, and 107 people
Part 1: They Were My Family
Our goal was to create a space where readers could pause, reflect on each memento, and connect with the interviewees' experiences.
Impactful intro with all mementos in background
Sometimes, the images have more power than text—showcasing 30+ mementos provided context for the article and evoked readers' curiosity on an emotional level
They were my …
We used a dynamic title sequence to emphasize that the fallen firefighters were not just heroes but also someone's parent, partner, or child
Presenting 30+ items in two layouts: grid and list
To captivate readers, we used Three.js for immersive visuals; I created a cinematic feel with an interactive title and scrolling 3D telescope models
Bottom navigation for easier exploration
Provided a clear categorization Structuring the bottom indicator (of the item list) to let readers explore the article easily
Displaying each photo with corresponding story in an overlapping layout
What once was initially a one-page article, the project was segmented into seven chapters that enhanced the reading experience for easy comprehension and displayed at the end of each page
Part 2: The Moment You Press 911
It was crucial to showcase each number uniquely based on its meaning. We researched technology and interactive design to highlight their significance effectively.
Voices of firefighters from interview
To enhance authenticity, we incorporated real firefighter voices from interviews
Visualizing the number of calls
Using Matter.js, we visualized firefighters receiving rescue calls every 2.6 seconds by dropping red call balls that stack on top of each other as readers progress through the article
Firefighter gears captured with photogrammetry method
We used photogrammetry to showcase detailed firefighter gear, allowing users to rotate and closely examine each tool for an interactive experience
Visualizing heaviness through comparisons with everyday items
Firefighters carry 25kg (55lb) of gear—our team decided that visualizing this weight through comparisons with everyday items would effectively convey its impact
Showing the fallen firefighters
What once was initially a one-page article, the project was segmented into seven chapters that enhanced the reading experience for easy comprehension and displayed at the end of each page
Not just numbers, but actual people
107 represents the fallen firefighters—I chose to create a visual comparison with the number of lives they saved for a more impactful portrayal
Reflection
Designing interactive articles to create a digital space for society
Developing unique content beyond traditional news was challenging but highlighted the strengths of interactive articles to visualize textual experience.
Collaborating with journalists required a reversed workflow, emphasizing the need for clear timelines and brainstorming; and due to time constraints, I adapted by replacing a planned walking animation with SVG.
The next steps include integrating 3D modeling and refining the introduction with a strong landing page.
Building a 3D asset using a photogrammetry method in Maya