About the Project
Understand sells 3D medical animations on a subscription basis to customers around the world. These customers embed the Understand player into their websites via iFrame for patients to view and become better educated about the medical procedures offered. Currently, only 22% of users interact with the player, and most of this interaction consists of playing and pausing the video they are watching. I redesign the Understand Player with two main goals in mind: give it a more modern look and feel and increase user interaction.
Design
Previously, the animation menu was heavily text-based, with videos hidden behind menu categories. The new player exposes videos more clearly and draws attention with graphics and large headings, as well as details about video views and likes. With a clear tab menu design, now there is more space for videos, ideally encouraging users to explore animation categories and videos more. The second main improvement was removing unused features and redesigning the most used features to be more accessible and user friendly. Features such as the ability to share and like videos have come to be expected in modern media players and were therefore added to the new player.
Development
After the design was complete, I created a fully functional prototype with HTML, CSS, and JavaScript. After this step, I usually hand the designs and prototype to the front-end developers and aid them with any questions. For the first time, I was allowed to test my React skills and put them to use. I made all of the components for both the desktop and mobile versions of the menu and player. Developing the player was not only such a great learning experience, but I also felt so proud to take my designs farther than I ever had before.
Challenges
One major challenge was redesigning the seek bar to include both steps and doctor's notes. Each video is broken up into logical chunks called steps which were previously displayed as a list to the side of each playing video. Analytics showed that only 1.5% of viewers clicked on these steps. In the redesign, I displayed the steps as notches in the seek bar as a way to save space as well as give them a contextually logical location. When users hover over the notches, tooltips appear displaying relevant step information and the ability to seek to this part of the video. Doctors also have the opportunity to attach a doctor's note to each step. This is a legacy feature that needed to be supported, despite its small current use. I designed the notes as large popovers that appear above the current step notch as the video enters each step. One note is shown at a time and is shown until the user takes an action to close it. Current use trends show that users rarely re-open the doctor's notes after actively closing them, therefore in the redesign, after actively closing the note the user has to rewind the video and enter the step again to trigger the note to reopen. This decision was made in an attempt to save space and increase usability.
The doctor's notes did not become less of a challenge after the design phase was complete. Implementing these notes in React also proved to be a new and interesting challenge. Since these doctor's notes are fairly large and are placed based on the location of each step, some of the notes bled outside of the visible part of the player. To determine when to restyle these overflowing notes, I had to calculate each note's location and size and if it was in the viewport. When React renders a view, it starts by rendering the children and then each child's parents. Since I was trying to determine the parent's coordinates to render its children, I was running into a lot of errors. The solution was using ref's and accessing the DOM directly. Since this was my first React project, I ran into many similar challenges, each of which teaching me more about programming in React. After completing this project I feel much more comfortable with this development framework and am looking forward to the next time I can use it.
Future
I am beyond excited for this new player and menu to go live and be viewed by millions of patients and doctors each year. Just as we have been, we will continue to collect user interaction data and compare it with previous data to determine which design decisions were successful and which ones were not. While another re-design soon is unlikely, I am looking forward to synthesizing the data we receive to encouraging further improvements to the media player.