Sanwha: The Fallen

A report on South Korean firefighters, honored with the Innovative Journalism Award at one of Korea's top journalism awards

Published

Published

Interactive Article

Interactive Article

UXD

UXD

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

My personal thoughts and anecdotes will be quoted on the right panel.

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.

A person holding a magnifier to zoom into a certain part of people
A person holding a magnifier to zoom into a certain part of people
A person holding a magnifier to zoom into a certain part of people

It was crucial to carefully portray fallen firefighters, ensuring honest reporting without reinforcing a fixed image, as it could shape readers' perceptions.

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.

Process of creating the article: 1) research and interview, 2) article content creation, 3) design, and 4) development
Process of creating the article: 1) research and interview, 2) article content creation, 3) design, and 4) development
Process of creating the article: 1) research and interview, 2) article content creation, 3) design, and 4) development

We brainstormed which aspects were best conveyed through interactive articles and carefully selected interactive elements to enhance user experience.

Result

Won the Innovative Journalism Award for revolutionizing digital experience

Announcement from Kwanhun Awards to the article
Announcement from Kwanhun Awards to the article
Announcement from Kwanhun Awards to the article
Article

The article was structured into two parts for effective storytelling:

  1. They Were My Family

  • Showcases mementos of fallen firefighters, accompanied by stories from their families collected from interviews

  1. 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

Design and storytelling deeply influenced each other—I constantly balanced how content shaped design and how design enhanced the story. This is when I learned the lesson that design is more than visual.

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.

Screenshot of Maya to create a 3D asset of firefighter's gears using a Phtogrammetry method
Screenshot of Maya to create a 3D asset of firefighter's gears using a Phtogrammetry method
Screenshot of Maya to create a 3D asset of firefighter's gears using a Phtogrammetry method

Building a 3D asset using a photogrammetry method in Maya

Experience

UX Visual Designer

SAP

2024.05 — Current

UX Design Co-Op

Motorola Solutions

2024.02 — 2024.05

Design Technologist Intern

SAP

2023.05 — 2024.02

...and more

Get in Touch

I’m happy to collaborate!

Please reach out via LinkedIn.

Education

New York University, Tisch School of the Arts

BFA Interactive Media Arts, Game Design

2018 — 2024

...and Have a great day!
So Yeon Kim @2025
Experience

UX Visual Designer

SAP

2024.05 — Current

UX Design Co-Op

Motorola Solutions

2024.02 — 2024.05

Design Technologist Intern

SAP

2023.05 — 2024.02

...and more

Get in Touch

I’m happy to collaborate!

Please reach out via LinkedIn.

Education

New York University, Tisch School of the Arts

BFA Interactive Media Arts, Game Design

2018 — 2024

...and Have a great day!
So Yeon Kim @2025
So Yeon Kim @2025