ZDF Web-App für Championsleague

Abbildung ZDF Logo in orange
ZDF cl.zdf.de Mobile / App

Web-Tribüne für die UEFA Champions League

Abbildung der Logos von Bayer Leverkusen und Manchester United, als Introbild

Alle Hintergründe zur Champions League in einer Anwendung

Wie schafft man ein digitales Angebot, das online einen Mehrwert zur UEFA Championsleague bietet, das alle Fakten bereitstellt und in Echtzeit-Informationen über das Spielgeschehen liefert? Wir beantworteten diese Anfrage des ZDF mit der Entwicklung einer Second Screen Anwendung, die alle wissenswerten Daten zum Mega-Fussballereignis bündelt. Von Spieler- und Mannschaftsvergleichen, über Spielstände und Aufstellungen, bis hin zu exklusiven Live-Kommentaren der Sport-Redaktion. Alles findet der Fussballfan unter der URL: http://cl.zdf.de/

Championsleague Spielplanlayout in Desktopansicht

Nutzerbedürfnisse als Ausgangspunkt für ein erfolgreiches Konzept

Für das Bedürfnis nach sozialem Austausch während der Sendungen, haben wir die wichtigsten Social Media Kanäle integriert. Der Zuschauer braucht so nicht mehr zwischen den verschiedenen Social Media Anwendungen wechseln, sondern findet alles in einer Anwendung gebündelt. Weitere Funktionen wie der „Livestream” machen es dem Fußballfan möglich, dem Sportgeschen überall mit dem mobilen Gerät zu folgen. Die Funktion „Toralarm” hingegen meldet sofort, welche Mannschaft die Nase vorn hat. Wir denken, dass mit der Anwendung das wahr wurde, wovon viele Fans seit langem träumen.

Darstellung der Social Media Features in Kreisen rund um ein Telefon, z.B. Livestream oder Toralarm

Bei der richtigen Auswahl der Funktionen am Ball bleiben

Eine intuitives und ästhetisch gestaltetes Interface ist bei einer Anwendung essentiell für die „Freude am Benutzen”. Dazu müssen sich alle Funktionen eines digitalen Tools am richtigen Platz befinden und richtig gewichtet werden. Die Frage was für den Nutzer die wichtigsten Funktionen sind, muss man sich wieder und wieder stellen und sie im Idealfall mit Usertests prüfen. Oft entscheiden die ersten Klicks und das damit verbundene positive Nutzungserlebnis, ob eine Anwendung für den Benutzer funktioniert.

Icon-Illustration zum Usecase "unterwegs", zwei Menschen mit Telefon in der Hand um den Livestream anzusehen

Usecase Unterwegs:

Livestream, Toralarm, Redaktionelle Hintergrundinfos

Icon-Illustration zum Usecase "zu Hause", zwei Menschen sitzen auf dem Sofa und Twittern zum spielen oder schauen sich den Spielplan parallel zum Fernsehen an

Usecase Zuhause:

Liveticker, Toralarm, Social Media, Tabellen, Spielplan

Eine URL für alle Geräte: Responsive Design ist ein Muss im digitalen Zeitalter

Bei jedem neuen Digital-Projekt steht bei Moccu am Anfang automatisch die Frage nach der Nutzung auf Smartphone und Tablet. Teilweise ist es notwendig, eine native App zu entwickeln, um eine besonders gute Performance zu erreichen oder um auf besondere Gerätefunktionen zuzugreifen. Einen positiven Trend sehen wir zur Zeit in der Entwicklung im Responsive Design. Der zunehmende Zugriff auf Webinhalte von mobilen Geräten mit unterschiedlichen Screengrößen macht Webseiten mit einer responsiven Gestaltung oft zu einer sinnvollen Allround-Lösung, die auf dem Handy, Tablet, Laptop und Smart TV gleichermaßen funktioniert. Wir haben uns tief in das Thema Web-App oder native App eingearbeitet.

Darstellung des Resposive Grid in mehreren Devices, Desktop, Tablet, Mobile

Icons als Schriftzeichen - eine skalierbare Lösung

Im Design für Mobilgeräte spielen Icons eine immer stärkere Rolle, um die Navigation platzsparend und intuitiv zu gestalten. Beim Interface für Champions League haben wir uns für eine Icon-Schriftfont-Lösung entschieden. Alle Icons werden in Fontlab zu einem eigenen „Zeichensatz” zusammenfasst. So erscheinen die Icons auch auf hochauflösenden Displays gestochen scharf. Mittels eines Programmes wie Fontsquirl wird der Font in einen Webfont konvertiert und über das Netz geladen. Diese Icon-Lösung eignet sich perfekt für Responsive Design Projekte: Die Darstellungs-Qualität der Icons bleibt hoch, während die Dateigröße niedrig bleibt.

Abbildung Screen mit Iconoutline, teil der im Projekt verwendeten Symbolschrift als Webfont
laufender Mensch Icon zum Benefit der Webapp, mobilder Vorsprung

Mobiler Informationsvorsprung

Ziel war es, einen direkten Zugang zu allen Daten rund um die UEFA Champions League zu bieten, ganz egal wo und mit welchem Gerät man unterwegs ist.

Zahnrad-Icon zur Darstellung der Möglichkeit der Hochauslastung der App durch 250.000 Zugriffe gleichzeitig

Technik die nicht vorzeitig in die Knie geht

Eine technische Lösung, die auch bei etlichen Zugriffen performant läuft.

Kalendericon zur Darstellung des Benefit der Webapp, Second Screen

First Screen meets Second Screen

Auf dem „First Screen” schauen, auf dem „Second Screen” kommentieren. Mit unserer Anwendung verbinden wir beide Welten.

HTML 5 Schrifticon zur Darstellung des Benefit eine Website mit App-Character

Html mit „App-itüde”

Sieht aus wie eine App, ist aber eine Html5 Seite. Webentwicklung als Responsive Design, Mit JQuery und CSS3 Animationen sorgen für eine „app-artige” Userexperience.

Behalten Sie es nicht für sich. Zeigen Sie es anderen:

Lernen Sie das Team kennen:

Portraitfoto von Alexia Schann
Alexia Gestalter Creative Director
  • Kreativität
  • Photoshop
  • Verbandskasten
  • Kaffee
  • Schnitzel
  • Skandinavischer Fjord
  • Wrestling
Portraitfoto von Andreas Hug
Andreas Entwickler Technical Lead
  • Computer
  • Django
  • Terminal
  • Kaffee
  • Karibische Sonne
Portraitfoto von Martin Schneider
Martin Entwickler Senior Frontend Developer
  • Analytics
  • Computer
  • Django
  • JIRA
  • Kreativität
  • Photoshop
  • Quojob
  • Sketch
  • Telefon
  • Terminal
  • Kaffee
  • Karibische Sonne
  • Pauschalreisen
  • Schnitzel
  • Scooter
Portraitfoto von Sofie-Marie Kreis
Sofie-Marie Projektmanager Project Manager
  • JIRA
  • Quojob
  • Telefon
  • Verbandskasten
  • Ahoi Brause
  • Beyoncé
  • Karibische Sonne
  • Schnitzel
  • Wrestling
Portraitfoto von Stephen Jaekel
Stephan Entwickler Senior Backend Developer
  • Django
  • Terminal
  • Kaffee
  • Skandinavischer Fjord

Kontakt

Sofie-Marie Kreis Am Treptower Park 28-30 12435 Berlin +49 30 44 01 30 30 sofie-marie.kreis@moccu.com
Else

Freitag abend in die Else zum Feiern und am Montag nonstop direkt wieder auf die Arbeit.

Christl
Portraitfoto von Christiane Fischer
Ostbloc

Perfekte Location zum Bouldern - direkt am Wasser gelegen kann man bei gutem Wetter seine Pausen nach draussen verlegen.

Tim
Portraitfoto von Tim Pertuch
Treptower Park

Toller Park zum Radfahren, Joggen und auch zum Picknicken.

Norman
Portraitfoto von Norman Rusch
Schlange vor dem Postschalter

Eine Schlange, an der es sehr schnell geht. Kein Vergleich zu der am Hermannplatz oder den Neukölln Arkaden.

Alexia
Portraitfoto von Alexia Schann
Nach oben scrollen