Showing the world that DuPont is the preeminent thought leader in innovation.
Project: Responsive Web Design, Design Systems
Team: Erin Lynch, Gene Lu, Rosemary Douglas, Terrence Ma, Yzabelle Munson, Bernise Wong, Tom Varacchi
For a brand that's been around for more than 200 years, people may be familiar with DuPont but are not as aware of what and how much they actually do. In the past, a previous merger with Dow Chemical Company has brought on a tainted brand perception as a chemical company among its consumers. But with its recent separation from Dow, DuPont asked our team at R/GA to shift their brand perception among its target audiences and show how their essential innovations are transforming industries and everyday life right now.
How do we bring the corporate brand purpose—empowering the world with the essential innovations to thrive—to DuPont.com?
Reclaim DuPont's position as an innovation leader by educating its audience on all the ways DuPont's technology based differentiated materials, ingredients, and solutions transform industries and everyday life.
I worked alongside Gene and Rosie, the Creative Director and Senior Experience Designer, to establish the experience and look-and-feel of the new corporate owned pages.
There were 5 main audience types we had to keep in mind when designing for the new corporate site.
Audience interaction with the current site revealed pain points around consistency, quality, and discoverability.
What We Found
Elements across pages are inconsistent causing a lack of visual uniformity across the site.
What We Did
Created a component library housing over 20 customizable components for consistency and reusability purposes.
What We Found
Long-form and other in-depth corporate content isn’t presented in a digestible and appealing way.
What We Did
Made corporate content relevant by creating a landing page that supported the campaign along with 5 immersive articles that showcased DuPont initiatives impacting our everyday lives.
What We Found
Navigation can be overly complex without a clear hierarchy and consistent labeling.
What We Did
Flattened the navigational structure to keep information within three or four levels of hierarchy and organized information into more intuitive categories.
The following principles were created to help guide the creative team to deliver on the promise of a redesign.
Disclaimer: The team redesigned over 60 new pages throughout the duration of the project. The following highlights 3 core experiences created based on the insights above.
1. Allowing DuPont to Design at Scale with A Component-Based System
Common elements across DuPont's corporate pages show major inconsistencies and makes for a bad user experience.
Why A Component-Based System
Creating with components makes it easy to design at scale and creates a more uniform look-and-feel across the site. Not only is this beneficial for designers but from a tech perspective, this shortens production time and frees up more time for code review and testing.
Our team analyzed the pages prioritized for redesign and listed out the common elements used throughout the pages. From there, we utilized the MoSCoW method ('Must haves', 'Should haves', 'Could haves', 'Won't haves') to determine which components we were going to create.
What We Delivered
Over the course of 3 sprints, Rosie and I created over 20 unique components for 60+ pages redesigned for DuPont referencing best-in-class examples on the web.
In addition, we created a component directory for the development team to reference while coding. The directory included prototypes, functional requirements, and authoring guides for each component to make sure that the code reflected the designs.
In the end, to ensure a proper hand-off to the DuPont team, we worked with our visual team to create component breakdowns and added them to to the DuPont.com Visual Playbook.
What I Learned
Design to development handoff is hard. Working with the development team to implement designs into the content management system was harder than expected. In addition to the team being a third-party, the developers had a difficult time deciphering what file was the source of truth when it came to final designs. We realized that we had shared several documents that held information about the components. Ultimately, developers referenced a Zeplin file we created that included all the specifications needed and that'll be the way to go the next time we are in a similar situation.
2. Enhancing the Quality of Content with the Campaign Landing Page and Immersive Articles
Content about DuPont's innovations lacks appeal and can be hard to digest, ultimately affecting the engagement on the site. There was not an existing space in the site where DuPont could showoff their latest innovations.
Introduce a visually engaging landing page for the corporate campaign that pays off on the idea of inventing a better now. The experience and articles that live on the page will showcase DuPont's initiatives that ladder back to its broader pursuits.
The Campaign Landing Page
We called the campaign landing page "n:ow at DuPont". N:ow at DuPont serves as the editorial, thought leadership hub on DuPont.com that houses information about DuPont's essential innovations. This page houses the campaign video, 5 immersive articles, and other related articles.
Integrating Stories into the System
Based on the research we gathered from our clients, we chose topics that spanned the pursuits and business units for our immersive stories. Each article is accessible through the landing page and its own unique URL/page. In addition, each story contains an interactive component providing a closer look into how a featured DuPont technology works.
Users are driven to both the campaign landing page and the immersive article pages directly through the homepage and paid media.
What I Learned
Stories and systems are always better together. It is no doubt that DuPont's innovations are incredible, however, if it is not integrated and presented in a relatable way to the consumer, it will most likely go overlooked. Creating the n:ow at DuPont page felt like it opened up DuPont's brand to be for more than just the B2B audience but one for even someone like me.
3. Improving Discoverability with the New Navigation
The previous navigational structure was haphazard. Some content was located over six levels deep within the hierarchy. Below is an example of the old navigation.
What We Proposed
Flatten the structure to keep information within three or four levels of hierarchy and organize information into more intuitive categories relative to content types and key taxonomy vocabularies.
Defining the Navigation Structure
We worked with our clients to prioritize what content should be in the updated navigation based on information different audience types are searching for.
From there, we provided two options with the main difference being the way users navigated through Solutions and Option 1 (left) including Markets in the header.
Option 1 was favored unanimously for the clarity provided by splitting the entry-points across two primary navigation items. However, Markets remained a confusing term.
Option 2 felt overly complex, the intended interactions weren’t easy to understand and the display was overwhelming.
This option retains two entry points as proposed in Option 1, but Markets was replaced with Industries. In an effort to keep the top navigation less cluttered we recommended moving some items to the footer.
Brands & Products
Provides an entry point to brand and product category content.
n:ow at DuPont
Houses the new DuPont launch campaign, "A Better N:OW", along with a series of immersive articles.
Provides an overview to DuPont as a company including values, leadership, pursuits, and innovations.
Links to the hub for all news content, and quick links to popular resources (such as Position statements).
Gives an overview of DuPont careers, available career paths, locations, benefits, and paths to deeper sections.
What I Learned
Understand the brand voice for it will guide how the site structure is designed. The exercise where we laid out different navigation structures based on the different user groups was crucial in the way we prioritized what ultimately went on the navigation. It allowed us to present different angles to the client and confirm what DuPont wanted to communicate.
The End Result
Together with the campaign team, our creative team integrated the story of "A Better N:OW" into a full modular design system. We created over 20 customizable components that make up over 60 page layouts throughout the site, allowing DuPont to design future pages with ease.
Key Metrics (last updated on October 15, 2019)
Since the launch of the campaign on June 1st, 2019, the n:ow website campaign experience has been exceeding benchmarks and driving stellar visitor engagement with 293.6K total website visits (51% of the campaign goal) and 2.24 average page views per visit (8% above the old DuPont.com average of 2.08).
Most importantly, DuPont is being recognized as an Innovator, with a shift in news coverage surrounding Pursuits. To date, there has 1.6K total media stories (up from 482 total stories in 2018).
In The News
Little Black Book / DuPont Wants to 'Invent a Better N:ow' with Groundbreaking Campaign