Summary

Designed an advanced media player with analysis and collaboration features to help researchers, including Google's own Android Auto product team, draw out insights from naturalistic video/audio.

Industry

Technology

UX Research

Responsibilities

UI design

User research

Interactive prototyping

Engineering handoff

Timeline

Q4 2024

Skip to Impact

Problem

Researcher users were frustrated; Pulse Labs’ media player was lacking features and they were forced to use external tools to accomplish basic collaboration, note-taking, and insights tracking. It didn’t make sense for a “testing and insights platform” to be missing critical collaboration and analysis features.

The original media player had ordinary playback features—nothing for deeper analysis or collaboration.

How can we design the video player itself to help researchers discover testing insights?

Approach

I met with Google’s Android Auto team to understand their pain points and feature requests, which included:

• See where a task starts and ends (including overlapping tasks)

• Create highlights (mark interesting parts)

• Leave comments

I knew I would focus most of my efforts on the progress bar. Here's why:

Context really matters to research. Researchers care not only about what pain points users have, but also when they happen during tasks. Therefore it made sense to visualize tasks, highlights, and comments where they occurred on the progress bar as opposed to removed from it (maybe this is obvious but that's the rationale).

Exploration & discovery

I did research on various media players for inspiration to ensure no useful playback feature was overlooked. Next I made a list of necessary components, sketched some ideas out, and quickly prototyped the most promising one to get a feel for the concept.

Unfortunately the prototype felt cluttered (especially when collapsed) and it lacked hierarchy—I thought differentiating elements with color would help but I wasn't happy with how busy things looked.

Collapsed: Overlapping elements are ambiguous and overwhelming
Expanded: Stacks too high and lacks hierarchy

I needed to rethink how these elements were grouped to avoid overwhelming users. I sketched out more ideas to find a better solution.

Solution

After sketching many ideas out, I found a better way to organize the information.

The default state (mouse leave) simplifies into a very compact state for optimal viewing clarity.

On hover, tasks are simplified into thicker segments of the progress bar itself and the name of tasks appear below next to the playback time. This drastically simplifies cognitive load and clutter.

It also occurred to me that highlights as independent elements doesn't make sense; a highlight should never be without a comment to give it meaning. So I reworked comments to absorb the role of highlights. Here's how:

In addition to basic comments that discuss one specific moment in time, users can add comments that visually span an interesting chunk of time, essentially replacing highlights. This choice simultaneously declutters the UI and promotes discussion.

Demo of adding comments that span a chunk of time, essentially absorbing the role of highlights.

Hovering over comments displays a short preview for shorthand review but can always be clicked to reveal the full message in the Comments Tab, allowing users to review, edit, or reply to it.

Hovering on a comment displays a preview

The Comments tab automatically opens when a user clicks on a comment in the progress bar

Edge case: If users add overlapping comments, only one of them is shown at once (default is first chronologically), and the other comments are hidden into tabs underneath—clicking a tab reveals where the comment occurs, and users can cycle through them to reveal them. This allows multiple stacked comments to appear without expanding vertically into the media.

Impact

The product I worked on at Pulse Labs wasn't consumer technology so many quantitative UX success metrics (time on task, success rates, etc) weren't tracked or simply didn't apply. The exact effect of our software remains confidential to the clients so my success is evidenced in their continual reliance on the features I designed that help drive million-dollar product decisions.

Product impact: Users can now collaborate on videos without leaving the Pulse Labs product. Product teams reported needing less external tools to analyze user behavior. Android Auto in particular, being a Google team, could not shed their Google workspace ecosystem, but found the improved media player UI to be helpful in initiating analysis before recording it elsewhere.

Internal teams responsible for running studies on behalf of clients reported significantly easier media analysis.

Personal impact: Getting some experience with dynamic interaction design was a lot of fun. Simplicity is king, but sometimes simplicity doesn't take the form we expect. In this case, I initially thought simplicity would mean keeping all elements visible at all times and simply collapsing/expanding them. Instead, I found a way to only show what's important at a given time; it's dynamic but that's what makes it simple.