Interactive Article | UI Design
Write, design, and publish an interactive Article about James Webb Telescope. Reached 20k views in 2 days with positive reviews from readers.
Time
2 Months (May 2022 - June 2022)
2 Months (May 2022 - June 2022)
Team
So Yeon Kim (Solo Designer, Writer)
Seong-Il Shin (Developer, Writer)
Sang-a Im (Developer, Writer)
Eunji Wui (Journalist)
Science Dong-a Team
So Yeon Kim (Solo Designer, Writer)
Seong-Il Shin (Developer, Writer)
Sang-a Im (Developer, Writer)
Eunji Wui (Journalist)
Science Dong-a Team
Tools
Three.js, Figma, Adobe Photoshop, Maya
Three.js, Figma, Adobe Photoshop, Maya
Task
Ideation, Writing, Wireframe, Prototype, UI Design
Ideation, Writing, Wireframe, Prototype, UI Design
Nontraditional interactive articles to attract more readers
<James Webb Telescope: The Observer of the Origin> explains scientific knowledge comprehensively with web-based interactions and 3D models.
The Original (Dong-A Ilbo’s interactive article website) needed to keep readership in big project intervals. It usually published a project of episode articles called ‘Series,’ which took 3~4 months to complete. As the readership mattered to the advertisement profit, the website had to attract readers even during production.
We also wanted to broaden the reader range by expanding the topic. Existing ones heavily reported on social issues. It succeeded in creating value but failed to open the entry barrier to the news.
Designers and developers as article creators
Our team tried to escape traditional journalism by reversing the production steps and roles. We utilized the development and technical research to brainstorm new topics. And as research conductors, developers and I participated in writing articles with professional support.
We aimed to use 3D models and iterated article topic ideation. After several weeks, we decided to work on James Webb Telescope, as we found the open-source Webb Telescope modeling. The timing was also perfect since NASA planned to reveal Webb Telescope’s first image in two months.
My role was to work on the overall creation. I discussed topics, wrote the content, researched web-based interactions, designed the article’s UI prototype, and participated in front-end development.
Interactive Storytelling
Making interactive journalism an engaging experience
Our main goal was to let readers explore and interact with the article. It was significant to make them read the whole article. We kept figuring out the appropriate content structure.
What once was initially a one-page article, the project was segmented into seven chapters that enhance the reading experience for easy comprehension.
Then we brainstormed interactive designs and interactions to deliver scientific knowledge effectively: Three.js, videos, graphs, charts, and gifs.
Three.js to catch the user's attention
Since the introduction page needed to catch readers’ attention, our team used Three.js for immersive visuals. I formed a cinematic mood by presenting an interactive title and 3D modelings of telescopes as readers scroll the screen.
The introduction used three-story-controls developed by New York Times to move perspective according to scroll input.
Intro of James Webb Telescope: The Observer of the Origin
Chapter division and display at the end of the intro page
Explaining the mechanical structure with 3D visual aids
'How does James Webb Telescope work?' chapter comprehensively explains James Webb Telescope's parts and functions using 3D modeling.
I also highlighted each part by decolorizing the rest, corresponding to the description box on the right.
Description of James Webb Telescope's components and functions
Gif and videos for visualization
Scientific text may be challenging to understand for younger readers.
'How did the Telescope launch?' chapter displays a video in the background to visually tell its unfolding after launch. The video was separated according to the day count, and each section responded to a page scroll.
The orbit gif shows the current location of the James Webb Telescope and compares it with the previous telescope. By visualizing the difference, the gif effectively shows how far James Webb Telescope is.
The gif of James Webb Telescope's orbit compared to the moon and Hubble Space Telescope
Using Three.js and 3D models to explain how the telescope was launched
Using video to visualize the James Webb Telescope's unfolding after the launch; a new video is played corresponding to the date in the text (i.e., 3 days after the launch)
Interactive comparisons
In 'How does the telescope take photos' chapter, the chart changes by page scroll, drawing more attention through interactivity.
The chart compares Hubble and James Webb Telescope's observation ranges
The clickable feature lets users compare how the photo quality changes after the James Webb Telescope's image adjustment.
The interactive feature to show the before and after of the James Webb Telescope's image adjustment