Founded in 1888, National Geographic is one of the most recognized institutions in the world, supporting exploration and telling beautiful stories that inspire people to care about the planet. The challenge was to reimagine NG News in today’s digital environment and to create a platform that can support the best content out there.

Role: UX Designer 
Objective: How might we overhaul National Geographic News to be responsive and user-friendly?
Platform: Web

News Article Page

With most readers accessing stories on mobile and tablet, our primary objective was to redesign NG News articles to be responsive and fully optimized for all devices. To do this, we had to migrate the site into a custom CMS and develop a responsive global navigation within NG News. One of the biggest challenges was to leverage the vast inventory of content and expose it to NG’s audience.

The solution wasn’t necessarily to put more content on the page, but to place related content in places where readers would actually see it. Using NG’s taxonomy library, we designed for dynamic content discovery based on subject, people, and location terms. The related story modules update dynamically so readers are always faced with new and relevant content.

News Landing Page

The main goal for the News Landing Page was to design a striking, photo-driven page that moves away from the traditional grid structure. After talking with producers and key-stakeholders, we planned to build a mostly dynamic page with the option to curate featured content. To achieve this, we designed several display variations to accommodate for different content-types and aspect ratios as well as headline driven stories.

Producers can “pin” up to two stories that will remain fixed above the fold with visual prominence. Each pin can have an expiration date so that it can automatically move down into the news feed. Anchored at the very top of the page is a carousel of the most recent content. We did this to give a sense of newsworthiness to our breaking stories, as opposed to the timelessness of the “pinned,” curated content below it.

Article Wireframes

© Alessandra Villaamil 2018