Case Studies | Nadine Schneider
Firmenwebsite auf Laptop und Smartphone E-Learning Plattform auf Laptop und Smartphone Browsergame auf einem Laptop

{{ c.num }} / 03 Case Study

{{ c.title }}

{{ c.sub }}

{{ c.desc }}

{{ t }}

{{ c.num }} / 03 Case Study

{{ c.title }}

{{ c.sub }}

{{ c.desc }}

{{ t }}
Firmenwebsite auf Laptop und Smartphone E-Learning Plattform auf Laptop und Smartphone Browsergame auf einem Laptop

01Ausgangslage

Das Unternehmen bietet innovative 3D-Diagnostik- und Planungslösungen für die dentale Medizin. Der bestehende Webauftritt war inhaltlich und technisch in die Jahre gekommen, die Struktur unübersichtlich und die Darstellung auf mobilen Geräten nicht optimal.

Ziel war ein moderner, klarer und internationaler Auftritt, der die verschiedenen Produkte verständlich präsentiert und die jeweiligen Zielgruppen gezielt anspricht.
Whiteboard mit Zielen und Anforderungen auf Klebezetteln
Workshop: Ziele & Anforderungen
Handschriftliche Kickoff-Notizen im Notizbuch
Notizen aus dem Kickoff
Screenshot der alten Firmenwebsite im Browser
Analyse der bestehenden Website

02Recherche & Analyse

Um die Bedürfnisse der unterschiedlichen Zielgruppen (darunter Zahnärzte, Kieferorthopäden und Kliniken) besser zu verstehen, haben wir bestehende Inhalte, Wettbewerber und Nutzerverhalten analysiert und in Workshops die zentralen Anforderungen gesammelt.

{{ r.title }}

{{ r.text }}

Recherche und Wettbewerbsanalyse: Website-Entwürfe auf Laptop und Notizbuch
Wettbewerbsanalyse & Best Practices

03Konzeption

Auf Basis der Analyse entstand eine klare Informationsarchitektur mit Fokus auf die wichtigsten Nutzerbedürfnisse. Inhalte, Struktur und Klickflows wurden frühzeitig visualisiert und mit den Fachbereichen abgestimmt.

Sitemap und Informationsarchitektur der Firmenwebsite
Sitemap & Informationsarchitektur
Wireframes der Startseite und Unterseiten für Desktop und Mobile
Wireframes Desktop & Mobile
Detailliertes Wireframe der Startseite
Wireframe der Startseite

04Design

Das Design verbindet eine klare, moderne Bildsprache mit einer ruhigen, professionellen Gestaltung. Ziel war ein hochwertiger, medizinisch-technischer Look, der gleichzeitig verständlich und nutzerfreundlich ist.

Typografie: Schrift Source Sans 3 mit Schriftgrößen und Beispielen
Typografie
Icon Stil: Implantology, Sleep Medicine, Endodontics, Functional Dentistry, Services
Icon Stil
Farbwelt
Designscreens der neuen Firmenwebsite: Produkte, Implantologie, Unternehmen, Mission und Surgical Guides
Designkonzept Startseite und Unterseiten

05Umsetzung

Die Umsetzung erfolgte in WordPress auf Basis wiederverwendbarer Module. Als Projektleitung habe ich Anforderungen, Inhalte und Zeitplan zwischen den beteiligten Bereichen koordiniert.

Beteiligte Bereiche

{{ t }}
WordPress-Backend mit Dashboard, Seiten, Medien und Design-Einstellungen

06Herausforderungen

Bereits im Kickoff haben wir die größten Hürden des bestehenden Auftritts festgehalten:

{{ x.n }}{{ x.t }}

07Ergebnis & Learnings

  • ✓{{ r }}
Finale Firmenwebsite auf Laptop mit Produktseiten
Finale Website

01Ausgangslage

Schulungen zu den Produkten fanden bisher überwiegend persönlich statt. Viele wiederkehrende Fragen landeten im Support. Das kostete Zeit auf beiden Seiten.

Ziel war eine Lösung, mit der wir den Schulungs- und Supportaufwand verringern.
Präsenzschulung: Trainer erklärt 3D-Röntgendaten am Bildschirm
Schulungen bisher vor Ort
Kickoff: Ideen und Abläufe werden am Whiteboard skizziert
Kickoff: Ziele & Anforderungen

02Ziele

Die Lernplattform sollte Wissen jederzeit verfügbar machen und Ärzten einen klaren, selbstständigen Lernweg bieten.

{{ r.title }}

{{ r.text }}

03Konzeption

Auf Basis der Anforderungen entstand eine Struktur aus Kursen, Lektionen und Zertifikaten. Die Plattform wurde von Anfang an modular geplant, damit neue Formate später ohne Umbau ergänzt werden können.

Konzept und Lernpfad der Lernplattform: Kurse, Lektionen, Test und Zertifikat
Aufbau & Lernpfad

04Plattform & Funktionen

In der Lernplattform können Ärzte Online-Schulungen jederzeit aufrufen, ihren Fortschritt verfolgen und nach Abschluss ein Zertifikat erhalten.

{{ x.n }}{{ x.t }}
Kursübersicht der Lernplattform mit Videos, Dokumenten und Fortschrittsbalken
Kursübersicht
Lektion einer Online-Schulung mit Video und Kapitelliste
Online-Schulung
Teilnahme-Zertifikat mit Siegel und abgeschlossenen Schritten
Zertifikat

05Umsetzung

Die Plattform wurde auf Basis von WordPress aufgebaut. Als Projektleitung habe ich Anforderungen, Inhalte und Systemaufbau zwischen den beteiligten Bereichen koordiniert.

{{ t }}
WordPress-Backend der Lernplattform mit Medien, Nutzern und Einstellungen

06Erweiterbarkeit

Die Lernplattform ist so eingerichtet, dass sie leicht erweitert werden kann, zum Beispiel um in Zukunft auch Live-Schulungen anzubieten.

07Ergebnis

  • ✓{{ r }}
E-Learning Plattform auf einem Laptop
Die E-Learning Plattform

01KI-Tools & Setup

Für die Entwicklung nutze ich verschiedene KI-Tools, die ich je nach Aufgabe kombiniere. Dabei hat jedes Tool seinen eigenen Schwerpunkt und ergänzt die anderen.

Ziel ist es, die Stärken der einzelnen Tools zu nutzen und einen effizienten Workflow zu schaffen, in dem die KIs zusammenarbeiten.

{{ t.name }}

  • ➤{{ i }}

02Mein KI-Workflow

Das Besondere an diesem Projekt ist die enge Zusammenarbeit der Tools. Ich lasse ChatGPT und Claude direkt miteinander arbeiten: Sie teilen Aufgaben auf, prüfen gegenseitig den Code und schlagen Verbesserungen vor.

Roboter-Illustration für ChatGPT Codex

ChatGPT
Codex

  • ➤{{ i }}
Roboter-Illustration für Claude

Claude

  • ➤{{ i }}
Midjourney Logo

Midjourney

  • ➤{{ i }}
  1. {{ x.n }}{{ x.t }}

03Beispiele aus der Umsetzung

Ein Einblick in verschiedene Bereiche, bei denen ich die KI-Tools einsetze: von Code über Grafik-Assets bis hin zu UI-Ideen.

// Beispiel: Quest-Logik (vereinfacht)
async function checkQuestProgress(playerId) {
  const quests = await getActiveQuests(playerId);
  return quests.map(q => ({
    ...q,
    progress: calculateProgress(q),
    completed: q.progress >= q.goal
  }));
}
Erster Entwurf mit ChatGPT
async function checkQuestProgress(playerId) {
  try {
    const quests = await getActiveQuests(playerId);
    return quests.map(q => ({
      ...q,
      progress: calculateProgress(q),
      completed: q.progress >= q.goal
    }));
  } catch (error) {
    console.error('Fehler beim Laden der Quests', error);
    return [];
  }
}
Verbesserungsvorschlag von Claude
Charakter-Concept Brunhilde, Schmiedin von Grünbach
Charakter-Concept: Brunhilde
Gegner, Items und Umgebungs-Assets aus dem Browsergame
Gegner, Items & Umgebung
UI-Entwurf des Quest-Fensters mit Tagesaufgaben und Einzelquests
UI-Entwurf: Quest-Fenster
UI-Entwurf von Heldenprofil, Ausrüstung und Rucksack
UI-Entwurf: Held & Inventar
Dialog mit Brunhilde, der Schmiedin, mit Antwortoptionen
Dialog-Entwurf: Gespräch mit Brunhilde

04Ergebnisse & Visuals

Mit den KI-Tools entstehen schnell hochwertige Ergebnisse, von Charakteren und Umgebungen bis zu UI-Elementen. Hier ein paar Beispiele aus dem Projekt.

Zwerg mit geflochtenem BartElfe mit rosa ZopfBlonde Elfe mit DolchOrk mit Dreadlocks
Charaktere aus dem Browsergame
Weltkarte des Browsergames mit Wäldern, Gebirge und Portal
Umgebung: Weltkarte
Items: Zauberhut, Pilz, Schwert, Trank und Goldmünzen
Items
UI-Entwurf der Dorfzeitung „Der Grünbacher Bote“ mit Aushängen
UI: Der Grünbacher Bote

05Learnings & Ausblick

Durch das Projekt sammle ich wertvolle Erfahrungen im Umgang mit KI-gestützter Entwicklung und entdecke, wie viel Potenzial in der Zusammenarbeit mehrerer Tools steckt.

  • ✓{{ r }}

{{ x.t }}

{{ x.d }}

Lass uns ins Gespräch kommen

Gemeinsam digitale
Ideen voranbringen.

Kontakt aufnehmen →