Immersive storytelling through the integration of design, technology, and humanity.
featured projects
Masters of Flight
Role
Lead Designer & Developer
Client
National Geographic
Year
2017
Project Description
Masters of Flight introduced a whole new way of presenting landscape-ratio videos on mobile devices, which were usually considered more suitable for portrait-ratio media. The goal was to present wide ratio video footages in mobile devices without cropping. The immersive multimedia gallery, uniquely designed for this project, integrated smooth zoom effect into user scroll interaction to solve this problem. The final design was authentic and powerful enough. The immersive gallery evolved into a new interactive storytelling product that has been used repeatedly in a number of different articles. Masters of Flight won four Webby Awards including Best Visual Design category in 2018.
Creative Stack
HTML, SCSS, Javascript (Gulp, Babel, Node.js), Custom immersive media gallery framework, Adobe CC
Team Members & Collaborators
Senior Designer, Photo Editor, Video Editor, Writer, Editor, Producer
Recognition
Four Webby Winner in 2018 including ‘Best Visual Design Aesthetic’ and ‘Best Use of Video or Moving Image’
- official live pageby National Geographic (behind paywall)
Links
All Eyes on Mars
Role
Lead Developer, UX/UI Designer
Client
National Geographic
Year
2021
Project Description
In February 2021, the new rover from NASA landed on Mars. Prior to that historic event, National Geographic researched the expected activities by the new rover and created an interactive experience with 3D graphics. The goal was to create an immersive multimedia gallery experience, combining multiple videos, images, maps, and data visualizations.
Creative Stack
HTML, SCSS, Javascript (React + Gulp), Custom parallax rendering framework, Adobe CC
Team Members & Collaborators
Graphics Editors, Cartographers, 3D Illustrators, Photo Editor, Video Editor, Writer, Producer
- official live pageby National Geographic (behind paywall)
Links
Prototyping Augmented Reality
Role
Lead UX/UI Designer & Developer
Client
National Geographic
Year
2017
Project Description
At the beginning of 2017, National Geographic began to actively explore the possibility of various AR products. AR storytelling and AR data visualization were two major interests of the company. AR TF team designed and developed several working prototypes as proof of concepts. By the end of 2018, National Geographic produced the story of archaeopteryx, the first AR storytelling experience, which was first introduced in the Future of StoryTelling conference.
Creative Stack
Swift, C#, Unity, Vuforia, SketchApp, Adobe CC
China’s Supercaves
Role
Lead Developer
Client
National Geographic
Year
2014
Project Description
Part of the Gebihe cave system in China, the Miao Room ris the world’s second largest known underground chamber by area. This immersive article plays the stunning 3D-rendered videos following the viewer’s mouse scrolling. The interactive experience provides a unique experience as if the viewer is actually exploring the inside of the cave. Laser scan technology was used to populate the initial blueprint of the cave. While exploring the article, viewers can see some areas of the cave remain black. Those are hidden parts to the laser scanners’ sights.
Creative Stack
HTML, SCSS, Javascript, Adobe CC
Recognition
Gold Medal in Gráficos Online, Malofiej 23, 2015
Silver Medal in Combination Print & Digital, Society for News Design (SND36), 2015
- official live pageby National Geographic
Links
Solar System in Action
Role
Lead Developer, UX/UI Designer
Client
National Geographic
Year
2021
Project Description
This high-fidelity interactive experience is based on pre-rendered videos that are solely controlled by user scrolls. The user experience applied in this piece is the result of many years of practices, probably one of the most robust solutions among similar experiences produced by National Geographic.
Creative Stack
HTML, SCSS, Javascript, Adobe XD
Team Members & Collaborators
Graphics Editor, 3D Illustrator, Writer, Editor, Producer
- official live pageby National Geographic (behind paywall)
Links
other projects
Hiking Grand Canyon
Lead Developer, UX/UI DesignerNational Geographic, 2016
When cartographer Charles Preppernau and graphics editor Manuel Canales came up with an idea to turn the gigantic Grand Canyon map into an interactive essay, we realized that this project could become a sensational UX art piece. The interactive route animation and interpolated camera movement was optimized and user-tested a number of times for the sleekest user interaction.
Health Care Cost Quiz
Lead Designer & DeveloperPBS NewsHour, 2020
This interactive quiz experience shows that the price tag for common procedures can be staggeringly different, depending on where the patient receives care. Simple yet convenient page UX help the viewers fully engaged in the serious and complicated experience more easily. It won the Webby People’s Voice Award in Best Individual Editorial Feature in 2021.
Walking Tokyo
Lead Designer & DeveloperNational Geographic, 2019
As a part of National Geographic Magazine’s Cities Issue in April 2019, photographer David Guttenfelder took snapshots of streets in Tokyo on foot, and published a story based on his work. Walking Tokyo is a special spin-off project presenting b-sides images and footages that the photographer had taken in the city. The mosaic grid gallery created for this project is a reflection of the extraordinary characteristics of the images that were focusing on peculiar moments of the city’s mundane life.
The New Europeans
Lead Designer & DeveloperNational Geographic, 2016
As The New Europeans, the story of immigrants in Europe, had to deal with a number of high-res images and footages at the same time, the unique grid design solution became handy. As short videos were used as thumbnails, the grid experience was often referred to as “Harry Potter Gallery.”
North by Christoph Niemann
Lead Designer & DeveloperNational Geographic, 2017
When National Geographic Traveler hired illustrator Christoph Niemann for a special promotion of Svalbard cruise package, the company planned a special digital promotion for the travel package. A custom animation framework was developed to produce this complex interactive article using multiple images and videos, which was used in many other projects later. It was the first Ellie Awards finalist article by NGT.
Along the Mekong
Lead Designer & DeveloperNational Geographic, 2019
Along the Mekong is National Geographic Traveler and Christoph Niemann’s second collaboration to promote National Geographic Expeditions, the company’s tour package product.
Galápagos by Grandpa Chan
Lead Designer & DeveloperNational Geographic, 2018
This parallax storytelling experience was produced to promote National Geographic Expeditions, the company’s tour package product.
A Lasting Destruction
Lead DeveloperNational Geographic, 2021
In remembrance of Tulsa Massacre, National Geographic produced this photography-based visual description of the incident.
A Woman’s War
Lead Developer, Animation DesignerNational Geographic, 2019
Photographer Robin Hammond visited four different countries and interviewed women who have been through the wars in each region. This special edition was published in celebration of International Day of the Girl Child in 2018. In this special interactive article, CSS3 animation was heavily applied with the in-house-developed custom parallax.
Explore the Ocean in 24 Hours
Lead Designer & DeveloperNational Geographic, 2017
National Geographic and Rolex produced this content as part of the partnership to promote exploration and conservation. The interactive experience used the full-bleed parallax media gallery originally developed for National Geographic Traveler.
Katie’s New Face
Lead Designer & DeveloperNational Geographic, 2018
This award-winning interactive article introduced a face transplant patient’s challenging journey to recover. The curtain-style gallery experience was developed to present severely graphic images in a mild way.
Draining California
Lead DeveloperNational Geographic, 2014
This interactive data visualization reports serious droughts in California using 3D-rendered data visualization.
The Big Meltdown
Lead Designer & DeveloperNational Geographic, 2018
This article experience presents how much climate change makes surprising impacts In Antarctica. Fully customized page layout was applied to the article.
Mindsuckers Novellas
Lead Designer & DeveloperNational Geographic, 2014
This award-winning interactive graphic novellas series was National Geographic’s one of the earliest attempts to produce immersive storytelling experience. It was meticulously arranged and designed with multiple image layers per scene, containing voice narration and sound effects.
Gender Revolution: Nine Lives
Lead Developer, UX/UI DesignerNational Geographic, 2016
In January 2017, National Geographic Magazine released a provocative issue titled Gender Revolution, which covered articles exclusively about gender. The grid photo gallery experience was designed and delivered for the digital version of this cover story.
Path of Persecution
Lead Designer & DeveloperNational Geographic, 2017
This interactive media experience presents what Photographer William Daniels witnessed from the front lines of the Rohingya refugee crisis.
Mementos
Lead Designer & DeveloperPBS NewsHour, 2020
The PBS NewsHour spoke with 11 artists and writers about which memento best expressed their experience, an artifact they’d tuck inside a time capsule.
Best Trips 2018
Lead Designer & DeveloperNational Geographic, 2017
National Geographic Traveler introduces places to visit in 2018. “Hummingbird Gallery” was used in the project.
Best Trips 2019
Lead Designer & DeveloperNational Geographic, 2018
At the end of every year, National Geographic Traveler introduces places to visit next year. This article introduces the places to visit in 2019. “Hummingbird Gallery” was used in the project.
Around the World in 24 Hours
Lead Designer & DeveloperNational Geographic, 2016
An interactive travelogue of 24 places around the world by National Geographic Traveler. Full-bleed parallax media gallery has been developed, which has been adopted into a number of photo-driven interactive projects over the course of coming years. It has become one of the most successful product in 2016 from NGT.
The American Nile
Lead DesignerNational Geographic, 2013
This article is known to be the first interactive article that was produced by National Geographic Magazine.
Elections Special by PBS NewsHour
Lead UX/UI Designer & Front-End DeveloperPBS NewsHour, 2020 – 2021
During the presidential election in 2020, PBS NewHour provided a number of news and information to the public through various tools and media outlet. As a lead designer for the presidential election coverages, I designed the entire election special news experiences that covered from Iowa Caucus to post-election analysis.
COVID-19 Time Lapse Map
Lead UX/UI Designer & DeveloperPBS NewsHour, 2020
In March 2020, PBS NewsHour published a coronavirus status map across the United States to provide the overview of coronavirus pandemic status to their readers. It was the first full-scale interactive data visualization project by NewsHour. This project was particularly important as the map was provided to over 300 PBS member stations to implement on their own websites.