Me-HfG Redesign | Application 1

Themenfindung

Um uns auf eine konkrete App festlegen zu können, schauten wir uns zu Beginn mehrere bestehende Anwendungen an, die für ein Redesign infrage kamen. In die engere Auswahl nahmen wir dabei Amazon, Steam, die mobile Figma App sowie schließlich auch das HfG-Portal.

HfG-Portal

Nachdem wir uns dann für das HfG-Portal entschieden haben, beschäftigten wir uns zuerst mit dem Status Quo. Dabei ging es darum wie das Portal überhaupt aufgebaut ist, welches Werteversprechen es hat, sowie einzelne Funktionen und die Stärken und Schwächen aufzuzeigen.

Wettbewerber

Um uns an anderen bestehenden Portalen zu orientieren, analysierten wir zunächst verschiedene vergleichbare Anwendungen. Auf dieser Grundlage erstellten wir eine Competitor Map. Dafür wählten wir insgesamt vier Portale aus, die jeweils unterschiedliche Werteversprechen verfolgten – zum Beispiel in Bezug auf Nutzerfreundlichkeit, Vielseitigkeit, Modernität oder visuelle Ansprache.
Anschließend ordneten wir sowohl die ausgewählten Wettbewerber als auch HISinOne innerhalb der Competitor Map ein, um besser nachvollziehen zu können, welche Position die einzelnen Portale einnahmen und wo mögliche Potenziale lagen.

Value Proposition

Schließend definierten wir unser eigenes Werteversprechen und hielten fest, wie das neue HfG-Portal gestaltet sein sollte. Dafür sammelten wir zunächst zentrale Eigenschaften wie Übersichtlichkeit, Funktionalität, klare Strukturen, Zeiteffizienz sowie einen leicht verständlichen Leitfaden.

Auf dieser Basis entstand unsere Value Proposition:
„Dein ständiger Begleiter – vom Bewerbungsprozess bis zum täglichen Studi-Leben.“

Touchpoints

Costumer Journey

Um die genaue Customer Journey einzelner Nutzender besser nachvollziehen zu können, beschäftigten wir uns intensiv mit den jeweiligen Touchpoints. Dabei fokussierten wir uns auf zwei zentrale Perspektiven: die eines Bewerbers sowie die eines Studierenden.

Auf dieser Grundlage entstanden jeweils eigene Customer Journeys, die die Erfahrungen und Bedürfnisse dieser Nutzer*innen entlang der verschiedenen Kontaktpunkte abbildeten.

Umfrage und Usertests

Um insbesondere die aktuellen Pain Points der Studierenden besser zu verstehen, erstellten wir eine Umfrage mithilfe von Google Forms. Die Ergebnisse werteten wir anschließend aus und ordneten sie verschiedenen Kategorien zu, darunter Navigation und Nutzungserlebnis, Emotion und Sprache sowie Reflexion und Verbesserung.

Durch diese Strukturierung konnten wir die gewonnenen Erkenntnisse übersichtlich aufbereiten und gezielt ableiten, wie das Portal inhaltlich und funktional verbessert werden kann.

Zusätzlich führten wir noch Usertests an diversen Student*innen durch. Diese durften sich als Beispiel für einen Usertest ihre aktuelle Immatrikulationsbescheinigung runterladen.

Value Proposition Canvas

Um einen genauen Überblick zu verschaffen nahmen wir uns das Value Proposition Canvas zur Hand und sortierten nach Product and Services, Gain Creators und Pain Relievers, alles was wir den Nutzer*innen bieten wollen. Auf der anderen Seite der einzelne Nutzer und seine Pains, Gains und welche Costumer Jobs er durchführen muss.

Nach diesem Prozess legten wir für uns fest, wie wir das Redesign umsetzen wollten. Dafür definierten wir zentrale Stichpunkte, die uns während des gesamten Projekts als Orientierung dienten und uns stets vor Augen hielten, nach welchen Prinzipien wir das Redesign gestalten wollten.

How might we - Questions

Mit diesen Fragen haben wir nochmal genauer definiert WIE man WAS umsetzt.

Usecases

Danach entschieden wir uns für zwei Usecases, welche wir ausarbeiten wollen:
1. Usecase: Das Bewerben an der Hochschule.
2. Usecase: Das Herunterladen seiner Immatrikulationsbescheinigung.

Erste Wireframes

Designprinciples

Um unsere Design Principles zu definieren, hielten wir uns noch einmal vor Augen, wie die App am Ende wirken und funktionieren sollte. Mithilfe verschiedener Adjektive beschrieben wir die gewünschten Eigenschaften und ordneten diese anschließend thematisch in Gruppen.
Daraus entstanden mehrere übergeordnete Überschriften, die später sowohl das Design als auch den strukturellen Aufbau der App definierten und als gestalterische Leitlinien dienten.

Unser Designsystem

Bei der Typografie entschieden wir uns für die Schriftart Atlas Grotesk, da sie die Hausschrift der HfG ist. Für die Farbgestaltung orientierten wir uns zunächst an den bereits bestehenden, pro Studiengang definierten Farben. Diese erwiesen sich jedoch als gestalterisch zu eingeschränkt, weshalb wir sie überarbeiteten und weiterentwickelten, um sie flexibler und vielseitiger einsetzen zu können.

Designelemente

Als zentrales Designelement entschieden wir uns für Linien, die sich als Swipe Pattern durch die gesamte App ziehen sollten. Diese unterstrichen die Verbundenheit zwischen den einzelnen Studiengängen sowie den familiären Charakter der HfG. Die Linien wurden dabei mit den von uns neu definierten Farben versehen.
Die Linie des jeweils ausgewählten Studiengangs zog sich beispielsweise durch den gesamten Bewerbungsprozess und fand sich später im Studierenden-Home gemeinsam mit den Linien der anderen Studiengänge wieder. Somit kann man mithilfe des integrierten Swipe Pattern einen sichtbaren Verlauf erkennen.

Icons

Unsere Icons sind eckig und somit an das gesamte Design der App stimmig angepasst.