Loading ...

Responses by Jenn Cash, principal and creative strategy, Language Dept.

Background: The American Cancer Society (ACS), in collaboration with the International Agency for Research on Cancer and the Union for International Cancer Control, publishes The Cancer Atlas, a compendium of global cancer data in the form of a book and a website. Offering in-depth insights into the cancer burden, major risk factors and ways leaders worldwide can take action, the third edition of The Cancer Atlas is used by the global cancer community to achieve the shared goal of a world without cancer.

Building on our previous collaboration for the second edition, ACS enlisted Language Dept. to design canceratlas.cancer.org along with the third-edition printed atlas. Our job was to preserve the scientific truth of the research while making the narrative compelling to a broad audience including cancer control advocates, government and public health agencies, and policymakers as well as patients, survivors and the general public.

Favorite details: Throughout our discovery and stakeholder interviews, a strong message emerged: access—to cancer research, health education, research funding, vaccinations, proper training, policymakers and advocates—is the road to solutions. “Access Creates Progress” became the foundation and unifying theme for the project. The homepage map feature illustrates six stories of access across all global regions. Stories of positive change in policy and research highlight moments of optimism and lead visitors deeper into the atlas’s content.

Challenges: Delivered in the raw form of Word docs and Excel spreadsheets, the final product includes 125 data visualizations, 50 choropleth maps, a visual system translated across a 132-page book, and a fully responsive, interactive website to literally give access to data and spur progress in cancer research and advocacy.

The primary challenge was creating a visual system with breadth and depth to work across all content serving both web and print audiences. One strategy was our approach to color. Two parallel color systems visually key data and maps by cancer colors and organize topics by color-coded sections. Another strategy was modular page components. We designed topic pages as units to be combined in any order to support the content: interactive maps and charts, text blocks, images, tables, access stories, and pull-quotes, among other types.

New lessons: To create data visualizations that could be both interactive on the website and serve as high-quality images in print, we researched, integrated, and customized Highcharts Cloud technology. While we underestimated the amount of configuration and custom coding this would require, we loved pushing the boundaries of what we could make it do. We’re proud of the variety and complexity of chart types we were able to create and delighted by the interactive experience they offer within topic pages.

Navigation structure: The site acts as a digital companion to the printed Atlas but needs to serve a digital audience on its own. The main navigation both mirrors the major book sections—Risk Factors, The Burden and Taking Action—while presenting browse paths for high-interest content. Since viewership data revealed key interest areas, we added a Browse by Topic feature to help visitors who come seeking a specific topic find that information faster. We also enhanced search views to key information by type as another tool to help visitors navigate.

Technology: The site is a custom WordPress theme with a PHP back end along with the inclusion of the Advanced Custom Fields plugin to help create more complex/modular components. On the front end, it primarily relies upon the Timber WordPress plugin to create page templates via the Twig template engine.  For the more complex interactive data elements, it uses the React JavaScript library to manage app-like functionality. Leaflet was used for generating the maps, and GSAP and ScrollMagic were used for the landing page animations. Highcharts Cloud is the charting technology used for all embedded interactive graphs.

canceratlas.cancer.org

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In
一一高清视频在线观看-高清视频在线观看在线观看