Crafted with Code Honoree: Exclusive with Ferdi

Author: WebbyAwards | CM Contributor: Ferdi Wieling | Critical Mass

Q: CAN YOU BRIEFLY DESCRIBE YOUR PROJECT AND THE CONCEPT BEHIND IT?

A: Coming out of the pandemic, the world had changed. Our agency had changed. Critical Mass had traditionally been more reserved— demure, even—which we could get away with in the room. Now a digital-first agency in a digital-first world, we felt permission to reintroduce ourselves a little louder. Bolder. For a global agency to show up as more than the good Canadian neighbors, it was about time. Why? Because digital is our home.

Q: ONCE YOU SETTLED ON YOUR IDEA, WHAT INFLUENCED YOUR DECISION ON THE CHOSEN TECHNICAL APPROACH? HOW DID IT DIFFER OR GO BEYOND APPROACHES YOU’VE TAKEN IN THE PAST?

A: In this agile sprint, our biggest conversation was about performance. Prioritizing a seamless experience for all versus a snazzy experience for a few became our technical north star. With that comes a layering of decisions and negotiations. How should it feel when visitors scroll—a glossy WebGL feel versus native scrolling on a trackpad? What looks better versus what performs better is a different collaboration than: Here’s the layout. Go build.

Q: WHAT WERE SOME OF YOUR BIGGEST LEARNING AND TAKEAWAYS FROM THIS PROJECT?

A: Being true to our values is essential. And we walk the walk. A digital brand needs to be digitally accessible. That means learning how vital accessibility is, for example, to our color palette and adjusting to fit. As a brand expression, creating a representative experience for 1,500+ experts is the first and most vital starting point for creating brand love—something worthy of their pride.

Q: WHAT WEB TECHNOLOGIES, APPROACHES, TOOLS, OR RESOURCES DID YOU USE TO DEVELOP THIS EXPERIENCE (WORDPRESS, HEADLESS, AI, SUBLIME TEXT, HTML5, ADOBE XD, ETC)?

A: We didn’t want to go down the road of over-engineering, so the codebase itself needed to communicate simplicity, clarity, and performance. To achieve this, we chose the Astro Framework, Vue, and GSAP. All 3 provide powerful yet clean implementations when compared to other libraries. Everything else under the hood is well crafted vanilla JavaScript and simple CSS. We are proud of how the site feels for a user and our stellar Lighthouse scores.

Q: HOW DID THE FINAL PRODUCT MEET OR EXCEED YOUR EXPECTATIONS? WHAT RESULTS DID YOU SEE?

A: This project does not oversell itself. As such, it was well received as accurately representing those who work in a modern, bustling agency. For an agency website, it’s rare to welcome with no BS—instead of a bold and human welcome. This uncommon balance comes through between confidence and arrogance; not trying to do too much from technical to copy to design; and showcasing without pretense. The result is polished—a quiet confidence that’s real.

Q: WHY IS THIS AN EXCITING TIME TO CREATE NEW DIGITAL EXPERIENCES? HOW DOES YOUR TEAM FIT INTO THIS?

A: It’s not an exciting time. It’s a terrifying time. Stakes have never been higher. Technology has never been more disposable and misunderstood. Client expectations? Never been greater. Any knowledge-share on the latest generative AI is outdated by the time we finish scheduling the meeting. And yet! —In the face of volatility as the new industry standard, we remain responsive. Moving. Reinventing. That’s exciting. And worth phoning home about.

Q: HOW DID YOU REACH A GOOD BALANCE OF YOUR OWN CREATIVE IDEAS AND TECHNICAL CAPABILITIES WITH A FAIR REPRESENTATION OF THE CLIENT’S BRAND?

A: Staying on the same page, super skilled and real—we made decisions with inclusion and range in mind. We queried the agency for GIFs, made-up words, even “what’s out your window?” That community generated content helped define tone, even asset gathering (down to images of moose) which kept us far away from stock-like feels. Likewise, you’ll find a multifaceted family-portrait wall of execs that shows personality range with pixel-perfect precision.

Q: WHAT DID YOUR INITIAL MOODBOARD, WIREFRAME, OR PROTOTYPE LOOK LIKE? HOW DID THOSE IDEAS CHANGE THROUGHOUT THE DESIGN PROCESS?

A: We began with a one-pager that we built as a system and versioned. We pulled from our brand language in development: The first page is our Keynote cover, plus a menu. This window system is a portal for our 1,500+ perspectives. With a nod to our Canadian roots, the window-stripping and color blocking were in part inspired by the Canadian flag. The strong intention behind copy stands out with balanced hospitality: punchy, spare, and jargon-free.

Critical Mass

Read full article here: https://www.webbyawards.com/crafted-with-code/critical-mass-website/?v=2023