James Webb Telescope

Explaining scientific knowledge through interactive web experiences and 3D models, reaching 20k views in 2 days with positive reviews from readers

Published

Published

Published

Interactive Article

Interactive Article

Interactive Article

UXD

UXD

UXD

* The article might take a few seconds to load 3D objects.

Challenge

Keep readership of Dong-A Ilbo’s interactive article website in big project intervals and broaden the website's reader range

Opportunity

Create a comprehensible interactive article that visually explains complicated knowledge using web-based interactions and 3D models to attract readers from young students to their parents

Team

So Yeon Kim (Me, UXD + Writer)
Seong-Il Shin (Developer + Writer)
Sang-a Im (Developer + Writer)
Eunji Wui (Journalist)
Science Dong-a Team

Timeline

2 Months (May - June 2022)

Tool

Three.js
Figma
Adobe Photoshop
Maya

Task

Article Ideation

Prototyping

Writing

UI Design

Wireframe

Data visualization

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

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

Background

Non-traditional interactive articles to attract more readers

Dong-A Ilbo’s interactive article site needed to maintain readership between major projects. With a project of episode articles called ‘Series’ taking months to complete, sustaining engagement was crucial for ad revenue.


To attract a wider audience, we expanded topics beyond social issues, lowering the entry barrier to news.

We had to figure out the most cost-efficient way to create an article, and my manager gave us a chance to strategize this together.

We had to figure out the most cost-efficient way to create an article, and my manager gave us a chance to strategize this together.

Process

Designers and developers as article creators

We tried to escape traditional journalism by reversing the production steps and roles.


We utilized technical research to brainstorm new topics. And as research conductors, developers and I participated in writing articles with professional support.

Writing and designing simultaneously for the first time taught me to see design as a storytelling tool, aligning visuals with my content.

Background

Attracting 20k+ readers in 2 days, having them share the article with positive reviews

Article

Maintaining readers' curiosity

Maintaining readers' curiosity

Our main goal was to encourage readers to explore and interact with the article, ensuring they stayed engaged until the end. We continuously refined the content structure for the best experience.

3D intro sequence to catch the user's attention

To captivate readers, we used Three.js for immersive visuals. I created a cinematic feel with an interactive title and scrolling 3D telescope models

Chapter division for easier reading

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

3D to explain the tecnical structure

Highlighting each part and function with 3D modeling while decolorizing the rest to match the description box

GIF for explaining scientific text

Making scientific text accessible, we used a GIF of the orbit to show the James Webb Telescope’s location, comparing it to its predecessor to illustrate the vast distance

Visualizing what happened outside of Earth

Using Three.js and 3D models to explain how the telescope was launched

Video matching to scrolling

Visualizing the James Webb Telescope's deployment with videos that play according to the timeline (e.g., 3 days after launch).

Interactive comparison based on scrolling

Changing the chart on scroll in the "How does the telescope take photos" chapter to add interactive focus

Clickable before-after comparison

Enabling users to compare photo quality before and after the James Webb Telescope's image adjustment

During design and development, I struggled to optimally display the 3D object without interfering with the text boxes.

Reflection

Potential of an interactive article for education

More than 200+ positive reviews on the internet, saying “Dong-a Ilbo published great educational news—my son enjoyed the content,” made our team realize the power of interactive articles in the non-journalistic field. Its involvement of a wide range of readers fascinated us in a way that it can create a place where everyone can communicate.

It was meaningful to us that most of the reviews mentioned that they learned complicated knowledge understandably and playfully, different from traditional news.This article had another profound meaning to the team, especially regarding the fact that there was no writer. Developers and designer worked from the writing, and this participation let us think about what the new media should be.

This project inspired me to the possibilities of the interactive web. Within storytelling inside, interactive webs can be a great medium to convey the message. Though the project is finished, I still consider a personal continuation of an interactive scientific website—next time, why not more user interactivities like quizzes and games?

Photos of some of my work on Google Docs (content creation) and Figma file (design)

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