A Clearer Path to Impact for AdCouncil.org

The Ad Council is a national non-profit that unites experts from marketing, media, advertising, and tech to drive change on crucial social issues. They urgently needed to modernize their outdated design system and ensure their omni-channel platforms were cohesive and intuitive.

SUMMARY

UX Designer 

• UX Research
• Wireframing 
• Visual Design

MY ROLE

TASK AT HAND

The Ad Council is committed to creating a society where every person can thrive. To support this mission, we were tasked with transforming their brand identity into a dynamic and robust web presence by redesigning AdCouncil.org and developing a new design system. Our primary goal was to enhance the emotional impact of their message, reaching a broader audience of potential partners through a unified user experience.

Our design was successfully shipped and launched in late 2019.

Experience the Transformation of The Ad Council

Visit the Live Site

THE APPROACH

A Disjointed Experience

We audited the previous Ad Council site and discovered it was split into three separate websites, resulting in a fragmented user experience. Our primary goal was to integrate these sites into a single, user-friendly platform.

Coalesce + Progress

Working closely with the content strategist and primary stakeholders, we conducted experience mapping and card sorting activities. By analyzing the results from numerous user tests, we gained a deep understanding of business goals and created a new information architecture that transformed previously sprawling content into a cohesive site.

User Insights

Interviews with key stakeholders gave us insight into the questions posed by various potential Ad Council partners and contributors when considering the site experience. User personas were created based on some of the interviews.

Wireframing

In redesigning AdCouncil.org, we prioritized a seamless and intuitive user experience that aligns with the Ad Council’s mission to educate, unite, and uplift. Wireframing was crucial, serving as the blueprint for our design strategy. This solid foundation informed the new design, guiding users effortlessly through impactful stories and initiatives, fostering a deeper connection with the cause, and encouraging meaningful engagement.

Responsive Design

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.

Tablet (768px)

Mobile (375px)

Extracting the Brand DNA

To create a new visual digital identity that aligned with their recent brand refresh, we closely examined every facet of their identity. We selected colors, shapes, typography, and imagery to craft a design that is both modern and invitingly human.

Brand Guidelines

I helped establish the design system using best UI practices to provide guidelines and rules for the Ad Council’s team of developers. Given the extensive amount of redesigned content, a strong brand system allowed us to focus on the overall experience rather than individual details. This approach enabled efficient representation of all pages across platforms within a limited timeframe.

Advocating for design systems ensures teams can quickly implement redesigned product systems, promoting consistency and efficiency.

Key Takeaways

As an experience design intern at Carbon Five, I was fortunate to work on an end-to-end project for a remarkable organization dedicated to improving humanity. Our talented team, which included a design lead, a content strategist, and project managers, collaborated closely with the Ad Council team throughout the process.

This was my first experience working on a holistic design system. I paired with the design lead in ideation sessions and handled tasks such as wireframing features, creating icons, setting up typography and symbol libraries, and refining the UI. I also led the adaptation of the final web designs to tablet and mobile formats for upload to Zeplin for the Ad Council’s development team. Additionally, I organized the physical assets for our successful client presentation.

Working for a non-profit like the Ad Council was tremendously fulfilling. Their mission to use communications to address social issues at scale was amplified through the redesign, making their message clearer and more impactful than ever.