TED-Ed

Making Global Education More Accessible

title-image.png
 

The following is a condensed version of my full-length case study. 

The Problem

"TED-Ed is a growing library of original animated videos [which provide] an international platform for teachers to create their own interactive lessons, helping curious students around the globe bring TED to their schools and gain presentation literacy skills, and celebrating innovative leadership within TED-Ed’s global network of over 250,000 teachers.”

While TED.com and TEDx allude innovation and encourage interaction, the TED-Ed site is cluttered and less inviting. The process for creating a lesson is particulary frustrating. This inspired me to find a way to make TED-Ed more accessible and build a better experience for teachers around the world.

Here’s a look at the current flow for creating a lesson within the TED-Ed platform:

Research

Business Needs:

To better understand TED-Ed’s position in the market, I ran a competitive analysis between TED-Ed and three of their top competitors: Khan Academy, BrainPOP, and PBS Learning Media.

TED-Ed is the online educational resource that provides the most flexibility for teachers.

This is an important distinction because while other organizations provide a wealth of internal educational videos and accompanying materials, TED-Ed allows users to transform any available educational content into a lesson that suits their needs.

Ted-Ed needs more users to prove they have created a good product so they can continue receiving financial support from donors so they can provide better user experiences. But, TED-Ed also needs to provide better user experiences to gain more users to continue receiving donor support. It’s like a nonprofit love triangle.

User Needs (Interviews + Usability Testing):

My interviews consisted of some general questions about the user and their teaching experience, followed by a usability test in which I asked users to create a lesson using the TED-Ed app, and finally some follow-up questions about their experience with the app. The purpose of conducting these interviews was to reveal any mental models my users already had based on their past experiences creating lessons and get an idea of what they expected the TED-Ed web app to do. 

I locked down interviews with 6 teachers, managing to find some variety in age, ethnicity, gender, location, and teaching experience. It was important that I not only talk to different types of teachers, but that I find teachers who represented a variety of students as well. Of the 6 teachers I scheduled interviews with, I was able to gather insight representing elementary, middle, and high school grade levels, both private and public institutions, lower income schools, special-ed classrooms, and bilingual classrooms. Though not fully comprehensive, this variety of insight would give me a better chance at designing a product that was more accessible and inclusive.

Define

Unpack:

After each interview, I played back all of my recordings and took notes. I then transferred the most important information to post-its, which I arranged around photos of my users on my wall. I used blue post-its to represent general information about who the user is, how they teach, and their thoughts on education. I used yellow post-its to represent feedback regarding their experience with TED-Ed. And I used pink post-its to jot down some key words about each individual users’ needs, to be able to quickly reference throughout my design process.

IMG_0463.JPG

Personas:

I used the data I gathered from unpacking my user interviews to create two personas: Miss Honey and Mr. Feeny. Miss Honey represents the less experienced, eager, and slightly overwhelmed teacher and Mr. Feeny represents the more seasoned, creative, and impatient teacher. 

TED-Ed User Personas.png

POV:

My next step was to start looking for patterns. I found that the pain points my users mentioned seemed to fall under three main ideas: time, access, and customization. 

IMG_0468.JPG

These 3 ideas, along with all the insight I gained from my user interviews, and my knowledge of TED-Ed business needs, helped to narrow my focus for this project and determine my POV: 

IMG_0475.JPG

Ideate

Brainstorm:

With my problem defined, I set out to brainstorm as many solutions as possible. I welcomed the crazy, the ridiculous, and the near impossible. Each idea, no matter how obvious or insane, was given a voice by means of a pink post-it and a place on my wall.

IMG_0477.JPG

Sketch:

Then I moved to my trusty moleskine for some visual brainstorming and thumbnail sketches. 

Here are a few concepts that came out of my visual brainstorming session:

  • The TED-Ed profile page should be an extension of the classroom, organized to suit the specific needs of each class.
  • Creating a lesson within the TED-Ed web app should mirror the structure of teaching, offering guidance for new teachers, while allowing seasoned teachers to explore more customizable features.

Prototype

Low-Fi Digital Prototype:

Some of the biggest issues my users had with the TED-Ed app were the inability to find the videos they were looking for, confusion over the difference between modifying an existing TED-Ed lesson and creating their own, and uncertainty about how to customize their lesson.

I knew teachers would not have any extra time to figure out how to use a new resource for creating lessons, especially when they already have a method in place that they are familiar with. So, I made it my goal to create a resource that was easily customizable and that would help make lesson planning more enjoyable.

I wanted to test the functionality and flow of my proposed solution with users before getting too wrapped up in the design, so I created a low-fidelity prototype in Sketch and then added functionality using InVision. 

low-fi-flow.png

Test

Low-Fi Usability Testing:

I reached out to the three of my original users that I felt would be best suited to give me feedback on a conceptual level and was able to schedule usability tests with two of them.

I think I was equal parts terrified and fascinated by how my users interacted with the prototype. Fascinated by the ways their minds worked and how they navigated though screens in ways I hadn’t anticipated. Terrified by their long pauses, confused looks, and decisions to disregard any instructional text.

Unpack Again:

After transcribing the audio recordings from my usability tests, I added comments to my low-fi InVision prototype on the parts of the interface that users had issues with. Doing this made it easy to see which screens were the biggest issues and provided some focus for my redesign.

Here’s a closer look at some of those comments:

Back to the Drawing Board:

After organizing all the feedback I got from my users on my low-fi prototype, I went back to Mr. Moleskine to refocus. I concentrated on the three biggest pain points brought up in usability testing and spent some time rethinking my approach to those problem areas.

I worked through a few different options for a redesign, being careful to think through the pros and cons of each decision. I knew there wasn’t one golden solution that would be perfect for every teacher, but I wanted to find the next best thing.

IMG_0667.jpg

Iterate

High-Fi Digital Prototype:

Creating my high-fidelity prototype was a little bit overwhelming at first because of the sheer quantity of feedback I received from my users in my low-fi testing. But after pushing through this step, I felt like the user flow made a lot more sense, like I was really starting to design for my teachers.

hi-fi.png

As you can see, I also added quite a few links to this prototype to provide an experience that was a little more realistic for my next round of usability testing.

hi-fi-interactions.png

The biggest change I made moving from low-fi to high-fi was the decision to eliminate the split path where users could choose to create a new lesson or modify an existing one. Though I can’t say it felt amazing to cut out a large chunk of my work and completely rethink the user flow, it was necessary.

Here’s a look at some of the screens for my high-fi prototype:

Test Again

High-Fi Usability Testing:

Going into this third round of testing, I didn’t know what to expect. I had made a lot of changes since my low-fi prototype and was anxious to see whether I was able to translate the pain points of my low-fi testers into a more natural, effortless flow. Thankfully, this round of testing ran much smoother, in part because I was more comfortable with running usability tests, but also because the prototype was much more intuitive and needed less explaining.

I realized there were some simple changes I could make to perfect my prototype. Little things like clarifying some wording and tweaking icons would make my design more accessible. And, though these changes may seem rather small, I wanted to do everything I could to make this experience effortless and delightful for my users.

I can’t single-handedly overturn the education system or pay teachers more or make people give them the respect they deserve, but if I can design something that will improve even a small part of their lives, it’s worth it.

Click here to view the final prototype.

Reflect

Building out my prototypes for this project took a little longer than I would have liked. I kept jumping ahead of myself, thinking of other ideas and design elements I wanted to implement, rather than staying focused on proof of concept. This is certainly an area I could improve on, as I know how important rapid prototyping and iterating under time constraints are to the UX process. I'd also like to start exploring other types of UX research methods. I feel pretty comfortable with interviews and usability testing, but would love to spend some time with other types of data collection.