12 / 19 · Ein Online-Campus für EF

My EF

My EF ist der Online-Campus, auf dem Schülerinnen und Schüler von EF Education First ihre künftige Klasse kennenlernen und sich auf die Reise vorbereiten. Ich habe das Produkt-Branding als gemeinsamen Styleguide neu aufgebaut und die Desktop-Seiten für 2018 gestaltet, vom Login bis zum Dokumenten-Upload.

Rolle
Lead Product Designer
Kunde
EF Education First
Branche
Bildung
Jahr
2017
Leistungen
Produktdesign, Webdesign, Designsystem

Eine Schülerin, die bald mit EF Education First verreist, öffnet My EF, noch bevor sie von zu Hause aufbricht. Dort lernt sie ihre Klasse kennen, liest über Schule und Stadt und erledigt die Unterlagen für die Reise: Visumformulare, Passkopien, Transfers und Unterkunft.

Das Portal war zu einem veralteten Ökosystem gewachsen. Das Branding war uneinheitlich, Features lagen in getrennten Ecken, und wer die Tage bis zur ersten Auslandsreise zählte, musste das eine noch fehlende Dokument suchen. Jeder neue Screen verstärkte den Wildwuchs, weil es keine gemeinsame Quelle für Stile gab.

Was müssen Schülerinnen und Schüler zuerst sehen, und welches Fundament hält Dutzende Screens einheitlich, während das Produkt wächst?

Wir haben beim Fundament angefangen. Ich habe das Produkt-Branding als Styleguide in Brand.ai neu aufgebaut: Proxima Nova und Sabon, ein warmes Gelb für Call-to-Actions und zwei Blautöne. Das Sketch-Plugin synchronisierte die Stile, so arbeitete das ganze Designteam aus derselben Quelle. Darauf aufbauend beginnt die Website 2018 mit der Reise selbst: ein randloses Foto des Reiseziels, ein Countdown und eine Checkliste der Dokumente, ob akzeptiert, abgelehnt oder noch offen.

Meine Rolle

Lead Product Designer. Ich strukturierte das Portal My EF neu und bereinigte sein Produkt-Branding, dokumentierte den Styleguide in Brand.ai und gestaltete die Desktop-Layouts für 2018, vom Login bis zum Dokumenten-Upload.

Was es schwierig machte

  • Ein veraltetes Ökosystem

    Der Auftrag lautete, Branding und Struktur des Portals von Grund auf zu erneuern, während das Produkt weiter aktiv entwickelt wurde.

  • Einheitlich über alle Screens

    Stile mussten in jeden Screen der Organisation gelangen, ohne manuelle Redlines.

  • Papierkram mit Fristen

    Schülerinnen und Schüler jonglieren mit Visumformularen, Verzichtserklärungen und Transferangaben in mehreren Sprachen, und alles hat eine Frist.

  • Sozial und praktisch an einem Ort

    Dieselbe Startseite musste sich wie eine lebendige Lounge anfühlen und zugleich wie ein verlässliches Reise-Dashboard.

Fragen, die wir stellten

  1. Was wollen Schülerinnen und Schüler 20 Tage vor der Abreise wissen?
  2. Wie zeigen wir ein abgelehntes Dokument, ohne Panik auszulösen?
  3. Welche Stile gehören in die gemeinsame Bibliothek, und welche bleiben lokal in einem Screen?
  4. Wie passen Infos zu Schule, Stadt und Unterkunft in ein einheitliches Seitenmuster?
01

Eine gemeinsame Designsprache

Die erste Aufgabe war, Produkt-Branding und Design-Guidelines aufzuräumen. Brand.ai enthält Logovarianten, Farbfelder, Schriftskala und Icon-Set, und das Sketch-Plugin brachte dieselben Stile in jeden Screen der Organisation. Proxima Nova trägt Überschriften und Fliesstext; Sabon LT Pro bleibt Momenten vorbehalten, die einen Bruch im Rhythmus brauchen.

Eine gemeinsame Designsprache

Der Guide in Brand.ai hielt Logovarianten, Farben, Schrift und Icons in einer synchronisierten Bibliothek.

02

Login und die Reise vor Augen

Der Login liegt über dem Foto einer Skyline, mit Social Sign-in oder E-Mail. Danach begrüsst ein Panorama-Splash die Reisenden mit Namen und mit der Reise, um die es geht: «Your upcoming trip to San Diego in 20 days». Dazu kommen das heutige Wetter und ein einziger Button «Explore».

Login und die Reise vor Augen

Die Anmeldung liegt auf einer einzigen Karte über einer Skyline bei Sonnenuntergang, mit Social Login oder E-Mail.

03

Die Lounge

Die Startseite stellt eine Reise-Checkliste über den Social Feed. Jede Karte zeigt den Status eines Dokuments in Farbe: Grün für akzeptiert, Rot für abgelehnt, Blau für ausstehend. Eine Fluglinie von CHZ nach SAN zählt die Tage. Darunter teilt die lokale Community von My EF Posts aus Twitter, Facebook und Instagram, neben Freundschaftsvorschlägen und Hinweisen im richtigen Moment.

Die Lounge
Die Lounge

Die Lounge scrollt vom Reise-Hero und der Checkliste in den Community-Feed.

04

Schule, Stadt und Unterkunft

Die Schulseiten folgen einem Muster. Zuerst kommen eine Begrüssung, die wichtigsten Kontakte und eine Support-Anfrage. Dann folgen Sehenswürdigkeiten und Aktivitäten der Stadt, der Campus sowie Gastfamilien und Residenzen mit Ausstattung, Fotos der Einrichtungen und einem Lageplan.

Schule, Stadt und Unterkunft

Jede Schulseite beginnt mit einer 360-Grad-Ansicht des Campus und den Wegen zur Kontaktaufnahme.

05

Dokumentenzentrum

Alles, was Schülerinnen und Schüler hochladen müssen, steht in einer Reihe mit Fälligkeitsdatum und Status. Alles, was EF zurückschickt, vom E-Ticket für den Flug bis zu den Angaben zur Unterkunft, lässt sich herunterladen oder per E-Mail senden. Zum Hochladen gibt es eine Drag-and-drop-Seite mit kurzem Erklärvideo und den weiteren noch nötigen Dokumenten.

Dokumentenzentrum
Dokumentenzentrum

Abgelehnte Dokumente werden korallenrot, und jedes öffnet eine Upload-Seite mit Drag-and-drop.

In Bewegung

Ergebnisse

  • 10+Desktop-Seitenvorlagen gestaltet
  • 1gemeinsame Stilbibliothek, mit Sketch synchronisiert

Was ich mitnehme

  • Zuerst das Fundament richten. Danach war jeder Screen schneller gestaltet und leichter zu prüfen.
  • Mit der Reise beginnen. Ein Countdown und eine Checkliste sagten den Schülerinnen und Schülern mehr als jede Willkommensnachricht.
  • Jeder Farbe eine Bedeutung geben. Statusfarben funktionieren nur, wenn Grün, Rot und Blau nie die Rollen tauschen.
Lead Product Designer
Preetham Lawrence
Ein schwieriges Problem, das sich zu lösen lohnt?

Lösen wir es gemeinsam.

preetham.lawrence@icloud.com
+41 76 740 46 30Telefon
LinkedIn↗ Texte auf Medium↗

Designleiter in Zürich, Schweiz. Offen für Führungsrollen und ausgewählte Kooperationen.

© 2026 Preetham LawrenceÜbersicht