University of Michigan Lecture Viewer
A comprehensive functional and aesthetic redesign of the University of Michigan’s outdated lecture viewing system
DESCRIPTION
The University of Michigan Lecture Capture Service is an automated system for recording lectures in College of Engineering classrooms. The lecture viewer is the user-facing video player, allowing students to watch lectures and follow along with presentation slides, just like in the classroom.

During the Summer of 2019, it was decided that a plethora of new features would be added to the lecture viewer in order to further support students’ educational needs. Such features included a whiteboard view, a transcript view, a pop quiz feature, and thumbnail selections. In order to accommodate these large-scale additions, the decade-old user interface required a major redesign.


CLIENT
CAEN, the Information Technology services department for the University of Michigan College of Engineering


ROLE
UX Designer


TIME FRAME
August 2019 (1 month)


TEAM
John Pariseau (Supervisor, PM, Developer)

The current lecture viewer's user interface

PROBLEMS
1. Restrictive - The current lecture viewer restricts users and limits their control over the system. The user interface is filled with rigid presets, providing little means for customization.

2. Unintuitive - Compared to other video players, the user interface is confusing and unintuitive. For example, the buttons on the control bar seem randomly split between left and right sides of the screen. 

3. 2000’s Vibe - The system’s design is extremely outdated. Its interface is full of unattractive gradients, reminiscent of the old Windows XP interface. 
​​​​​​​

The restrictive presets of the current lecture viewer

GOALS
1. Empower the user - The redesigned user interface should aim to empower the user by providing students with an intuitive interface that also supports increased flexibility and customization.

2. Continuity - Almost all students are extremely familiar with the current lecture viewer. As a result, the redesigned viewer should look and behave similarly to the current system.

3. Modern Design - The viewer’s design should be catered to the current generation of students, without sacrificing the viewer’s usability.
IDEATION
With the addition of so many new features, almost every aspect of the lecture viewer required a redesign. I decided to go with a top-down approach, starting with the larger, more encompassing features.

My methodology involved: 
1. Identifying pain points and areas of improvement
2. Designing and exploring possible solutions


Sources and Window Sizing
The main section of the lecture viewer consists of multiple resizable windows that display a variety of sources. The current lecture viewer displays a maximum of 2 sources: classroom video and the presentations slides. With the addition of whiteboard, transcript, and extra auxiliary sources, the new lecture viewer needed to be able to display up to 6 sources at once.

Problem:
With so many sources, how can users resize source windows and customize their viewing area? 

Presets were definitely out of the picture, as they would only continue to limit users’ flexibility. Furthermore, they were not feasible with the greater number of sources.

Three new solutions were devised and their pros and cons were explored:


1. Controls overlay on source window
When users hover over the source window, the controls to resize the window appear as an overlay

Pros: Intuitive controls
Cons: Unable to click anywhere to play/pause, Blocks the window, Controls scale with window size (could become too small)
2. Small controls connected to source window
When users hover over the source window, its controls appear next to the window.
Image

Pros: Intuitive controls
Cons: Need to chase the controls around to repeatedly adjust window size, could bleed into other source windows
3. Control bar separated from source windows
All of sources’ controls would be placed in the top right corner of the screen.

Pros: Allow users to easily and repeatedly resize windows, Does not obstruct the viewing area, Allows click anywhere to play/pause
Cons: Disconnect between source windows and controls
Final decision: #3
While #1 and #2 had intuitive controls, their cons could easily frustrate users.

#3 avoided the downsides of #1 and #2, but introduced a disconnection between the source windows and their controls. However, this was addressed with the addition of labels when hovering over source windows.

Control Bar
The lecture viewer’s control bar is confusing: there seems to be no correlation between the buttons grouped on the left and right. 

Since we are trained to read from left to right, I believe that the most important buttons should be placed on the left side. Additionally, the most commonly used buttons should be in the corners where they are quick to find and easy to click. 

Abandoning the use of presets, the playback speed button is replaced with a slider, allowing students to select their desired playback speed.
Whiteboard View
The whiteboard view is one of the new features that will be added to the lecture viewer.

As the width of any physical whiteboard often exceeds the width of the window, users must be able to recognize that the whiteboard can be scrolled and panned.

To achieve this, a small minimap appears when hovering over the whiteboard. This feature gives users a clue that the whiteboard can be scrolled, while over helping to keep track of where they are.
Transcript View
Another new feature, the transcript window displays the lecture’s captions with timestamps. In addition, the system automatically scrolls and provides a clear indication of the current line, allowing users to effortlessly follow along. To further increase efficiency, the transcript can be queried and downloaded.
Pop Quiz
The pop quiz is a new addition that stops the lecture from playing until the quiz is completed. This provides students with more interactive lessons, similar to being in class.
Thumbnail Selection
This new feature allows users to change the thumbnail strip to display the thumbnails of different sources, providing students with even greater means of customization. 

Initial designs of this feature included an overlay over the thumbnail strip. However, this idea was scrapped due to the extra clutter and the fact that students would not utilize this feature too much.

In the end, this feature was moved into the control bar as an expandable icon.
Other Recordings
The existing recordings selection page features a two-column layout, with a list of recordings on the left and a single detailed view on the right. However, the left column is extremely narrow, requiring users to endlessly scroll through lectures. On the other hand, the detailed view wastes a lot of space. 

The redesigned page balances these 2 elements, effectively utilizing the screen’s space and streamlining user interactions.

Current lecture viewer's other recordings screen

Redesigned other recordings screen

Help Window
The current help window shows keyboard shortcuts and unnecessarily blocks the entire screen without pausing the video. The redesigned version features a smaller pop-up in the corner of the screen, allowing users to continue watching the video. Special tooltips that explain how the new features work also appear.

Current help window

Redesigned help window

STYLE & TYPEFACE
The redesigned lecture viewer received a modern, 2019 facelift. The outdated gradients and sharp corners were replaced with solid tones and rounded edges. However, the new viewer retained the original viewer’s dark color scheme. Nonetheless, additional white and blue accents were added to help users identify interactive elements.

SF Pro was selected as the lecture viewer’s typeface. It is legible, modern, and consistent with CAEN’s other products.
USABILITY TESTING
Five students and four faculty members were invited to participate in our usability test. Our goal was to identify if users could efficiently complete tasks, determine users’ pain points and insights, and pinpoint necessary design changes.

Under our observation, the participants had to complete a list of tasks. Surprisingly, the participants had little to no trouble completing the tasks, even when they involved the lecture viewer’s new features. Moreover, the general consensus was that the redesigned user interface is a drastic improvement over the current version.

From the usability test, it appeared that the source window labels were not enough to connect the windows to their respective controls in the control bar. To provide users were better visual feedback, colored borders now appeared around source windows when their respective controls are hovered over.
HIGH FIDELITY PROTOTYPE
NEXT STEPS
The redesigned lecture viewer is now in its final stages of development. It is currently undergoing beta testing with select classes having access to the new viewer. After receiving feedback from beta testers, the lecture viewer will undergo additional iterations of design and development to further improve the lecture viewer and better serve students’ needs.
TAKEAWAYS
1. Usability testing is incredibly valuable - Real users often see things that designers and developers can easily overlook. Through our quick and easy usability testing session, many small but crucial changes were identified.

2. Brainstorm multiple solutions -There is no such thing as too many ideas. Identify their advantages, disadvantages and go with the solution that best meets users’ requirements. Other solutions can always be used in the future through A/B testing to continue improving the product.
Thanks for making it this far! You have unlocked one of my fun facts: 
I started learning Chinese yoyo in 10th grade, that year I performed 
on stage to Let it Go from Frozen :)

Check these out too!

Back to Top