Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Die Rolle von Simplizität im Arbeitsprozess

Die Rolle von Simplizität im Arbeitsprozess

Abgabe

01 | Arbeitstitel

Die Rolle von Simplizität im Arbeitsprozess und ihr Einfluss auf die Produktivität Konzeption und Gestaltung einer digitalen Anwendung zur Unterstützung von Designer*innen.

02 | Kurzbeschreibung des Projektes

Die Anwendung soll die konzeptionelle Seite eines Designprojekts
zugänglicher gestalten und vereinfachen. Sie bietet die Möglichkeit, für jedes Projekt einen individuellen Workspace zu erstellen, in dem die
gewünschten Methoden durchgeführt werden können. In der integrierten Methodenbibliothek können Designer*innen Informationen zu den ­
einzelnen Methoden nachlesen und die passende für den aktuellen
Arbeitsschritt auswählen. Die Methoden lassen sich anschließend in dem dafür vorgefertigten Framework umsetzen. Dabei gibt die Anwendung niemals ein festes Raster vor, an das sich gehalten werden muss. So
können Designer*innen weiterhin auf ihre gewohnt kreative Weise arbeiten.

03 | Projektmanagement

Zeitplan.pngZeitplan.png

04 | Zielformulierung (Why, How, What)

Why How What.pngWhy How What.png
Forschungsfrage (überarbeitet).pngForschungsfrage (überarbeitet).png

06 | Recherche, Inhalte, Daten, Quellen

Ich sammele alle Inhalte und Rechercheerkenntnisse in Notion und Figma.

Link zu Figma

Link zu Notion

Wettbewerbsanalyse

Für die Recherche zu diesem Projekt analysierte ich Anwendungen aus ähnlichen Be­reichen. Dieser Schritt der Wettbewerbs­analyse war essenziell, um herauszufinden, welche Aspekte Nutzer*innen an ­bestehenden Tools schätzen und welche Funktionen möglicherweise Verbesserungspotenzial aufweisen.

Wettbewerbsanalyse 2.pngWettbewerbsanalyse 2.png
Wettbewerbsanalyse.pngWettbewerbsanalyse.png
Wettbewerbsanalyse Notion.pngWettbewerbsanalyse Notion.png
Wettbewerbsanalyse Asana.pngWettbewerbsanalyse Asana.png
Wettbewerbsanalyse Trello.pngWettbewerbsanalyse Trello.png
Wettbewerbsanalyse ClickUp.pngWettbewerbsanalyse ClickUp.png
Wettbewerbsanalyse Monday.pngWettbewerbsanalyse Monday.png
Wettbewerbsanalyse Taskade.pngWettbewerbsanalyse Taskade.png
Wettbewerbsanalyse Obsidian.pngWettbewerbsanalyse Obsidian.png
Wettbewerbsanalyse Cosmos.pngWettbewerbsanalyse Cosmos.png

07 | Eingrenzung der Zielgruppe

Bei der Zielgruppenanalyse habe ich verschiedene Methoden ausgeführt, um meine Zielgruppen mit ihren Bedürfnissen und Erwartungen zu verstehen und die Anwendung ­nutzungsorientiert zu konzipieren und zu gestalten.

Zielgruppenanalyse - Sinus Milieus.pngZielgruppenanalyse - Sinus Milieus.png
Zielgruppenanalyse - Wertemodell nach Schwartz.pngZielgruppenanalyse - Wertemodell nach Schwartz.png
Zielgruppenanalyse - Archetypen.pngZielgruppenanalyse - Archetypen.png
Zielgruppenanalyse - Alter und Arbeitsbereich.pngZielgruppenanalyse - Alter und Arbeitsbereich.png

08 | Umfrage

Um ein besseres Verständnis für meine Zielgruppen und deren Bedürfnisse zu gewinnen, erstellte ich eine Umfrage mithilfe von Google Forms. Die Umfrage mit dem Titel ­»Effiziente Projektorganisation/-unterstützung im Designprozess« umfasste insgesamt 18 Fragen.

Die Umfrage fand vom 29. Oktober 2024 bis zum 19. November 2024 statt. In diesem Zeitraum nahmen 26 Personen teil. Die Verbreitung der Umfrage erfolgte über die Plattformen WhatsApp, Slack und Instagram.

Auswertung Frage 1.pngAuswertung Frage 1.png
Auswertung Frage 2.pngAuswertung Frage 2.png
Auswertung Frage 3.pngAuswertung Frage 3.png
Auswertung Frage 4.pngAuswertung Frage 4.png
Auswertung Frage 5.pngAuswertung Frage 5.png
Auswertung Frage 6.pngAuswertung Frage 6.png
Auswertung Frage 7.pngAuswertung Frage 7.png
Auswertung Frage 8.pngAuswertung Frage 8.png
Auswertung Frage 9.pngAuswertung Frage 9.png
Auswertung Frage 10.pngAuswertung Frage 10.png
Auswertung Frage 11.pngAuswertung Frage 11.png
Auswertung Frage 12.pngAuswertung Frage 12.png
Auswertung Frage 13.pngAuswertung Frage 13.png
Auswertung Frage 14.pngAuswertung Frage 14.png
Auswertung Frage 15.pngAuswertung Frage 15.png
Auswertung Frage 16.pngAuswertung Frage 16.png
Auswertung Frage 16-1.pngAuswertung Frage 16-1.png
Auswertung Frage 17.pngAuswertung Frage 17.png
Auswertung Frage 18.pngAuswertung Frage 18.png
Erkenntnisse Umfrage.pngErkenntnisse Umfrage.png
Erkenntnisse Umfrage-1.pngErkenntnisse Umfrage-1.png

09 | Personas

Persona 1.pngPersona 1.png
Persona 1_Board.pngPersona 1_Board.png
Persona 2.pngPersona 2.png
Persona 1_Zielgruppenzuordnung.pngPersona 1_Zielgruppenzuordnung.png
Persona 2_Board.pngPersona 2_Board.png
Persona 2_Zielgruppenzuordnung.pngPersona 2_Zielgruppenzuordnung.png
Persona 3.pngPersona 3.png
Persona 3_Board.pngPersona 3_Board.png
Persona 3_Zielgruppenzuordnung.pngPersona 3_Zielgruppenzuordnung.png

10 | User Stories

allgemeine User Stories

User Stories - allgemein.pngUser Stories - allgemein.png
User Stories - allgemein-1.pngUser Stories - allgemein-1.png
User Stories - allgemein-2.pngUser Stories - allgemein-2.png

spezifischere User Stories

User Stories.pngUser Stories.png
User Stories-1.pngUser Stories-1.png
User Stories-2.pngUser Stories-2.png

11 | Use Cases & User Journeys

Use Case.pngUse Case.png
User Journey.pngUser Journey.png
User Journey-1.pngUser Journey-1.png
Use Case-1.pngUse Case-1.png

12 | Funktionsbeschreibung

Funktionsbeschreibung.pngFunktionsbeschreibung.png

13 | Funktionsbewertung

Funktionsbewertung.pngFunktionsbewertung.png

14 | Wireframes

Ein genauer Überblick zu allen Wireframes ist in meinem Figma-Board zu finden: https://www.figma.com/design/TdGwKqzr66xVwT6ej4vsKN/Bachelor?node-id=623-2303&t=Ax5e28MCkTOHUFzP-1

Wireframes_Dashboard.pngWireframes_Dashboard.png
Wireframes_Workspace.pngWireframes_Workspace.png
Wireframes_Fragen.pngWireframes_Fragen.png
Wireframes_Moodboard.pngWireframes_Moodboard.png
Wireframes_Persona.pngWireframes_Persona.png
Wireframes_Umfrage.pngWireframes_Umfrage.png
Wireframes_Persona Bearbeitungsmodus.pngWireframes_Persona Bearbeitungsmodus.png
Wireframes_Methodenbibliothek.pngWireframes_Methodenbibliothek.png
Wireframes_Methode.pngWireframes_Methode.png

15 | Prototyping & Click-through

Nach der Erstellung der Wireframes wurden diese in Figma als klickbarer Prototyp umgesetzt. Mit diesem Prototyp führte ich erste Tests durch, um fehlende Funktionen oder Frames zu identifizieren. Dabei orientierte ich mich an den erstellten User Stories und prüfte die darin beschriebenen Aktionen.

Click-Trough 1.pngClick-Trough 1.png
Click-Trough 2.pngClick-Trough 2.png
Click-Trough 4.pngClick-Trough 4.png
Click-Trough 3.pngClick-Trough 3.png
Click-Trough 5.pngClick-Trough 5.png
Click-Trough 6.pngClick-Trough 6.png

16 | Moodboard und Designvarianten

Zu Beginn dieses Projekts erstellte ich ein allgemeines Moodboard mit Bildern, die mir erste Ideen lieferten. Dabei legte ich zunächst keinen
spezifischen Stil fest. Zusätzlich entwickelte ich ein Konzeptionsmoodboard, in dem ich Bilder sammelte, die mir auf konzeptioneller Ebene
Ideen für das Projekt lieferten.

allgemeines Moodboard

allgemeines Moodboard.pngallgemeines Moodboard.png

Konzeptionsmoodboard

Konzeptionsmoodboard.pngKonzeptionsmoodboard.png

Designvarianten

Anhand dieser beiden Moodboards testete ich verschiedene Designstile aus.

Designvariante 1.pngDesignvariante 1.png
Designvariante 2.pngDesignvariante 2.png
Designvariante 3.pngDesignvariante 3.png
Designvariante 4.pngDesignvariante 4.png
Designvariante 6.pngDesignvariante 6.png
Designvariante 5.pngDesignvariante 5.png

Moodboard

Im nächsten Schritt wählte ich die Designvarianten aus, die am besten funktionierten. Meine Entscheidung fiel auf die Varianten 1, 3 und 6. Basierend auf diesen angewendeten Stilen erstellte ich Moodboards, die die restliche Gestaltung der Anwendung aufgreifen und veranschaulichen sollen. Zusätzlich gestaltete ich drei weitere Screens, um zu überprüfen, ob die Designs auf allen Seiten gut funktionieren.

Moodboard 1.pngMoodboard 1.png
Moodboard.pngMoodboard.png
User Story-1.pngUser Story-1.png
User Story.pngUser Story.png

Moodboard 2.pngMoodboard 2.png
Moodboard-1.pngMoodboard-1.png
User Story-2.pngUser Story-2.png
Persona.pngPersona.png

Moodboard 3.pngMoodboard 3.png
Moodboard-2.pngMoodboard-2.png
User Story-4.pngUser Story-4.png
User Story-3.pngUser Story-3.png

17 | User Testing

Mit meinem Prototypen führte ich User Testings durch. Dafür erstellte ich eine Tabelle mit vier verschiedenen Szenarien, die ich wie folgt beschrieb:

- Als Nutzer*in möchte ich meine neuesten Mitteilungen im Projekt »WahlKompass« sehen und direkt auf eine davon antworten.

- Als Nutzer*in möchte ich einen Überblick über UX-Methoden bekommen, um herauszufinden, wann und warum ich sie anwenden sollte.

- Als Nutzer*in möchte ich alle Dinge, die mich inspirieren, an einem Ort sammeln, um sie nicht zu verlieren. Ich möchte sicherstellen, dass sie nicht in Vergessenheit geraten, wenn ich sie später noch nutzen möchte. Dafür möchte ich ein Moodboard erstellen und ein Bild darin abspeichern.

- Als Nutzer*in möchte ich herausfinden, welche Methode für meinen aktuellen Arbeitsschritt passend ist, um produktiv weiterarbeiten zu können.

Während des Testings habe ich den Testpersonen die Szenarien
nacheinander vorgelesen und beobachtet, wie sie diese in der Anwendung umsetzten. Zusätzlich gaben sie mir während der Durchführung
Anmerkungen zu Dingen, die sie als irritiertend oder störend empfanden.

Testing DICE.pdf PDF Testing DICE.pdf

18 | Finales Design

Für das finale Design habe ich mich für das dritte Moodboard entschieden.

Design_Anmeldung.pngDesign_Anmeldung.png
Dashboard.pngDashboard.png
Design_Dashboard.pngDesign_Dashboard.png
Design_Persona.pngDesign_Persona.png
Design_Umfrage.pngDesign_Umfrage.png
Design_Wettbewerbsanalyse.pngDesign_Wettbewerbsanalyse.png
Design_Moodboard.pngDesign_Moodboard.png
Design_Notiz - Text hinzufügen.pngDesign_Notiz - Text hinzufügen.png
Design_Methoden.pngDesign_Methoden.png
Design_Fragebogen - Spezifische Probleme und Ursachen identifizieren..pngDesign_Fragebogen - Spezifische Probleme und Ursachen identifizieren..png
Design_Fragebogen.pngDesign_Fragebogen.png

19 | Prototyping/Links

20 | Styleguide

Farben.pngFarben.png
Typography.pngTypography.png
Icons.pngIcons.png
Raster.pngRaster.png
Grafiken.pngGrafiken.png
UX-Elemente.pngUX-Elemente.png
Animation.pngAnimation.png
Logovarianten.pngLogovarianten.png

21 | Screencasts

Gesamte Anwendung

Dashboard

Workspace

Methodenbibliothek

Moodboard

Projekt erstellen

Workflow hinzufügen

Notiz erstellen

Kommentar schreiben

22 | Präsentationsvideo

23 | Ausstellungssituation

Ausstellungssituation2.pngAusstellungssituation2.png

24 | Thesis

JoramLilly_BA_Simplizität-im-Arbeitsprozess.pdf PDF JoramLilly_BA_Simplizität-im-Arbeitsprozess.pdf

25 | Kolloquium

Verteidigung.pdf PDF Verteidigung.pdf

________________________________

Exposé

Expose_LillyJoram_SimplizitätimArbeitsprozess.pdf PDF Expose_LillyJoram_SimplizitätimArbeitsprozess.pdf

Kick-Off Präsentation

Kick-Off_Präsentation.pdf PDF Kick-Off_Präsentation.pdf

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Betreuer_in

foto: Prof. Norbert Diedrich

Zugehöriger Workspace

Bachelor Storytelling / UX

Entstehungszeitraum

Wintersemester 2024 / 2025