Encourage endless discovery with National Geographic
Background
National Geographic came to Kettle seeking to encourage deeper discovery on their web product. At the time, the site attracted millions of global visitors each month, with over 50% of the traffic coming from mobile—typically from links shared on social platforms directly to its article pages.
The roadmap was divided into five phases: article, hub, homepage, navigation and design language. Each stage involved two-week sprints with rounds of user testing, focus groups, and iteration until we landed on a beta launch product we felt was solving both business and user needs.
This was very much a waterfall approach starting with low-fidelity wireframes and ending with collaborative designer/developer sessions focused on interactions and polishing.
Our goal
The primary goal of this redesign was to keep users engaged longer while also decreasing bounce rate, increasing ad impressions, and increasing traffic to external National Geographic properties (i.e. TV, Shop, and Travel).
NATIONAL GEOGRAPHIC REBRAND
The agency Gretel had also just completed a recent rebrand of National Geographic. The agency was provided with the updated guidelines and used this to inform art direction of the site. The redesign was heavily influenced by the concept of the “index” and “mapping.” Both would impact things like the site grid, iconography, and loading animations.
ARTICLE PAGE
Knowing the majority of users entered the site on an article page via social, we started by auditing the existing experience—partnering with National Geographic’s internal UXR team to understand existing behaviors, where users abandoned their article viewing experience, and what elements users found most engaging. We intended to utilize known behaviors users exhibited on social media to our benefit.
We broke the core article page down into high level components, based on the CMS, and determined users’ mindsets at each scroll position. We also audited the types of article pages ranging from short features to long-form immersive experiences. We focused on the core template, reframing the article page with those existing components, testing two concepts:
❶ Truncated article experience with more immediate pathways to discovery
❷ Feed experience with pathways to discovery to mimic behaviors on social media
CONTENT STRATEGY
We thought through two “content push” experiences. One which focused on guiding the user through breadth of Nat Geo verticals keeping their chosen content type as a consistent thread. The other would focus on the inverse, guiding the user through breadth of Nat Geo content types while keeping their chosen vertical a consistent thread.
Ultimately we chose a mix of the two concepts and envisioned this like a pyramid - starting with the most contextually relevant content directly after the article, and widening the path to query broader content with our remaining verticals, utilizing taxonomy to create as much of a personalized feel as possible.
WIREFRAMES & TESTING
We began to test these concepts starting with low-fidelity mobile wireframes as a way to sell the concepts to stakeholders within National Geographic—eventually moving into simple prototypes we could test and verify with users. Ultimately the clients decided on a combination of the two directions, but indexed highly on the interactive components within the article experience. Users also reacted positively to these components and were interested in exploring more content from these pages.
Upon further iteration and testing, we discovered users responded positively to the layout of a card based feed within an article, they interacted heavily with horizontal card stacks, swiping through multiple times to explore stories. We found that a combination of the two layouts provided an easy content browsing experience and a pacing that allowed users to explore naturally.
TEMPLATE DESIGNS
After completing rounds of UI exploration overseen by my design manager Shalimar Luis, we began to introduce elements into the article template, creating a component library.
RESULTS
The updates to the article page were tested in a beta group of magazine subscribers, and eventually launched publicly with the remainder of the site updates.
In combination with the other changes, the bounce rate from this page decreased by 5% within a year, engagement with content on the article page increased by 10% (either gallery viewing, video watching, or leaving the page to view other content). Referrals to other National Geographic properties increased by 400%. Most importantly scroll depth increased dramatically.
Check out this recent article on Santa Cruz Island foxes or a more immersive photography-focused article to see the page in action.
VERTICAL HUBS
We used the insights gathered about how National Geographic users explore content on the article page to inform their hub pages. From Science & Innovation to Animals & Wildlife, these hub pages needed the flexibility to evolve alongside daily content and sponsorship opportunities. The result was customized spaces for partnerships that felt consistent, beautiful, and each told their own visual story.
We mixed components we knew users loved interacting with from article pages and reframed them to focus on their relevant vertical within a hub page. We also introduced a sub-navigation to allow users to access the content they wanted faster.
HOMEPAGE
The homepage had the most stakeholders, the most sub-brands, and the most anticipation from the business. It was important for this page to feel as big and immersive while still considering things like load time and performance.
We collaborated closely with internal teams at National Geographic to align on every different business, content, and philanthropic initiative. We hoped the homepage would become a page users could discover new content, with a primary focus on magazine subscribers.
With rounds of art direction application and client approvals in combination with our growing component library, we were able to create an immersive and splashy homepage experience.
TESting takeaways
Overall, participants were genuinely intrigued and delighted upon discovering something new from the homepage, such as Your Shot and available Trips. A potential cause for concern was the original language used to describe the "Give" section, where participants understandings ranged from assuming it was purely e-commerce, to purely donation, and experienced a range of interest, frustration and confusion as a result.
NAVIGATION
Navigation sprints were saved for last, in order for the team internally to understand general navigation patterns of the new site design itself after deploying the beta site.
We spent a day doing a deep dive working session with the National Geographic team, iterating on a variety of IA's that met the needs of our stakeholders and business goals, and worked towards collapsing the confusion of the previously 3 tiered navigation system.
Testing takeaways
Our key focus for the navigation was to create a system that provided awareness of our verticals, and also drove consumers to our highest revenue products. When balancing this with the additional business requirement of highlighting our mini-franchises, we found that users didn't understand that hierarchy and business units in the same way that the company was formulating these initiatives internally.
To alleviate this frustration between our different product and content categories, we created a system that focus' only on two core organizational methods; Sites, to represent our verticals and Topics, to represent our additional business units. This method of organization allowed us to create just enough visual hierarchy to provide users easy access to both our products and our verticals, and kept both of these fairly equally displayed on mobile as well.
RESULTS
The full site was launched in January 2018 for the 130th anniversary of National Geographic. Overall they saw a 20% decrease in bounce rate on the homepage, a 10% increase in engagement with photo galleries, a 5% decrease in bounce rate site-wide, and a 4x increase in referrals to other National Geographic properties.
Visit the full site to see it in action.