James Webb Telescope
Explaining scientific knowledge through interactive web experiences and 3D models, reaching 20k views in 2 days with positive reviews from readers
* 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
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.
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.
Background
Attracting 20k+ readers in 2 days, having them share the article with positive reviews
Article
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
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)