.

The new TED Talk page: A brief history

Posted by on Apr 15, 2014 in Design philosophy, Lessons learned, Process

talkpage-post-leadphoto

The life of a TED Talk begins when a speaker shares their idea on the TED stage, to a live audience. From that moment, the idea spreads through conversations — and online video. While TED Talks are seen through many channels (e.g. YouTube, Netflix, Roku, native mobile apps), we can best offer the experience with context on TED.com.

When you visit TED.com, chances* are you’re viewing the talk page. It’s the page often on the other side of all those tweets and Facebook posts. It’s also many users’ first introduction to TED.com and even TED itself. This page is viewed on hundreds of different devices, in countless conditions and settings. It needs to provide a solid, meaningful and engaging experience for a commuter in Bangkok, an accountant drinking their morning coffee in Vancouver, a Peruvian student learning English, or a researcher in India.

With such a broad range of use cases, the design has to be as close to ‘right’ as possible. That’s why we spent months thinking about the talk page — designing, constructing, deconstructing, iterating and testing it.

Our design intentions

We formed a set of goals early in the design process. These goals reflected both the direction TED was moving as an organization, and what we learned from listening to the needs and preferences of our user community. Among the list of priorities that emerged…

An upgraded video experience. Larger, more theatrical and built to respond to varying bandwidth conditions.

Killing autoplay. To let you decide when to start watching the talk, and therefore when audio would pour out from your computer’s speakers.

Saving talks to watch later. A way to easily mark talks you want to watch when you have more time.

Offering more content. Presenting additional ways to learn more and dig deeper into an idea.

Doing something in response to a talk. Many talks inspire action. We wanted to offer ways users could take the next step.

Early designs

With our compass set in a general strategic direction, we explored many design directions with our partner, HUGE. We began testing what we felt was a strong initial design candidate.

talkpage-original

We liked it for a few reasons. First, it presented a lot of content, which we thought would add context to the idea behind the talk. Second, it was executed with space economy that carved content into sensible chunks. Third, it collapsed nicely into a tabbed UI on mobile screens.

Test users understood the primary content and purpose of the page: Watching a TED Talk. After discovering some issues after just five testers, we made rapid tweaks to the prototype and continued with the sessions. We were able to achieve small, incremental improvements.

But the thing about testing, done effectively and with focused methodologies, is that it nearly guarantees both a surprising and humbling experience for product designers. That’s what happened. We were surprised at the unanimous delight people expressed when playing with the video dock, a feature that continues to display a small version of the video as you scroll up and down the page on desktop screens.

talkpage-dock2

Something we worried might annoy users was almost universally adored. But then we were humbled. A serious issue was recurring: Users were overwhelmed and disoriented by the three-column content below the video area. A page that started out strong and with purpose quickly deteriorated into chaos as users tried to absorb content down the page.

We iterated, tweaked, used some design tricks and visual devices. We even shuffled content — but our efforts simply didn’t produce the results we needed.

Course correction

Sometimes when you spin your wheels long enough without enough measurable progress, you have to consider sunk costs and explore new options.

We kept what we know we were getting right: the video player and its associated features. But we abandoned the three column content layout from the early design in favor of a more stacked content structure. “Pancakes” as we call them.

talkpage-wire

Why did we take this direction? There were a few things we needed to gain greater control over…

Flexibility of content type and volume. Many TED Talks have a wide range of editorial and other companion content that directly enhances the user in absorbing more of speaker’s idea. Other talks may not have any of this. So any design we adopted must be structured to physically scale up and down this way. Columns are rigid. Pancakes can be added and taken away and the page still holds together. Pancakes also make content placement in responsive design conditions more predictable.

Flexibility of content over time. As TED Talks are published, things continue to happen. More content is created both on and off TED.com. The speaker gives interviews. Articles are written about the talk or topic. The restructured design better supports content additions over time.

Narrative control. Grouping similar content in stratified stacks lets us control the narrative of the page as you travel through it. It better aligned with the content prioritization we outlined at the outset of the project. We intended to guide the user’s experience of a talk: Watching & sharing it, learning more about the idea, taking action if so inspired, and discussing the idea with the TED.com community. Discovering other content (tunneling) was also an important mode offered along this arc.

It’s perhaps more instructive to show the final result rather than every iteration (trust me, there were a lot) along the way. Here’s what the talk page looks like today.

talkpage-current

Continuous design

We think of the talk page in its current deployment as more of a mile marker than a finish line. Design is a continuous exercise of listening and responding to feedback, tests, data, and our own instincts. As a result, features or content will likely be modified, added, or even removed altogether. The one yard stick we use for our design decisions, however, is the question: Is what we’re doing in service of spreading ideas? If the answer is no or unclear, it usually doesn’t survive the brainstorm phase. If it’s yes, it’s likely to get resources and deeper thought in the the spirit of TED’s mission.

*The talk page accounts for about 60% of all page views on TED.com

Aaron Weyenberg

Aaron Weyenberg is UX lead at TED. He started adding $1 to a jar on his desk every time he eats at Chipotle. There’s $37 in there right now.

Twitter: @aweyenberg