Lead UX/UI Designer for the award-winning TED-Ed platform

UX/UI, IxD, Identity / Branding, Animation

Reinventing Digital Learning

TED needed to develop an experience that reconnects educators and students with the joy and discovery of learning. For teachers, that meant using TED’s unique capacity to tell compelling stories as a teaching tool, and for students, giving them the opportunity to craft stories of their own.

The result was a platform that gives teachers the ability to create customized lesson plans around any TED-Ed or YouTube video, add their own comprehension checks, distribute lessons privately or publicly, and track real-time performance statistics for individual students, classes, or the public at large. 

Our studio worked with the Ted team to concept and launch their award-winning platform in 2013 and worked with them since as the sole agency to iteratively improve the product adding many new features and offerings, design and future enhancements over the years on efforts like: TED-Ed clubs, a ten-week program that guides students through the process of developing their own talk and potentially presenting it on the TED stage and their newest venture; Ted-Ed Circles.

7Million+ questions answered
145K+ lessons created
1000+ TED-Ed Clubs


8 Webbys
TIME Magazine site of the year
Millions of users


 
teded grid 2.jpg

After six years of the same design, I was excited to imagine a new approach for TED-Ed's homepage.

 

Concepting

To the TED-Ed team and its users, the homepage, with its large visual carousel, was iconic to the brand—but never very engaging. I was asked to put forward ideas that would instead highlight the right content and features for the right audiences. One suggestion capitalized on the iconic carousel, where each ‘card’ becomes more robust, featuring various core offerings rather than simply hosting a single video. The TED-Ed team decided on the most minimal solution (option B) that offers no browsing before you enter the front door.

ted-wires.png
 

Animation Guide

The minimal direction for the homepage needed an element of fun. The idea was to add an animation to give attention to the copy and CTAs that would rotate on a monthly basis. I created guidelines for the animators to understand the opportunities as well as the constraints, including a live prototype for them to understand what happens at each breakpoint.

ted-animation-guide.png
 

Homepage 2.0

 

Teacher Landing

Previous
Previous

MosaicoApp

Next
Next

Medium