13 / 19 · Reisedokumente ohne Nachhaken

My Documents

My Documents zeigt Schülerinnen und Schülern von EF, welche Reisedokumente fällig sind, und lässt sie jedes davon am Desktop oder Handy hochladen. Ich habe das Feature auf Basis des Markensystems von My EF gestaltet, von den Coach Marks beim ersten Besuch bis zum Bestätigungsbanner.

Rolle
Product Designer
Kunde
EF Education First
Branche
Bildung
Jahr
2017
Leistungen
UX-Design, UI-Design, Responsive Webdesign

Vor einer internationalen Reise mit EF müssen alle Schülerinnen und Schüler eine Reihe von Dokumenten einreichen: eine Passkopie, einen unterschriebenen Haftungsverzicht, eine Bestätigungs-E-Mail, Angaben zum Transfer und mehr. My EF ist das Portal, das sie schon für Kurse, Reisen und Kontoeinstellungen nutzen.

Alle haben eine andere Liste, jedes Dokument hat ein eigenes Fälligkeitsdatum, und manche werden abgelehnt und brauchen einen zweiten Anlauf. Viele sind eher am Handy als am Schreibtisch, und ein fehlendes Dokument kann eine Reise aufhalten.

Was braucht es, damit man auf einen Blick sieht, was noch fällig ist, es mit dem Gerät hochlädt, das gerade zur Hand ist, und sofort weiss, ob es akzeptiert wurde?

Ich habe alles auf eine Seite gebracht. Karten unter «To upload» zeigen jedes nötige Dokument mit Benachrichtigungsdatum, Fälligkeitsdatum und Countdown. Abgelehnte Dokumente werden korallenrot und sagen, wann sie abgelehnt wurden. Akzeptierte Dokumente wandern in einen eigenen Bereich, und ein Banner bestätigt den Wechsel. Die Detailansicht nimmt Dateien per Drag-and-drop oder vom Handy entgegen, mit den letzten Uploads, Kommentaren der Prüfenden und einem kurzen Erklärvideo. Eine separate Bibliothek enthält Dokumente, die man nur herunterladen muss.

Meine Rolle

Product Designer. Ich gestaltete das Feature My Documents auf Basis des Markensystems von My EF: Onboarding, die Ansichten «To upload» und «Accepted», die Detailseite zum Hochladen und die Bibliothek mit Dokumenten zum Herunterladen, für Desktop und Mobile.

Was es schwierig machte

  • Viele Dokumente, viele Fristen

    Jede Karte musste zeigen, worum es geht, wann es fällig ist und wie viel Zeit bleibt, ohne überladen zu wirken.

  • Ablehnung ohne Frust

    Ein abgelehnter Upload brauchte einen klaren Grund und einen offensichtlichen Weg zum nächsten Versuch.

  • Desktop und Handy

    Manche laden Scans am Laptop hoch, andere Fotos direkt vom Handy. Beides musste gleich gut funktionieren.

Fragen, die wir stellten

  1. Was müssen Schülerinnen und Schüler zuerst wissen: was fehlt oder was als Nächstes fällig ist?
  2. Wie sagen wir jemandem, dass der Upload abgelehnt wurde, und helfen zugleich beim Beheben?
  3. Welche Dokumente muss man hochladen, und welche nur lesen?
01

Eine Seite für alles Fällige

Beim ersten Besuch stellen Coach Marks die Seite vor. Die Karten unter «To upload» tragen Benachrichtigungs- und Fälligkeitsdatum mit Countdown; abgelehnte Dokumente sind korallenrot markiert. Akzeptierte Dokumente stehen darunter, und ein grünes Banner bestätigt, wenn neue freigegeben sind.

Eine Seite für alles Fällige

Beim ersten Besuch erklärt eine Coach Mark zuerst den Bereich «To upload».

02

Hochladen und Feedback

Die Detailansicht nimmt Dateien per Drag-and-drop oder vom Handy entgegen. Die letzten Uploads erscheinen als akzeptiert, ausstehend oder abgelehnt, mit dem Kommentar der prüfenden Person, und ein kurzes Video erklärt das Hochladen.

Die Detailseite führt von der Ablagezone über den Status jedes Uploads bis zum Kommentar der prüfenden Person.

03

Weitere Dokumente

Eine Bibliothek enthält, was man nur lesen oder herunterladen muss: Verhaltenskodex, Kinderschutzrichtlinie, Versicherungsinformationen und Ähnliches.

Weitere Dokumente
Weitere Dokumente

Dokumente zum Lesen nutzen dasselbe Kartenmuster, nur ohne Fristen.

04

Auf dem Handy

Dieselben Flows laufen auf my.ef.com im mobilen Browser, mit «To upload» und «Accepted» als Tabs und dem Upload direkt aus der Kamerarolle.

Auf dem Handy

Zustände im mobilen Web: hochzuladen, Upload und zuletzt hochgeladen.

In Bewegung

Was ich mitnehme

  • Ein Datum setzen. Fälligkeitsdaten und Countdowns machten aus einer Checkliste etwas, das Schülerinnen und Schüler tatsächlich erledigen.
  • Ablehnung nützlich machen. Ein abgelehnter Upload hilft nur, wenn er den Grund nennt und den nächsten Schritt zeigt.
  • Auf Bestehendem aufbauen. Dank dem Markensystem von My EF wirkte ein neues Feature von Anfang an wie ein Teil des Portals.
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