The Tobacco Atlas Website

Turning global tobacco research into evidence people can understand and use.

CHALLENGE

Translating a book-based structure, varied content types, and dense evidence into a website serving audiences with very different needs. Without a shared digital system, chapters, data, and interactive tools could feel fragmented or difficult to navigate.

OBJECTIVE

Create a flexible website system that guides people from narrative context into deeper evidence while maintaining a recognizable experience across different topics, formats, and tools.

PROJECT TYPE

Website
Design System

ROLE

UX/UI
Visual design

CLIENT

John Hopkins University

TIMELINE

Jan ‘23 - Oct ‘25

Establishing a Flexible Digital Foundation

The Tobacco Atlas needed to feel recognizable across chapters, data, and tools without limiting how individual stories could be presented.

I translated the publication identity into a digital system of typography, color, navigation, interface elements, and data treatments. This created a shared foundation that could support new experiences while maintaining a consistent visual language.

Creating Reusable Structures for Different Kinds of Evidence

The website needed to accommodate long-form chapters, solutions, news, datasets, country information, and interactive tools, each with different content and storytelling needs. I created adaptable templates and reusable components that gave each format the structure it needed while maintaining familiar navigation, hierarchy, and visual cues.

Rather than forcing every page into the same layout, the system established enough consistency to keep users oriented while leaving room for different stories and content types. It also allowed the website to expand without requiring the experience to be redesigned each time something new was introduced.

Making Key Arguments Easier to Grasp

Different audiences needed different levels of information. Advocates and policymakers often needed to understand the central argument quickly, while researchers needed access to deeper data, methodology, and sources.

I used clear content hierarchy, progressive disclosure, and consistent data presentation to provide multiple ways into the evidence. Key takeaways appeared first, with supporting context and detail available as users moved further into a topic.

Outcomes

Website

FLEXIBILITY

Extended the system to support new content and interactive tools, including the Cost Recovery and Revenue Estimator.

CONTINUITY

Kept chapters, data, and tools connected through a shared library of reusable design patterns.

CLARITY

Created a clearer entry point into complex tobacco-control evidence. The website is now the most-viewed web product Vital Strategies has released to date.

Explore More Work

Making real-world tobacco pricing data faster and more reliable to collect.