TED Digital Program Walls

UX Engineering
An tool that TEDx organizers worldwide use to submit talks to TED for publishing.

TED Conferences

May 2021 - August 2021

Team Size: 2
What: At TED's first flagship in-person conference since the pandemic, dynamic digital screens were installed to show speaker and event information.

My role: I designed all the screens using TEDMonterey 2021's theme branding in Figma and led front-end development using Typescript, HTML and CSS.

Conference photo credits: Gilberto Tadday


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".

Understanding the Branding

The Case for Optimism. Filled with bright colors and interesting shapes, TEDMonterey '21s style guide was bold and striking:

Context: Illustrated paths specified in the style guide
Context: Logos using all the colors in the branding

Visual Design

I began by experimenting with different flourishes:

Experiments with the "noodles" and creating frames using them

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:

Different variations for "Now Speaking" screen
Different ways to display the "Up Next" section and considering edge cases

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:

Designs for displaying a scenario where multiple speakers give a talk together and more are upcoming.

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.

Progression for the "calendar" style display

Since the screens were set up in pairs, I also had to consider how each pair would complement each other:

The complete final spread of screens


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.

At the Conference

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.

<--- View Previous
Back to Top
View Next --->