Gabri und Andy konnten im Projekt “Agenda 2030 für nachhaltige Entwicklung” des Eidgenössischen Departement für auswärtige Angelegenheiten EDA in den Rollen als UX Designer*in mitwirken. Gerne möchten wir einen Einblick in die Vorgehensweisen und Resultate geben.
Andy war in den frühen Phasen des Projektes Teil des Teams, um grundlegende Konzepte zu erarbeiten und Gabri, um diese Konzepte weiter auszuarbeiten und die Details der Website zu gestalten.
Frühes Design
Im Rahmen der Phase des frühen Designs wurde die spätere Website konzeptuell modelliert. Anhand von vorhandenen Dokumenten, Interviews mit Fachvertretern und möglichen Anwendern sowie Workshops, wurde der Umfang der Website definiert und grundlegende Navigations- und Interaktionskonzepte definiert. Papierprototypen unterstützten diesen Prozess, um Ideen und erste Konzepte greifbar zu machen. In dieser Phase leiteten wir als UX-Designer die involvierten Personen an, die Gedanken und Ideen zu Papier zu bringen und iterativ zu verbessern. Wo nötig, gaben wir Inputs.
Erste Entwürfe
Nachdem sowohl der grobe Umfang als auch einzelne Seiten validiert waren, wurde der Prototyp weiter ausgearbeitet. Sowohl Inhalt, als auch Umfang jeder einzelnen Seite wurde im Prototyp erarbeitet. Es wurde definiert, wie Benutzer durch die Seite navigieren, mit der Seite interagieren (Interaktionsdesign) und wie die Informationen strukturiert werden (Informationsarchitektur).
Ziel dieser ersten Entwürfe war, so schnell wie möglich ein greifbares und klickbares Konzept zu erarbeiten, um eine Diskussionsgrundlage zu haben und konkrete Anwendungsfälle erlebbar zu machen. Iterativ wurde der Prototyp weiterentwickelt und kontinuierlich verbessert. Mithilfe eines Low-Fidelity-Prototyps fanden erste Evaluationen durch Stakeholder und Benutzer statt.
Um früh sicherzustellen, dass die Website barrierefrei umgesetzt werden kann, wurde der Prototyp gegen die Web Content Accessibility Guidelines (WCAG) 2.1 geprüft.
Low-Fidelity-Prototyp
Verfeinertes Design
Beim Ausarbeiten des zuvor erarbeiteten Entwurfs ging es darum, UI-Komponenten pixelgenau zu definieren. Dafür wurde der Prototyp mittels Farben und Schriftarten visuell ausgearbeitet und die zuvor grob beschriebenen Konzepte so weit verfeinert, sodass diese von den Entwicklern umgesetzt werden konnten.
Anhand des in Sketch erstellten High-Fidelity-Prototypen fand erneut eine Validierung durch die Auftraggeber, Stakeholder und vor allem zukünftigen Benutzer statt. Auch hier flossen Feedbacks immer wieder in das Ergebnis ein und der Prototyp wurde iterativ bis zur Endversion ausgearbeitet.
Als klar war, dass sich das Design nicht mehr grundlegend ändern wird, wurde auch eine mobile Variante des Prototyps erarbeitet.
High-Fidelity-Prototyp (Mobile und Tablet)
Umsetzung
Während der Umsetzung der Website (Desktop und Mobile-Variante) wurden erneut Details und Feinheiten aus- und überarbeitet. Aufgrund des umfassenden Konzepts und der pixelgenauen ausgearbeiteten Seiten konnten sich die Entwickler auf die technischen Details fokussieren.
Fazit
Dieses Projekt wurde nach Scrum realisiert. Durch den gesamten Prozess haben UX-Designer*innen, -Fachexperten*innen vom EDA, sowie Entwickler*innen eng zusammengearbeitet. Durch die frühe Einbindung von UX-Designer*in konnte eine intuitive, benutzerfreundliche und barrierefreie Webseite realisiert werden.
Zur erarbeiteten Website geht es hier: https://www.sdgital2030.ch/
Willst du für dein Produkt eine optimale User Experience oder brauchst du eine nutzerfreundliche Website, die deine Inhalte dem Zielpublikum vermittelt? Dann nimm gerne mit mir Kontakt auf: gabriela.gomezdelatorre@avega.ch
Immer auf dem Laufenden bleiben? Melde dich jetzt für den Newsletter an und folge uns auf LinkedIn.