GDCh.app - App für die Gesellschaft Deutscher Chemiker

Wie entwickelt man
eine App für mehr als
30.000 Chemiker?

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 Store

Services

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.

How we developed an App for more than 30,000 chemists

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.

01

Konzept & UX Design

02

Visual Design

03

Programmierung

How we developed an App for more than 30,000 chemists

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.

How we developed an App for more than 30,000 chemists

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.

How we developed an App for more than 30,000 chemists

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.

How we developed an App for more than 30,000 chemists

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

GraphCMS

Serverless Functions

How we developed an App for more than 30,000 chemists

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.

30k+

registrierte User in
Deutschland und der Welt

8+

unterstützte Plattformen
und Gerätetypen

7

beteiligte Mitarbeiter bei
Especial.

0

Stunden geplanter
Wartungsaufwand / Monat

GDCh Image 6

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

KUNDENMEINUNG
1 Anruf

pro Woche reichte aus, um auch komplexe Probleme zu lösen.

Alle
 Ziele

wurden erreicht. Dazu zählte der ursprüngliche Releasezeitraum sowie das Gesamtbudget.

KONTAKT

Kontakt

Adresse

Especial
Erkrather Str. 401
40231 Düsseldorf
Germany

Soziales