Codar App

WirVsWir Hackathon

Innerhalb des WirVsVirus Hackathon haben wir in einem Team von 5 Leuten an einem Wochenende eine App gebaut, mit der es gelingen kann Infektionsketten zu verfolgen, um so die Möglichkeit zu haben, diese früh zu erkennen und zu stoppen.

Herausforderung

Die gestalterische Herausforderung lag darin, die Handhabung und die Vorteile der App so verständlich wie möglich zu visualisieren. Zu diesem Zeitpunkt gab es auch noch keine Berichterstattung über eine mögliche Bluetooth App in den Medien, demnach war die Funktionsweise der App für die meisten unbekannt. Gestaltet werden sollte also das Interface der App, ein Onboarding und die Kommunikation auf der Website bzw. im für den WirVsVirus Hackathon notwendigen Video zur Erläuterung unserer Idee.

Prozess

Interfacedesign: Hier hab ich mit Scribbles und Wireframing angefangen und war im direkten Austausch mit meinen Teammitgliedern und auch Freunden, um schnell absehen zu können, ob Personen die nicht im Thema sind, die Funktionsweise verstehen. Kurz danach ging es ans Prototyping in figma.

Grafikdesign: Neben dem Aufbau der einzelnen Seiten wurden hier auch die Gestaltungselemente klar definiert, also Farbe, Schrift und Form. Anschließend habe ich noch ein simples Logo gestaltet, welches zur Funktion der App passt. Um die App im Onboarding zu erklären, habe ich 4 Illustrationen entworfen welche den Ablauf verbildlichen. Website: Für die Website nahm ich ein Template her, welches ich an die Gestaltung der App anpasste.

Motionstop Erklärvideo für den HackathonHier haben wir uns für ein CraftVideo entschieden. Dazu habe ich ein Storyboard gescribbelt, welches auch mit hilfe der anderen Teammitgliedern optimiert wurde. Danach wurden die Charaktere und die Bühnen auf Pappe illustriert, ausgeschnitten, abfotografiert und als Stop-Motion-Video in AfterEffects zusammengeschnitten. Hier findest du das Erklärvideo.