Dialogue Theory

American
Clean
Power

Associations / Nominee
Dialogue Theory

Associations

"While member feedback — incorporated continuously — led to an ongoing refinement of our initial concepts, one element that was preserved in the final experience was our collective desire that the interface felt like a window — not an obstacle — to a cleaner, smarter, more prosperous future." Dialogue Theory
image description

Q: Can you describe your project and the concept behind it? A: American Clean Power was formed to unify the US renewable energy sector at an urgent crossroads and provide the tools necessary to better compete with fossil fuels: an always-on industry network, data visualization and interactive storytelling, a research and education center, and a platform for communicating with policymakers and the press. Our overarching goal was to combine design, strategy and technology into a cohesive and holistic whole.
image description

Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process? A: That ACP was a new brand gave us freedom to explore ideas without legacy baggage, as well as to develop a visual language from the ground up. While member feedback — incorporated continuously — led to an ongoing refinement of our initial concepts, one element that was preserved in the final experience was our collective desire that the interface felt like a window — not an obstacle — to a cleaner, smarter, more prosperous future.
image description

Q: What influenced your chosen technical approach, and how did it go beyond past methods? A: Users did: members were tremendously diverse in their needs, and internal users needed tools that simplified complexity. A rich experience also made performance optimization crucial. This usually means a focus on JavaScript or images, but Harry Roberts influenced us to write more performant CSS (and less of it!), which meant moving away from nested selectors and preferring utility classes that were heavily inspired by UIKit and named BEM-style.

When did you experience a breakthrough or an "a-ha" moment during this project?

A stakeholder council was assembled from a diverse cross section of member companies to provide feedback throughout the entire design process. This generated a sequence of epiphanies — as opposed to a singular ""a-ha"" moment — that helped distill our wide range of concerns into a cogent experience. One powerful realization — amidst shifting political and societal realities — was that ours had to be cast in the light of incumbency and arrival.

Watch

image description

Q: What web technologies, tools, and resources did you use to develop this? A: American Clean Power is built on WordPress. We used a host of tools like GreenSock’s GSAP for motion, instant.page for just-in-time preloading on hover of links, BackstopJS for visual regression testing and SpeedCurve for performance testing. The Netflix-style carousels in the Resource Library use eager loading to preload results ahead of time via AJAX and core WordPress pagination. We used Adobe XD to build wireframes and prototypes.
image description

Q: How did the final product meet or exceed your expectations? A: The American Clean Power Association was born during a critical moment in the global energy transition, when the unification of the renewable energy sector was not just possible but essential. Seeing thousands across the industry use the site's tools — along with local, state and federal policymakers visiting to educate themselves — we realized we'd achieved our goal of amplifying clean power's ability to compete with incumbent energy sources.
image description

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this? A: Technologies that enable creativity and collaboration have just gotten so good. We started this project — along with dozens of member-company stakeholders and communications partner Lot Sixteen — just as COVID-19 was beginning to fundamentally change work. We not only reduced the number of tools and technologies needed to provide a rich experience — but also created something useful and beautiful with people from all over the country.