WEBSITEPROJEKT MIUX / MIUX erklärt UX-Design-Methoden einfach und anschaulich, sodass Nutzer:innen diese direkt anwenden können. Die Methoden sind in fünf Phasen des Design-Prozesses kategorisiert. User können sich so die passende Methode für ihre Arbeitsphase heraussuchen und auf einem eigenen Board speichern.
Meine Rolle
UX/UI-Design, User Research, Prototyping & Testing, Branding
Team
2 Designer:innen
Zeit
Oktober 2019 – Februar 2020
Vorgehen & Arbeitsweise
Für die Entwicklung des Website-Prototypen MIUX sind wir einen agilen Designprozess durchlaufen, der aus fünf Phasen bestand, die wir mehrmals durchlaufen haben: 1. Sammeln & Verstehen, 2. Untersuchen & Definieren, 3. Gestalten, 4. Prototyping und 5. Testen. Dabei haben wir unterschiedliche Methoden eingesetzt, um Zusammenhänge zu verstehen, Bestehendes zu hinterfragen, neue Ideen zu entwickeln oder die bestmögliche Lösung zu finden. Im Folgenden ist eine kleine Auswahl der Methoden zu sehen, die wir während des Prozesses genutzt haben.
Persona & Kontext
Um die Nutzerbedürfnisse zu verstehen, haben wir mit einer Persona und mit Kontextszenarios gearbeitet. Diese haben wir aufgrund eines Tiefeninterviews, der Lebensstile des Zukunftsinstituts und der SINUS-Milieus erstellt.
Sitemap & Flowchart
Um die Informationsarchitektur zu skizzieren, haben wir eine Sitemap angefertigt. Eine Flowchart hat uns dabei geholfen mögliche Bewegungsmuster durch unsere Anwendung nachzuvollziehen.
Prototypes & Wireframes
Vor der Erstellung von high fidelity Prototypen in Adobe XD haben wir mit Hilfe von Papierprototypen und low fidelity Prototypen die einzelnen Seiten von MIUX skizziert und mit einem Experten getestet.
Testing
Mit Hilfe verschiedener high fidelity Prototypen haben wir in mehreren Guerrilla Tests unseren digitalen Prototypen weiterentwickelt und verbessert.
UI-Design
Die Entwicklung des UI-Designs ist vor allem unter Berücksichtigung der Zielgruppe entstanden. Diese beschreibt junge UX-Design-Interessierte mit unterschiedlichem Vorwissen. Das UI-Design greift daher die aktuellen Webdesign-Trends Line Art, Cyberpunk und Farbverläufe auf.
User Flow
Nutzerziel des User Flows ist das Finden und Abspeichern einer passenden Methode. Zudem ist die Registrierung Teil des Flows und zwei von anderen Nutzer:innen erstellte Boards werden gespeichert.
Digitaler Styleguide
Um bei einer Weiterentwicklung des Prototypen das UI-Design konsequent verfolgen zu können, haben wir einen digitalen Styleguide in Adobe XD erstellt. Dieser definiert und erläutert u. a. Schriften, Farben, Icons, Interaktions- und Navigationselemente.
