CEO Council

Wall Street Journal – 2021

My role

UX/UI Design Lead

Context

WSJ’s now virtual flagship event, done on a deadline

The Wall Street Journal’s CEO Council is one of WSJ’s most prestigious events. It’s an exclusive forum where senior business leaders and policy makers gather to discuss the issues of the day, traditionally hosted in Davos and other in-person venues. COVID had made that impossible. Cheerful Twentyfirst, who had run the in-person event prior to COVID, was asked to oversee the virtual edition for summer 2021. I led the design and front-end development of the platform.

Problem

A demanding audience, a tight deadline, and a brand to protect

Recreating the CEO Council virtually meant designing for an audience with little patience, and translating an event whose most valuable element, networking, into a format that did not naturally support it. Three constraints shaped the project:

  • A time-poor, high-status audience. Attendees were senior executives whose time was extremely valuable. Reducing friction at every opportunity was critical.
  • Networking as the centrepiece. A significant part of why people attended in person was the chance to meet other senior leaders. The virtual edition needed to make that feel like a genuine reason to attend, rather than a weak imitation of the in-person experience.
  • WSJ-grade polish. This was one of WSJ’s flagship events. Existing virtual event platforms, designed for trade shows and webinars, could not carry the brand, and a generic experience would have read as a downgrade rather than a substitute.

Design

Less but better

“Less but better” was the guiding principle throughout the designs. The audience did not need more features. They needed an experience that respected their time and matched the calibre of the brand. Every design decision adhered to this mantra.

  • Physical metaphor as navigation. The platform was structured around two named spaces: the Auditorium for talks and Q&A, the Lobby for networking. The names made the structure intuitive without explanation, and quietly carried the sense of occasion the CEO Council brand required.
  • Page fold was critical. Above the fold on every page sat the single thing users were most likely to want, whether that was submitting a question in the Auditorium or the live attendee count in the Lobby. Supporting content sat below. The page architecture answered “why am I here right now” before users had to ask it.
  • Networking worth showing up for. A hero animation in the Lobby featured attendees’ headshots and a live count of users online, paired with a direct call to action. The brief was engagement, and the design treated networking accordingly.
  • Co-design with WSJ stakeholders. Rather than presenting finished work for sign-off, I ran the design process collaboratively with WSJ’s team. By the time decisions were made, stakeholders had been part of making them, which meant buy-in with WSJ leadership was less challenging.
Wireframe of the Welcome page showing key page elements in relation to the page fold on desktop.

Wireframe of the Welcome page showing key page elements in relation to the page fold on desktop.

Animation of the Welcome page (landing page) being scrolled.

Wireframe of the Lobby page showing key page elements in relation to the page fold on desktop.

Wireframe of the Lobby page showing key page elements in relation to the page fold on desktop.

Animation of the Lobby page (social area) showcasing on-page UI motion.

Implementation

Fast, documented, built to be reused

The deadline was very tight for this project; Eventfinity’s platform was technically robust but had no UI scaffolding out of the box. This was a double-edged sword: whilst it empowered me to design from a blank canvas, it meant a lot more work was required to implement the design. I led front-end development alongside John Speck at Gramercy Tech, drawing on patterns I had refined across Cheerful Twentyfirst’s previous virtual events. Gramercy Tech also provided back-end development resources.

  • Utility classes, SCSS and variables. A well-architected utility class system kept styling consistent and allowed new pages to be built quickly without each one requiring bespoke CSS. Tokens lived as CSS variables, so any change propagated cleanly.
  • Documented for handoff. The code was documented as we wrote it, on the assumption that it would outlive the project. That assumption proved correct. WSJ went on to reuse the designs and code for subsequent events.
  • Built on prior work. By this point I had built several event sites for Cheerful Twentyfirst and was fast at it. The CEO Council benefited from patterns and decisions that had already been pressure-tested on smaller events.

Impact

A huge leap in user experience

The event landed well. Engagement from attendees was strong, and WSJ noted it was a significant step up from their previous year’s virtual edition, a project Cheerful Twentyfirst had not been involved in. The platform went on to be reused for further WSJ events, including the CFO & COO Council and the Technology Council.

Wireframe of the Auditorium page showing key page elements in relation to the page fold on desktop.

Wireframe of the Auditorium page showing key page elements in relation to the page fold on desktop.

Animation showing how a question would be asked during a Q&A session at the event on the virtual auditorium live-stream page.

Lessons learned

Restraint, co-design, and documentation

The project reinforced a set of principles I have applied to most work since, particularly around designing for senior audiences, working with stakeholders during design rather than presenting to them at the end, and treating handoff as a design problem in its own right.

  • For a time-poor audience, focus and execution are everything. At the time, most virtual event platforms lacked product direction; many features existed simply because the technology allowed it. The CEO Council worked because it asked “should we” rather than “can we” at every decision point. For an audience whose time is the most valuable thing in the room, that discipline is the project.
  • Co-design is a delivery tactic, not only a research one. Bringing WSJ stakeholders into the design process meant sign-off was not a hurdle looming over the process. It was distributed across the project. On a deadline this tight, that compression of the approval cycle made the difference.
  • Documentation is always more valuable than expected. Writing code that other developers could pick up turned a one-off project into a platform WSJ reused for years. The work outlived its original brief because handoff was treated as part of the design, not an afterthought.
  • Distributed teams need design to carry more of the conversation. Working with a US-based development team from London meant time zones absorbed most of the synchronous hours. Thorough status updates, documentation, naming, and consistency were vital.

“A huge thank you for the delivery of yesterday — we are getting endless thanks, high-fives and praise from all parties — internal and external.”

Angus Peckham-Cooper, Vice President, Global Events at the Wall Street Journal