A redesign of ARD Audiothek, the on-demand streaming website for all audio content of the public radio stations in Germany.
Skills
Typography
UI/UX Design
Web Design
Typography
UI/UX Design
Web Design
Tools
Figma
Figma
Task
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 the 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)
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/7d738bbe-3dbc-477f-afa0-d1151276bcec_rw_600.png?h=777c7f7b634800bae086cdaef55a7806)
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/75a942b5-6975-4a6f-9587-a5f5a5d5bb3a_rw_600.png?h=a26b8bf1e6f622fe93f3c46128bb1560)
ARD Mediathek and ARD Audiothek (May 2021) in comparison
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.
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/5d90d2c8-3e2e-4b7e-89f1-36d6e15803e8_rw_1200.jpg?h=f5447aa543efad5fb24c74ae1e10daeb)
Sketches for the start page
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/4444b591-28b9-4fd8-a5a5-6b45939d3d12_rw_1200.jpg?h=3e6337522409d435a2ed246902ccece0)
Sketches for the episode page
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/1a08cd26-29d3-4a52-bb67-3d37bb7489de_rw_1200.png?h=58a2fb2ad6b3e00cf3102608223e1c83)
Color styleguide
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/60e6da6d-9563-4417-acca-f79217a069d2_rw_1200.png?h=183ea2bea79498054a05e2bb51bb343a)
Typography styleguide
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/cd281b5f-14c8-45e0-86b7-4ca93863272a_rw_1920.png?h=c08462aecd8eedb76407c6794c6136d2)
Overview of all components
Result
I improved readability, hierarchy and orientation for a better user experience.
Start & Explore
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/76f51d8c-027a-4b73-b2cc-8fb61292b65f_rw_1200.jpg?h=422746d99f1d395b524e9ae701e5732a)
Episode
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/aad9df46-5a75-44db-b1b3-f5ce2b17369c_rw_1200.jpg?h=2813ce6bcbe47332180c0453abc12fa6)
Show
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/64446e27-8016-4ab4-bb28-000f3075e12a_rw_1200.jpg?h=d97fa32d90f0ebd7f1f40e5d13ac1cc5)
Search
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/190be842-a0f3-4e29-906d-a2d9627bc6c0_rw_1200.jpg?h=737bad8404b64dca9ebdc417c9b99478)
All screenshots retrieved from ardaudiothek.de at 29.05.2021