Audio detail page (Product Design)

Background: I participated in the work that the lead designer tackled around researching and ideating ways to present audio files on the JSTOR platform.

Objective

Allow for audio files to be searched, discovered, presented and engaged with on the JSTOR platform in a way that drives great user experiences, impactful teaching, learning, and research outcomes. 

Comparative analysis

I worked with the lead designer to produce an audio landscape scan to assess the current status of audio files on similar platforms. We focused primarily on online archives and library platforms as they also support comparative user groups completing cataloging and/or research activities.

Takeaways

The audio landscape scan revealed that many comparable services utilized the HTML5 player format which effectively supports volume and playback speed adjustment. Almost all the platforms included transcript functionality which is more accessible and conducive to universal design.  Additionally, an in depth study conducted by the project’s user researcher highlighted that end-users valued the accuracy and completeness of metadata surfaced up in a faceted search. 

Presentation slide displaying an image of a feature comparison table.

Design

Sketches: while aiming to produce a concept for the audio detail page on JSTOR, I was inspired by strong examples of visual design gleaned from the audio landscape scan activity.

High-fidelity prototype: I leveraged existing designs and the JSTOR Pharos design system to produce several screens that reflected my conceptualization of a possible audio detail page.

Picture of a sketch of audio search results on the JSTOR platform.
Picture of a sketch of an audio detail page on the JSTOR platform.

Conclusion

The lead designer presented their concepts as well as mine at design review and I received useful feedback from the department. One colleague communicated that it would be best to have an intuitive image associated with the audio, otherwise the large play button could signal a video file. Another colleague suggested an icon or alternative treatment to communicate that the item is an audio rather than video file. They called out that my concept allows for an embedded thumbnail with the design. I adapted this feedback to my high fidelity prototype and developed it into a clickable prototype with 2 interactions; play/pause and expanding and collapsing the transcript accordion.

Open questions: although this work is in the discovery phase, the design review raised important considerations that will inform future iterations to the most viable design concepts. 

Previous
Previous

Smart Parking

Next
Next

JSTOR Support Information Architecture