NBC News Verticals: MACH, BETTER and THINK
Company Code and Theory and NBC News
Introduction Date June 1, 2017
Project Website
Why is this project worthy of an award?
NBC News had two goals with the launch of their new verticals. The first was to develop a series of “near news” verticals to help attract new audiences and new advertisers through greater topic specificity, a fresh point of view, and a new design language. The second was to create the beginnings of a new digital system, from design to tech architecture, that could eventually grow and evolve to power the entirety of the NBC News digital universe. Given the scale of the NBC News ecosystem, NBC and Code & Theory took an “outside in” approach to trial and pilot this system on four verticals first to start small, prove success, and generate excitement.
What else would you like to share about your design? Why is it unique and innovative?
With the future goal of expanding the project to the rest of NBC News in mind, we needed to build a scalable system that was both designed with these verticals in mind, but also flexible enough to adapt in time to the more intensive and custom needs across their larger digital ecosystem. For example, each vertical’s front page needed a distinct look, feel, and information density that reflected its unique content and audience, but ultimately still needed to be built with a core of common component and be designed to clearly look and feel like a part of NBC News. We mapped out a plan to build a central library of all the shared page elements and reuse them across the verticals, again with their future use on other NBC News properties in mind. This meant that every design decision had to consider the implications on the larger ecosystem, but it would allow for a more seamless delivery of updates to the site for years to come.
Who worked on the project?
Name – Chenta Yu Company – Code and Theory Position – Group Creative Director, Design Name – Mortiz Kettler Company – Code and Theory Position – Creative Strategy Director Name – Nicole Gavrilles Company – Code and Theory Position – Senior Visual Designer Name – Rafa Torres Company – Code and Theory Position – User Experience Designer Name – Marc Rabinowitz Company – Code and Theory Position – Director of User Experience Name – Moritz Gimbel Company – NBC Position – Vice President, Product Name – Shezad Morani Company – NBC Position – Creative Director Name – Sarah Ozdamar Company – Code and Theory Position – Senior Producer
View the project video:
Outrider Bomb Blast
Company Bluecadet
Introduction Date April 1, 2018
Project Website https://outrider.org/nuclear-weapons/interactive/bomb-blast/
Why is this project worthy of an award?
It’s often said that those who don’t learn from history are doomed to repeat it. When that history is nuclear war, those who don’t learn from it are just doomed. The web platform Bluecadet created for The Outrider Foundation is designed specifically to avoid that fate by engaging and educating a contemporary audience on the need for action and policy that makes the world more secure. Outrider’s team of internationally recognized scientists, advocates, and educators came together in 2017 to educate the public on critical global challenges, beginning with the all-too-clear-and-present dangers of nuclear proliferation and climate change. Bluecadet worked with the foundation from its inception to develop a dynamic and fully responsive online platform that explores these issues through interactive articles, timelines, and experiences. More than a website, outrider.org, is an extensive resource for information, insight, and inspiration, and a starting point for changing policy to change the world. The Outrider Foundation believes that the global challenges we all face together can only be solved by working together. Outrider.org helped the foundation bring together a global community within days of its launch. The engaging visual storytelling on the outrider web platform unites contemporary narratives with historic perspectives to provide critical context for current events. All of the original content on the site features integrated multimedia elements that help convey the scale and scope of global threats. Galleries of rarely seen imagery, remastered archival video clips, original motion graphics, data visualizations, and interactive tools make historic events feel resonant with contemporary issues, and imbuing today’s headlines with an appropriate sense of urgency. The site’s innovative interactive tools have proven to be particularly successful. The nuclear blast simulator went viral almost immediately after launch, receiving more than 2 million views by visitors in over 200 countries within the first 10 days. Part of Outrider’s mission is to start public conversations about global threats and inspire its audience to become advocates. The immediate popularity of the site, and its broad dissemination on major online news outlets and social media channels is a testament to the project’s success and an important first step for the Outrider Foundation, and for making the world safer.
What else would you like to share about your design? Why is it unique and innovative?
Historically, an outrider is a member of the vanguard who clears the way ahead. But how do you clear the way ahead--how do you innovate--in a field already well-trod by think-tanks, think-pieces, and documentaries? Show people what happens if a nuclear bomb detonates in their backyard. Outrider.org features innovative interactive tools that offer powerful and personalized insight into devastating consequences of nuclear war and climate change. Most notable among these features is “What happens in a bomb blast.” Visually striking and easy to share on social media, “What happens in a Bomb Blast” is an interactive map that invites users to set off a virtual nuclear bomb anywhere in the world, from midtown Manhattan to their own backyard. The elegant and intuitive interface clearly illustrates the radius of destruction caused by each stage of the bomb alongside estimated effects, injuries, and fatalities. This visceral visualization makes the terrifying implications of nuclear war all too real. Seeing the blast radius of the bomb dropped on Nagasaki can personalize a catastrophic event that feels distant and abstract for many people today. “What happens in a Bomb Blast” struck a particularly resonant chord with its online audience, going viral immediately after launch. It was widely lauded in popular publications and news outlets as a uniquely engaging, surprisingly beautiful, and devastatingly effective reminder of the dangers presented by nuclear weapons.
Who worked on the project?
Josh Goldblum: Executive Creative Director Kim Quinn: Designer Nick Greenwalt: Motion Liz Quann: Producer Chris Arasin: Developer Wyatt Glennon: Designer Jillian Hammer: Designer Madeleine Osborn: Content Developer Ksenia Dynkin: Content Developer Liz Russell: Content Developer
View the project video: https://vimeo.com/267258482
PBS NewsHour
Company Upstatement
Introduction Date October 23, 2017
Project Website https://www.pbs.org/newshour/
Why is this project worthy of an award?
For more than 40 years, millions of Americans and citizens of the world have turned to the PBS NewsHour for the solid, reliable reporting that has made it one of the most trusted news programs on television.
What else would you like to share about your design? Why is it unique and innovative?
We helped PBS Newshour design a digital home to better showcase their journalism and reflect what the NewsHour stands for amid the clamor of information in your news feed.
Who worked on the project?
Scott Dasse - Creative Director Kim Miller - Lead Designer Jon Heller - Engineer Emily Theis - Producer Mike Swartz - Designer
View the project video:
Reddit Desktop Redesign
Why is this project worthy of an award?
A year and a half of ago, we set out on the monumental endeavor to redesign the front page of the internet. In our thirteen-year lifespan, Reddit has grown from a sparse few users posting article links to a vibrant digital society comprised of 330 million global monthly users and hundreds of thousands of internet communities. Despite this unprecedented evolution, our original web design (described by our CEO, Steve Huffman, as a “dystopian Craigslist”) and technical stack have remained woefully intact—until just a few weeks ago, when we launched the first official refresh in Reddit’s history. At the onset, we knew that introducing a new Reddit would be a challenging, complicated, laborious—but incredibly worthy—feat. Over the past year, our team has worked tirelessly to transform Reddit’s famously “old-school” desktop look into a welcoming and modern online destination. With three different viewing options, an all-new community styling system, and customization that works across desktop and mobile, we’ve made it easier than ever for moderators and users to create—and design—their own homes on Reddit, taking us one step closer to our mission of bringing community and belonging to everyone. To ensure we could fulfill our mission while keeping Reddit, Reddit, we started a redesign dialog with our community before a single line of code was ever written. Throughout the process, our team conducted town-hall style updates and AMAs with users across a number of communities, sourcing diverse feedback about many different use cases to ensure the end product would reflect the myriad ways people use Reddit to connect and build community. We incorporated that feedback into the redesign by building new community tools to democratize complex parts of Reddit (like creating and posting content, and styling, moderating and growing communities)), and reworking foundational design/UX elements like navigation, information architecture and interface. And we’ve gone one step further -- we’ve given users the choice of three different viewing options to suit their browsing patterns and content preferences: classic view, card view and compact view. . To make all this work possible, we not only talked with and listened to our community on Reddit, we also formed a user research team that spoke with individuals outside our core user base to understand their underlying needs, contexts of use, interests and motivations. From multi-hour video conferences and in-person interview sessions to guerilla research around San Francisco’s Union Square neighborhood, our team uncovered both the obvious and complex issues that helped inform core redesign elements, including our new posting flow, infinite scroll and lightbox features. From start to finish, this product was redesigned by and with our users. So why does our redesign deserve an award? As Fast.Co Design itself noted, what makes our redesign groundbreaking isn’t necessarily aesthetic brilliance or a revolutionary set of design concepts, rather, our innovation in design is derived from the fact that we managed to reintroduce Reddit without reinventing it. We’re confident that the new site is a reflection of our success, and that the new Reddit is a place where anyone can find a home in the vast sea of the internet. Thank you for considering our submission.
What else would you like to share about your design? Why is it unique and innovative?
For the first time in 13 years, Reddit is approachable, inclusive, personal and human. It's everything and simple at the same time. There's no "right" way to use Reddit -- there are thousands. Just take a look at our 138,000 active communities. The redesign intentionally allows for customization, so users and moderators can find/build their homes and communities online. Our team has created the foundation for users to build the Reddit that works best for them, along with the technical building blocks to continue improving it. And when you consider that Reddit is home to 330 million of the internet's most passionate, opinionated, vocal personalities, the year+ worth of work across the entire company gives new meaning to the term "innovation." Web design like this has ever been accomplished (or attempted) before.
Who worked on the project?
PRODUCT Andreas Gross, Group Product Manager Tyler Swartz, Senior Product Manager Karen Scruggs, Product Manager Emon Motamedi, Product Manager Diana Chow, Product Manager JK Ogungbadero, Lead Product Manager DESIGN & RESEARCH Diego Perez, Head of Product Design Benjamin Rush, Senior Manager, UX Design Lauren Kelly, Senior UX Designer Derek Hunten, Senior UX Designer Jonathan Chow, Senior UX Designer Peter Allen, Senior UX Designer Sam Stratton, UX Designer Amulya Aradhyula, UX Researcher Ajit Krishna, Senior Manager, UX Research Tavish MacLellan, Brand Creative Director Dante Orpilla, Senior Designer Christine Villanueva, Illustrator ENGINEERING Anand Mariappan, Senior Director of Engineering Niranjan Ramadas, Senior Engineering Manager Jesjit Birak, Senior Engineering Manager Ryan Schwers, Front End Architect Abhishek Prabhudesai, Senior Software Engineer Filipe Romancini, Senior Software Engineer Jared Strate, Senior Software Engineer Kyle Newkirk, Senior Software Engineer Matt Lee, Senior Software Engineer Rich McKinley, Senior Software Engineer Robert Fruchtman, Senior Software Engineer Zean Tsoi, Senior Software Engineer Adam Winn, Software Engineer Analisa Nazari, Software Engineer Hunter Hodnett, Software Engineer James Edwards, Software Engineer Kelly Hutchison, Software Engineer Mayank Jain, Software Engineer Sam Carow, Software Engineer Saurabh Patwardhan, Software Engineer Shaquille Johnson, Software Engineer Sukhada Kulkarni, Software Engineer Ray Ziai, Product Analytics Engineer Michael the Intern
View the project video: https://www.dropbox.com/s/1i9ipbeq2zzp7rj/Reddit%20Redesign_v4.mp4?dl=0
"Songbird" web design
Why is this project worthy of an award?
Code-named “Songbird”, Stripe undertook a complete overhaul of its visual identity, visual language and content strategy in late 2016. The website introduced a new set of novel interaction paradigms and visual patterns that involved a logotype refresh; a vibrant color scheme; a robust-yet-elegant typographic system based on Monotype's Camphor; and a significant undertaking in illustration and icon design. The simplicity of the design belies the fastidious workmanship and complexity underpinning each landing page—from the large colorful tilted sections breaking the inherently rigid structure of the web, to the next generation technologies that brought Stripe Connect [1] to life, to the interactive icosahedron for Stripe Radar [2]. The state-of-the-art front-end engineering work powering the site received widespread attention for its bold usage of modern web technologies, its ability to display a specific design tailored for different device sizes, and its highly performant animations [3] and near-instant loading times. Today, more than a dozen companies have incorporated aspects (or entire schemas) of Songbird into their web designs, setting a new precedent for the category. [1] https://stripe.com/blog/connect-front-end-experience [2] https://stripe.com/radar [3] https://www.leejamesrobinson.com/blog/how-stripe-designs-beautiful-websites/
What else would you like to share about your design? Why is it unique and innovative?
Beyond its aesthetic value, the web design places a premium on utility and user experience. Every element of the page is meticulously designed to serve a purpose and fit the visual language. For example, Stripe's website doesn't rely on photography to carry the design. On the home page, Stripe chose to redraw their customers' apps in the header instead of simply taking screenshots. This enabled them to avoid unnecessary visual noise, display cleaner images and be exportable in a vector format, ensuring faster loading and flawless image quality at any resolution. This excessive attention to even the smallest of details manifests in many parts of the site. For example, the designers working on the project individually rendered phones and computers in 3D for a cleaner aesthetic; single-handedly designed every single icon to create a consistent look and feel; and used advanced coding techniques to surprise and delight Stripe’s customers. For such a large website with a significant amount of content, it would have been easier to rely on a CMS. However, the in-house team of designers that built the site pushed themselves to design every single aspect of their communication from scratch and polish their design execution to an arguably unreasonable degree. In many ways, Songbird raised the bar on developer-centric web design. As one user noted: “Every other payment provider (at least until Stripe came along) buried the code examples (if there were any) in some detailed spec doc after you had already signed up and were basically already committed. Putting code on the landing page shows that their API is genuinely simple and time saving.” Stripe has long believed that lowering the barriers to commerce is a problem rooted in code and design, not finance. The level of care and rigor put into the Songbird project is emblematic of that philosophy, while the bold design choices represent the simplicity, speed, and sophistication of Stripe’s core product.
Who worked on the project?
Benjamin De Cock - Design Lead, Stripe Philipp Antoni - Designer, Stripe Bill Labus - Designer, Stripe Malthe Sigurdsson - Head of Design, Stripe
View the project video: http://sharedfil.es/5uoa7ncs8r.png (Project Image)
