A smarter streamlined AdCouncil.org

 
0_Hero_7.jpg

DIGITAL DESIGN SYSTEM

THE AD COUNCIL

 
 
0_3 devices_overlap_w_shadow.jpg
 
 
 

THE PROJECT

The Ad Council is a national non-profit that brings together the brightest minds in the marketing, media, advertising and tech industries to create change around the most critical social issues facing our country.

The organization initiates, produces and activates communications campaigns that drive awareness and behavior change, creating a lasting impact on American life. The content they produce literally saves lives, igniting new ideas that increases the health, education, and safety of our nation.

Carbon Five was approached by the Ad Council with a pressing need to update an outdated design system and make its omni-channel platforms cohesive and intuitive

 

MY ROLE

The team consisted of two designers: one primary design lead and myself, a content strategist and project managers. We worked collaboratively with the Ad Council team throughout the process.

I paired regularly with the design lead in ideation sessions and performed tasks such as: wire-framing features, creating icons, setting up typography and symbol libraries and adding polish to the UI. I also led the scaling and transference of the final web designs to tablet and mobile formats so that they could be uploaded to Zeplin for the Ad Council’s development team. Lastly, I organized the physical assets for our successful presentation to the client.

 

 

 

CHALLENGE

 

A DISJOINTED EXPERIENCE

The Ad Council actually consists of three different websites, making the user experience disjointed. One of our main goals was to unify the sites into one user friendly cohesive experience.

 
 
 
0_3differentsites_joined.jpg
 
 
 
 
Hats.png

Other goals included: extending the Ad Council brand language onto a more dynamic and robust web identity, redesigning AdCouncil.org and developing a new design system.

Above all, our primary objective was to effectively convey the emotional impact of a great organization to a wider audience of potential partners.

 
191E22_dark grey.png
 

PROCESS

 

SITE MAP

 

Working closely with the content strategist and primary stakeholders, we conducted activities such as experience mapping and card sorting. Analyzing the results from numerous user tests, we were able to create a new information architecture that coalesced previously sprawling content into one cohesive site. 

 
 
 
AC_sitemap_061019.png
 

PROCESS

WIREFRAMING

 
 
0_wireframe.png
 
F0F0F0 BG_lt grey.png
 

PROCESS

 

SCALING

The redesigned site needed to work effectively across the three primary platforms: desktop, tablet and mobile. Working closely with the lead designer’s work on the desktop layout, I determined ideal proportions for tablet and mobile. Much of this work was based on a grid system established after analyzing many of the Ad Council’s brand assets such as brochures and even their office environment.

 
 
 
scaling_all3_transparent.png
 
0_3 devices.png
 
 

DISCOVERY

BRAND EXTRACTION

An immersion into the Ad Council’s dynamic imagery, modern physical spaces and visual language, allowed us to establish a broader visual palette and design system that stayed true to the organization’s core ethos and brand identity.

 
 
 
Inspiration collage.png
 
F0F0F0 BG_lt grey.png
 

PROCESS

 

BRAND GUIDELINES

I helped to establish the design system using best UI practices in order to provide guidelines and rules for the Ad Council’s team of developers. Because of the sheer amount of redesigned content, establishing a strong brand system helped us avoid getting bogged down by pixels and instead focus on the experience. It also enabled us to work efficiently in representing all pages across all platforms in a limited time frame.

I am a strong advocate for design systems so that teams can quickly implement the redesigned product system.

 
 
 
0_color.png
 
0_icons.jpg
 
0_SG_typography.jpg
 
0_SG_buttons.png
 
 

PRODUCT

TABLET SCREENS

 
0_tablet screens_centered.png
 
 

MOBILE SCREENS

 
0_mobile screens_centered.png
 
191E22_dark grey.png

FINAL PRESENTATION

 

Creating large format print-outs of the new the Ad Council design system, user personas, insights and guiding principles gave the final presentation a sense of urgency and polish.

 
 
 
0_presentation.jpg