GDCh.app - App für die Gesellschaft Deutscher Chemiker
Wie entwickelt man
eine App für mehr als
30.000 Chemiker?
Scrolle für mehr
01. - ÜBERSICHT
Die GDCh.app
Die GDCh war Mitte 2020 auf der Suche nach einem Umsetzungspartner für die GDCh.app: Einem digitalen Leuchtturmprojekt der renommierten wissenschaftlichen Gesellschaft für Chemiker:innen.
Zum App StoreServices
UX Design, UI Design, Web Development, App Development
Kunde
Gesellschaft Deutscher Chemiker e.V.
Dauer
7 Monate
Beteiligte Mitarbeiter
1 Project Manager, 2 Frontend Engineers, 2 Backend Engineers, 1 UX Designer, 1 Visual Designer
Herausforderung & Ziele
Die GDCh.app sollte den über 30.000 internationalen Mitgliedern der GDCh einen echten Mehrwert liefern: News, Artikel & Social Media aus verschiedenen Kanälen und Systemen sollten in der App kumuliert werden. Mitglieder können einander sehen und Profile anlegen. Die App sollte innerhalb eines Jahres im Web, im Apple App Store und auch im Play Store verfügbar sein.
Herangehensweise
Aufgrund der komplexen und vielschichtigen technischen und inhaltlichen Anforderungen der GDCh, empfahlen wir zunächst die Durchführung eines UX- und Konzeptworkshops. Ziel dabei war es, das finale Feature-Set mit allen Stakeholder zu fixieren und den Grundstein für ein erfolgreiches IT-Projekt zu legen.
02. - ROADMAP
Unser Prozess zur
Entwicklung von Apps
In der Konzeptphase werden zusammen mit den Stakeholdern in Design Sprints oder UX Workshops grobe Wireframes & Features erarbeitet. Anschließend werden im Visual Design die Wireframes farblich & ästhetisch ausgestaltet und dann in Programmcode überführt.
Konzept & UX Design
Visual Design
Programmierung
03. - KONZEPT & UX DESIGN
Was möchten
die User?
01
Vielfältiger Content aus einer Hand
Die GDCh produziert vielfältige und hochwertige Inhalte für die Chemical Community und an der Chemie Interessierte. Darunter das Mitgliedermagazin, welches als Bookshelf in die GDCh.app integriert werden sollte. Auch zahlreiche Artikel von anderen Webplattformen wie Typo3 & Twitter sollten in der App für die User zentral erlebbar werden. Durch Push-Notifications, Lesezeichen und Sharing-Optionen sollten die Inhalte zudem bequem konsumierbar und teilbar sein.
02
Soziales Netzwerk
Die GDCh lebt von ihrem Netzwerk. Dieses abzubilden war ein wichtige Anforderung der Nutzer. So sollten in der GDCh.app die Mitglieder in einem Social Network mit ihren Interessen, Fachstrukturen und Profilbeschreibungen sichtbar sein. Auch ein Profilbild-Upload und die Verlinkung zu anderen sozialen Netzwerken wie Twitter und LinkedIn waren Bestandteil der erarbeiteten Anforderungen.
03
Nutzbar als App und im Web
Ein digitales Angebot sollte überall dort verfügbar sein, wo die User es nutzen möchten. Im Fall der GDCh.app traf dies auf das Büro, das Labor, den Frühstückstisch, der Bahnfahrt zum Uni-Campus uvm. zu. Daher wurde die App als Multiplattform-Lösung konzipiert. Sie sollte sowohl im Web als auch als App auf Desktop-PCs, Notebooks, Tablets und Smartphones im vollen Funktionsumfang nutzbar sein.
04
Perpektivisch: E-Learning, E-Commerce uvm.
Ambitioniert war auch der Ausblick auf die zukünftige Weiterentwicklung der App. So sollten langfristig auch weitere Angebote der GDCh in die App einfließen. Es gab Ideen für die Integration des Schulungsangebot oder des Karriereservices. Das Design, die Systemlandschaft und die technische Struktur der App sollten auf diese Herausforderungen vorbereitet sein.
Innerhalb weniger Wochen haben wir uns mit allen Stakeholdern auf die Vision der App verständigt, die Datenstruktur analysiert und einen klickbaren Prototypen entwickelt. Der Prototyp half der GDCh dabei, finale konzeptionelle Entscheidungen zu treffen.
04. - VISUAL DESIGN
Visual Design
Nach dem Ende der Konzeptphase setzen wir im Visual Design die optischen und ästhetisch Details der GDCh.app um.
Das existierende Corporate Design gab den Rahmen grob vor. Wir mussten eine besonders gute, barrierefreie Leseerfahrung der Artikel und ein modernes Layout für die Social-Media-Komponenten sicherstellen. So sahen die Designs beispielweise eine einstellbare Schriftgröße für die Nutzer:innen vor.
Herausfordernd war das breite Plattform-Angebot: Die GDCh.app wurde als App für iOS & Android und für das Web konzipiert. Daher wurden Abwandlungen für Desktop-PCs, Tablets und Smartphones jeder Größe und in verschiedene Sprachen detailliert gestaltet.
05. - PROGRAMMIERUNG (FRONTEND)
Flexibel
perfomant
skalierbar
01
Langlebiges headless Frontend
Die eingesetzten Technologien ermöglichen durch einen API-basierten Ansatz, dass das Frontend mit Daten vielfältiger Qualität, Herkunft und Sprachen problemlos zusammenarbeiten kann. Außerdem ist es nicht an ein bestimmtes CMS gebunden und wird mit wenig Aufwand kompatibel zu neuen Systemen.
02
State of the Art Performance
Die verwendeten Frontend-Technologien wie etwa Static Site Generator ermöglichen Ladezeiten, die auch mobile die besten Werte in Google Lighthouse oder Google PageSpeed erreichen. Außerdem sind diverse Tags für Social Media integriert, sodass der GDCh.app Content gut auf sozialen Medien und firmenintern geteilt werden kann.
03
Eine Codebase für alle Plattformen
Normalerweise müssen für Web, Android und iOS verschiedene Programmiersprachen und Systeme verwendet werden. Im Fall der GDCh.app konnten wir durch den Einsatz modernster Technologien eine Code Base schaffen, die für sämtliche Plattformen einsetzbar ist. Das reduzierte den Entwicklungs- und zukünftigen Wartungsaufwand massiv.
04
Cloudbasiert
Die Erstellung von Individualsoftware muss heutzutage nicht mit komplizierten Hosting- und Wartungsverträgen einhergehen. Im Gegenteil: Das Frontend der GDCh.app (und auch die Backend-Services, s.u.) laufen extrem wartungsarm zu minimalen Kosten auf modernster Cloud-Infrastruktur von AWS & Vercel.
06. - PROGRAMMIERUNG (BACKEND)
Cloudgetriebene Microservices
Insgesamt wurden sieben Backend-Microservices entwickelt. Diese kümmern sich vollautomatisiert um die Aktualisierung und Anreicherung von Daten für Mitglieder, Artikel, Bilder, Videos, Login, Push Notifications, Autoren uvm. Durch eine verteilte, cloudbasierte Microservices Architektur sind die Services autonom, ausfallsicher und extrem einfach skalierbar.
Frontend
React.js
Next.js
React Native
Expo
iOS & Android
HTML5/CSS3
Backend
GraphQL
Node.js
Vercel
Hygraph
Serverless Functions
07. - ERGEBNIS & AUSBLICK
Bestens vorbereitet in
die digitale Zukunft
Mit der GDCh.app hat die GDCh nun eine extrem flexible, aber auch mächtige Plattform für die digitale Zukunft des traditionsreichen Vereins. Der Betrieb der App ist durch die Cloud-Infrastruktur größtenteils automatisiert und die Integration weiterer Dienste ist in Rahmen von wenigen Wochensprints prinzipiell möglich.
registrierte User in
Deutschland und der Welt
unterstützte Plattformen
und Gerätetypen
beteiligte Mitarbeiter bei
Especial.
Stunden geplanter
Wartungsaufwand / Monat
08. - KUNDENMEINUNG
Wir haben uns aus zwei Gründen für Especial entschieden: Zum einen kennen sie sich bestens mit dem JAM-Stack aus, auf den wir zukünftig setzen wollen. Zum anderen bietet Especial eine faire Abrechnung, die sich nach der geleisteten Arbeit in den Projektschritten richtet – voll agil, voll flexibel. Ich freue mich jede Woche aufs Meeting.
- Dr. Maximilian Bräutigam, Marketing Manager
pro Woche reichte aus, um auch komplexe Probleme zu lösen.
wurden erreicht. Dazu zählte der ursprüngliche Releasezeitraum sowie das Gesamtbudget.
KONTAKT
Kontakt
Adresse
Especial Digital GmbH
Erkrather Str. 401
40231 Düsseldorf
Germany