The UI of the ARD audio library was difficult to navigate and lacked readability. I redesigned the interface by improving hierarchy, creating separate components for the different content formats, and emphasizing interactions while maintaining the original look and feel.

Problem

I regularly use the ARD Mediathek website to watch movies or series produced in Germany. When I discovered the pendant ARD Audiothek for all the audio content, I was surprised by how user unfriendly it was in comparison. Before their redesign, the text was difficult to read, the hierarchy of information was unclear and it was hard to find the content you are looking for. (Website analyzed in May 2021)

Process

To improve readability, I increased font sizes and the contrast between all text styles. In the new layout the important content is focused in one column. All information follows a clear hierarchy and episodes are displayed consistently across the whole website.

Result

I improved readability, hierarchy and orientation by implementing UI best practices to create a better user experience.

Prototype