Discovery Education Player Redesign

After receiving enough feedback we decided it was time to rework the Resource Player page experience into an experience that supported quick assessment, supporting materials, and ways to engage with the classroom using the resource.

Disclaimer: Due to personally identifiable information (PII) and various privacy concerns, much of the content has been adjusted, hidden, or removed completely.

Voice control. Try "navigate to [project name]" or "scroll up/down"

What is Player?

Player is short for "Resource Player" which is how students and teachers view each individual resource within Discovery Education. We retained the term "player" due to the fact that there were many long-term users who still understood Discovery Education through a certain lens, which was as a streaming video service. For this reason we reworked it and leveraged it to resonate with older, newer, and future users.

We approached the new Player experience based on the three core goals that we discovered students and teachers try to accomplish most often when encountering a resource. Our new solution needed to allow for quick assessment and comprehension, offer relevant related content based on the user and the resource, and lastly, to facilitate and demonstrate how to use the resources within the classroom.

The last goal, "demonstrate how to use the resource within the classroom" was one of our most unique findings. It's often assumed that teachers always have comprehensive, perfectly-planned lessons for every piece of content and type of learning method they use. The reality is that does not happen in many classrooms. This could be for any number of reasons, ranging from unpredictable external factors to a teacher wanting to try a new resource or strategy. Reducing the amount of assimilating and decision-making a teacher has to do is one of the most important goals that guides our entire organization down to every last designer and developer. Teachers matter and it's our job to support them.

Role and Team

We identified an opportunity to try implementing design sprints in order to optimize the resource Player experience. I worked closely with 2 developers to quickly assess, design, test, and iterate within a very tight timeline.

We had identified through some prior research that the Player page could benefit from information architecture and design changes. I took the opportunity to try out a small design sprint. It's one of those things you read about but always find challenging to get others involved. Since it was a small team, the ask wasn't significant, in addition to the fact that they were super collaborative to begin with.

Managing progress was a balance that required enough trust to allow an informal process to be productive. By explicitly separating roles, but always encouraging feedback and critiques, we managed to quickly iterate and make small, meaningful, and impactful changes that resulted in a new and optimized Player experience.

What to Change and Why?

With the focus on using familiar patterns and allowing content to shine, by reducing low value information and rearranging the hierarchy of the page, we managed to create a much more effective experience.

Like? You know... Whatever.

Over the course of a number of studies one of the most consistent findings we found was ambiguity on the expected behavior and the actual behavior of the "likes" dynamic on educational resources.

This was an interesting set of conditions in the fact that people use likes, hearts, claps, etc. and it generally comes down to internal versus external motivations. A person would "like/heart" something as an expression or reaction, or they would do it with the expectation of saving, marking, or somehow designating an item for some reason at a later time. The results varied by age, service, icon, and context; but in general the heart icon always resulted as the most controversial.

The dynamic of "likes" also affected other areas of the experience such as saving content for the user, weighting resources when searching, and the entirely new customization and personalization system we were also in the process of producing. Given the findings of the research and the fact that we only wanted to introduce an element when it worked, instead of changing it mid-experience, we elected to dedicate a more significant amount of time to the entire experience of that type of user input.

Focus the User and Highlight the Content

Something that we noticed during research sessions was the tendency for teachers to often reference additional material before completely understanding the main resource first. When reviewing mouse tracking information, we noticed that there was movement and highlighting of areas that weren't part of the task, nor the thoughts they were speaking to. We interpreted this as a subconscious action due to poor information hierarchy

Incorporate New Patterns

Discovery Education encourages discovery and exploration of resources and materials. This is supported by the dynamic of customized feeds of information and resources. Facilitated and found mainly within the Channels experience, we started to utilize the same patterns within the Player page to keep a new but familiar feel and to improve the design inconsistencies of the previous iteration.

Utilizing a modular design pattern from another section of the site.

Experimenting With Process

Taking a chance with a new but small team, we consolidated workflows into design sprints that integrated and supported our current processes.

Sometimes in Figma, sometimes in html, and other times on phone calls, the work that needed to be done was done in the best way possible. With team alignment on general expectations and goals, we were able to take advantage of this freedom to sidestep the usual Jira ticket system and abbreviate it with what we roughly called design sprints. Our use of design sprints meant having quick, iterative, but explicit stages of progress.

When you really get to experience true fluidity in workflow between research, design, and development, it can result in an extremely fulfilling experience that everyone is proud to have invested themselves into. And when that happens, presenting on meetings is more engaging and the increased energy is tangible.

Player Reworked

Having felt we met all of the requirements for a successful experience the team agreed with the solution and we staged the launch and support campaign.

Utilizaing a modular design pattern from another section of the site.

The new Player..

By really taking the time to explore exactly why we needed to change Player, how we wanted to change it, and what we needed to build towards, we established an alignment in expectations that helped support decisions. We carefully tested a few bolder solutions that addressed some of the goals explicitly by promoting good material more actively. This resulted in a hard-to-balance line of promoting content and not being perceived as an ad. It had to be almost too perfect to work within a pedagogical setting and still be useful and tasteful.

Our solution allowed the content and related information to take center stage and allow the user to engage with the resource fully before facilitating alternatives or supporting material that is customized and relevant to the user.

After a few weeks of hard work, constant communication, and considerate collaboration, we presented to stakeholders and the internal teams. It tested to our standards and it was sent to QA to be staged for release.

Retrospective

The new experience set out to provide a solution that set out to accomodate all users by leveraging a personalization system, new layout based around teaching and learning modes, and a persistent navigation system that acted as a "mini" version of the homepage.

MATCHING ASPECT RATIOS AND VERTICAL MEDIA QUERIES

In education technology Chromebooks are very popular. Many Chromebooks are also hybrid devices that have to account for touch inputs. For this reason the Chrome toolbars are made to be a certain minimum size. This results in the user having around ~576px vertically on a traditional 1029x1280 device and videos with 16:9 aspect ratios to be overwhelming in height. When this happens, often the "fullscreen" option is actually smaller, but made to fit the screen more appropriately since the controls account for native user interface.