TED, the blockbuster nonprofit dedicated to “ideas worth spreading,” set out to create the best video experience on the web, bringing remote viewers as close as possible to the experience of attending a live, in-person TED Talk. After an exhaustive search for the right design partner, TED chose Huge to help with the first major redesign of its website since it launched in 2007. With an enormous global audience — TED marked one billion video views of its talks in 2012 — the organization wanted to refresh its web presence without disrupting an already best-in-class user experience.
Building trust through close collaboration.
Collaboration was our guiding principle from the beginning of the project. We worked side by side with TED’s design and UX teams to rapidly prototype ideas and designs for the new site. They had the keys to our office in Brooklyn, and we developed a trusting working relationship that allowed us to keep improving the product as we created it. We tested each iteration in our on-site usability lab to ensure that we were addressing the myriad needs of TED’s dedicated and diverse users (TED talks have been translated into nearly 100 languages). Over the course of the year-long engagement, we developed and tested over 70 prototypes in quick succession.
Giving the best ideas the best experience.
The most extensively prototyped page that we designed was http://www.ted.com/talks. Not only do TED Talks have a diverse viewership, with some users searching specific topics while others simply kill time, but they feature an expansive range of topics. Our redesign also accommodated digital viewing habits, which often involved consuming several streams of content simultaneously. For example, we employed a docked video player when the user scrolls down the page to allow the user to view more content about the speaker or read comments while not missing a second of the Talk itself.
The content on the Talk pages include calls to action related to the speaker’s message, to build connection between the viewer and speaker and emulate the participatory feeling of being at the Talk in person. Viewers can also track their influence after sharing content, which encourages them to extend the conversation on social and revisit it later.
We simplified the navigation to include five simple and action-oriented items: Watch, Read, Attend, Participate, and About. Selecting Watch allows the user to browse Talks, or to pick the “Surprise Me” option to learn about something new. On these browser pages, the goal was to let users discover without feeling overwhelmed. We simplified the process of narrowing down what to watch by installing filters that sort by Topic, Language and Event.
Talks across all devices.
TED.com was built before the iPhone came around, so responsive redesign was key, but we didn’t adopt a strictly mobile-first process. To ensure accessibility across devices, we designed for the smallest screen size for each breakpoint, working through all three simultaneously. After designing for the smallest viewport, it was easy to scale upwards. Then we conducted usability testing on desktop to optimize the user experience for what analytics showed was still the most-used device. Even on desktop, however, we ensured every call to action was user-friendly with a touch screen.
After the redesigned TED.com was launched in March 2014, Huge was tapped for an additional content strategy project for TEDx, the branch of the organization that helps people independently organize their own local conferences. The previous TEDx website was complex and text-heavy, with multiple navigations and modules. Our goals were to surface the important content and make the site more user-friendly for conference organizers as well as attendees. One key finding from our user research was that TEDx organizers are extremely committed to the conferences they plan and eager to follow TED’s guidelines to make their events successful. They’re also as passionate about their own fields as they are about learning about other topics. Knowing this, we made the guidelines clear and easy to find, and incorporated inspirational elements to make the organizers feel they were part of something bigger.
Ideas still spreading.
The redesign of TED.com was widely celebrated for its usability. It was nominated for Redesign of the Year by The Net Awards, and TED.com along with TED-Ed won 11 Webby Awards in 2015, including the categories “Use of Mobile Video” and “Education and Discovery.” It also won the People’s Voice award for “Events & Live Webcasts.” TED.com has continued to reach more and more audiences, around the globe, and on any device — TED Talks receive an average of 17 new page views a second — thanks to its accessible, responsive user experience.