Ein Redesign für die ARD Audiothek, dem Streaming-Portal für alle Audio-Inhalte der öffentlich-rechtlichen Rundfunkanstalten.
Skills
Typografie
UI/UX Design
Web Design
Typografie
UI/UX Design
Web Design
Tools
Figma
Figma
Problem
Ich nutze regelmäßig die Website der ARD Mediathek, um in Deutschland produzierte Filme oder Serien zu sehen. Als ich die ARD Audiothek als Pendant für alle Audio-Inhalte entdeckte, war ich überrascht, wie nutzerunfreundlich diese Seite im Vergleich war. Vor der Neugestaltung 2021 war der Text schwer zu lesen, die Hierarchie der Informationen war unklar und es war schwierig, die gesuchten Inhalte zu finden. (Website analysiert im Mai 2021)
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/956f85e6-58cb-4399-a519-b9f81a3ef448_rw_600.png?h=7fb2aed9c610d353b255a5624c11a43a)
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/e8c4877c-22bf-40d4-9140-ed907c7cd790_rw_600.png?h=25f770e245aa6d95088647ebb740e7ae)
ARD Mediathek und ARD Audiothek (Mai 2021) im Vergleich
Prozess
Um die Lesbarkeit zu verbessern, habe ich die Schriftgröße erhöht und den Kontrast zwischen allen Absatzformaten verstärkt. Im neuen Layout sind die wichtigen Inhalte in einer Spalte zusammengefasst.
Alle Informationen folgen einer klaren Hierarchie und die einzelnen Episoden werden auf der gesamten Website einheitlich dargestellt.
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/cb6e8c0b-c492-4634-ab3f-e227c06a1148_rw_1200.jpg?h=359476be3ab99427c1d0386726c6433e)
Skizzen für die Startseite
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/0471601e-8fc4-4e93-9835-ec8df53e3405_rw_1200.jpg?h=ef0b47439049494da2323fec2439d78a)
Skizzen für die Episodenseite
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/b7d1f9dc-631c-40db-8624-cf7ae9bf247b_rw_1200.png?h=a9986bcaa16cc257a7923ebca23fce80)
Farben Styleguide
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/5a6c129f-be89-4a43-8671-d8c93fe96f9e_rw_1200.png?h=9aa41e7bbf019b64129c8b8a5fba54a7)
Typografie Styleguide
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/1fe53490-ad33-41dd-b715-a87c2ea1124d_rw_1920.png?h=04b46b746c5c18bf8969f9f809cc750c)
Überblick aller Komponenten
Ergebnis
Ich habe die Lesbarkeit, die Hierarchie und die Orientierung verbessert, um die Nutzerfreundlichkeit zu erhöhen.
Start & Entdecken
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/4227e1fa-e438-4d00-87ab-13547935d2de_rw_1200.jpg?h=45e74693f40f5751c0e0b5e2bcdea57f)
Episode
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/80bfea25-d64d-4a71-9877-5ab51f5c49d4_rw_1200.jpg?h=78da571a84164bfa78156bde48e065c1)
Sender
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/0bcf9bdf-4a9e-4340-8101-79b0ed3ec63f_rw_1200.jpg?h=0a01602e6671b488a07f7e2ec667903f)
Suche
![](https://cdn.myportfolio.com/9a270dd6-76ae-4634-9e6d-47c15ae9d65d/f60afab2-843c-42ab-bd99-3211da14fa49_rw_1200.jpg?h=da51fee68ba130783e9fb1ccdb55e01a)
Alle Screenshots entnommen von ardaudiothek.de am 29.05.2021