TEDMonterey '21 was the first in-person flagship conference that TED hosted since the pandemic. As a summer intern, I had the opportunity to work on digital products for the conference, one of which was the digital program wall.
At each conference, large TV screens dynamically rotate through content ranging from info about current speakers to guiding attendees to the right event in the schedule. Each conference also has its own theme and branding on which I had to base my work. This year's theme was "The Case for Optimism".
The Case for Optimism. Filled with bright colors and interesting shapes, TEDMonterey '21s style guide was bold and striking:
.png)
I began by experimenting with different flourishes:
Design variations and progression for the "Now Speaking" page based on feedback from different stakeholders such as the director of the conference and the branding team:
I also had to keep in mind different edge cases, since the program was automated and dynamic, there had to be a foundational structure in place for all possibilities:
I iterated over different variations to design a way to indicate to viewers the different states of the sessions (current, past, upcoming) finally settling on a "calendar" style view that is similar to how Apple Calendars or Google Calendars are set up.
Since the screens were set up in pairs, I also had to consider how each pair would complement each other:
As the lead front-end engineer on the project, I also had to realize my designs to production. The existing code base was convoluted and all the people who had worked on it had left the team by then.
I led the development using TypeScript. We had to solve several challenges including:
Interacting with TED's extensive Event Management System with hundreds of thousands of TED talks and ensuring accurate and efficient API calls.
Syncing content real-time to make it dynamic based on the local time of the conference. This made testing especially difficult since we were essentially creating an environment when the conference was happening before it actually was.
Styling and creating templates for a wide range of content. The stakes were high for an event of this scale and the shipping quality for our product left no room for errors. Pixel-perfection was the name of the game.
Dynamic color schemes. We wanted colors to automatically update for each of the "illustrated paths" aka noodles in the design. To accomplish that, we created customized components and wrote an algorithm that could change colors while ensuring enough contrast for accessibility and an aesthetic pairing.
Here are some shots of the program walls live and in production:
The digital program walls are an integral experience within the TED conference since they help orient attendees and provide the most up-to-date information on what's happening. Designing and developing this project end-to-end was a challenge that made me level up my skills from typography to typescript.
.png){kind=small}