« Back to Projects

UCSD Podcast Redesign

UCSD COGS 102C Cognitive Design Studio

Summary

In my Cognitive Design Studio (COGS 102C) course at UCSD, we conducted a quarter-long user research and interaction design project in order to re-design the audio podcast system used by UCSD to let students review recordings of lectures. Through a strict user-centered design approach, we addressed a number of problems with the existing system and created a prototype of our recommended new system.

A functional prototype of our redesigned podcast and slideshow player.

Problem

The objective of the assignment was to analyze an existing system or interface using user-centered design techniques. After discussing a number of potential systems, we decided on the UCSD podcast system, a web interface that presents recorded audio of course lectures to allow students to either re-listen to or catch up on missed lectures. We chose this system because we had easy access to the target users: students at UCSD.

The original/existing podcast interface.

Process

To gather user data, we each interviewed several users of the podcast system using contextual interview methods; we watched the users as they used the podcast system in their usual environment and studying situations, asking questions when we needed to clarify what the user was doing.

When we had completed the user interviews, we each shared our interview observations with the other members of the group. For each user interview, we attempted to create user models (such as artifact and physical models) to better understand the thought process of the users and the conceptual problem we were facing. These models especially helped us understand the context of each podcast session.

A sample physical model that we created to represent a common listening setting.

In addition to creating user models, we also created an affinity diagram; for each significant piece of data (such as a quote or observation) that we discovered during out interviews, we captured the point on a Post-it note and stuck it to the wall. Once we had captured each significant point, we began moving the Post-its around and arranging them into groups of similar topics. When we had completed this rearrangement, we were able to identify the areas that had the biggest issues. The affinity diagram also helped us see patterns that we would have missed if we were looking at individual interviews. The affinity diagram was a technique I'd never used, and I found it to be incredibly useful.

Creating an affinity diagram by grouping notes of similar themes.
Affinity diagram details.

After identifying the most important problems, we were able to come up with some ideas for how to address the issues that users often faced. For example, we noticed that students almost always had the lecture PowerPoint slides open at the same time, but we noted that this wasn't automatic and, especially, that the slides' progression wasn't synchronized with the lecture audio. After coming up with potential solutions, we created storyboards to illustrate how such solutions could fit into the system.

An early envisioning piece showing a user story and possible solution.

In addition to storyboards, we sketched out potential page designs on paper and conducted paper-prototype testing with some of our original users; we asked them to perform tasks with our new interface and asked how they would interact with the interface if it were real. Using paper made it easy to quickly change our designs to respond to unexpected observations.

Creating and iterating on sketches.
Providing team feedback on wireframe iterations.
An early digital wireframe.

Though the requirements of the assignment were complete with the creation of paper prototypes, I created interactive digital prototypes using JavaScript and HTML. The prototypes simulated the synchronization of the audio and the visual lecture slides, as well as added features like crowd-sourced tagging of individual lecture slides.

A screenshot of the final functional prototype, built using HTML, CSS, JavaScript, and Flash.

Results

Through our user research, we were able to detect a number of important patterns that helped identify problem areas in the existing podcast system. The system began as a simple linear audio player. We noted that students several problems, such as difficulty finding particular topics within a lecture, a frequent need to repeat bits of audio, and a lack of integrated visual material. Students developed novel way to deal with these problems.

For several of the problems we identified, we created design suggestions to improve the usability and user experience of the system. Our system would integrate lecture slides with the lecture audio, changing the lecture slight in accordance with the real playback of the slides in class. This synchronization was bi-directional; when a student clicks on a slide thumbnail, the audio jumps to that point of the lecture, and vice versa. To solve the problem of difficulty finding a particular topic, we introduced a tagging system where students could submit or vote on topic tags for each slide. A number of additional features made the new system very easy to use and impressed our original users.

We presented our findings and interactive prototype to the class and wrote a paper documenting our methods and findings. The project earned me one of four A+'s in a class of approximately 80 students.

Our podcast redesign team (From left: Laura McDermott, Ross Campbell, me, Mikhail Stal, Kyle Frost).

« Next: Information Visualization Research Proposal

Previous: IU.edu Usability Analysis and Redesign »