Hintergrund

Die cubetech GmbH ist eine Digital Agentur mit Hauptsitz in Bern. Die Geschäftsleitung der Agentur hatte die Vision, ihren Kund:innen ein umfangreiches Kundenportal anzubieten. Damit sollte das Verwalten der Zusammenarbeit und die Kommunikation verbessert werden. Im Portal würden kleine Supportanträge, Meilensteine von Grossprojekten, Hosting, Vertrags- und Rechnungsmanagement zusammenkommen. Die Hoffnung war, mit dem Einsatz eines eigenen Tools effizienter und professioneller zu werden.

Projektablauf

Design des Extranet MVPs

Beim Projekt handelte es sich ursprünglich um eine Vision, die von unseren Entwicklern als Nebenprojekt programmiert werden kann. Dem Vorhaben wurde jedoch kaum Priorität und Ressourcen zugewiesen. Der Umfang der Arbeiten wäre so gross, dass sich die Projektleitung dazu entschied, zuerst einen von ihr definierten MVP (Minimum Viable Product) anzustreben. Mein Auftrag bestand darin, innert 3 Tagen ein Design für diesen MVP zu entwerfen.

Welcome-Tour für das Extranet

Am Ende meiner vierjährigen Ausbildung musste ich im Lehrbetrieb eine praktische Arbeit (IPA) umsetzen. Der Aufwand dafür sollte 15 Tage betragen. cubetech hat entschieden, dass sich meine IPA gut für ein Projekt im Zusammenhang mit dem Portal eignet. Konkret erhielt ich den Auftrag, eine Welcome-Tour für den Extranet MVP zu gestalten.

Entwicklung des Extranets

Direkt nach meiner IPA wurde das Vorhaben auf Eis gelegt. Die Erkenntnisse meiner Umfragen legten diesen Entscheid nahe. Ein Grossteil der Kunden sah im angestrebten Portal keinen starken Vorteil und wollte lieber über traditionelle Wege kommunizieren. Unter Anbetracht gut ausgebauter Alternativen wie Asana, ClickUp etc., wäre der Entwicklungs-Aufwand ohnehin nicht gerechtfertigt gewesen.

Kommentar

Dieses Projekt macht mir wieder einmal deutlich, wie unglaublich wertvoll eine umfangreiche Recherche ist. Dank meiner IPA verschwenden wir heute nicht massiv Zeit und Geld, um ein Tool zu erschaffen, dass kaum Anklang gefunden hat. Idealerweise hätten diese Recherchen aber bereits zu einem früheren Zeitpunkt stattgefunden.

‍

Das Kundenportal

Das cubetech Extranet bringt die wichtigsten Dokumente und die gesamte Support-Kommunikation an einem zentralen Platz zusammen. Langes Suchen im Mail-Chaos ist Geschichte und mehrere Mitarbeitende können problemlos zusammenarbeiten.

‍

‍

Farbe, Buttons und Schrift basieren auf dem Corporate Design von cubetech. Ich habe dieses allerdings mit drei passenden Farben (Weinrot, Orange, Hellgrün) ergänzt. Sie dienen als Hinweisfarben und sollen den Nutzenden schnell aufzeigen, ob ein Status gut oder schlecht ist. Die hohe Transparenz über den aktuellen Stand der Prozesse fördert das Vertrauen und minimiert Rückfragen.

‍

‍

Learnings

Die technischen Prozesse und Möglichkeiten sind zwar wichtig zu verstehen, sie sollten aber nicht im Zentrum stehen. Es ist schnell passiert, dass diese den Bedürfnissen der Nutzenden widersprechen und das Produkt massiv an Wert verliert.

‍

‍

Die Welcome-Tour

Mein Auftrag ist die Konzeption, das Screendesign und der Prototyp einer Welcome-Tour für das Extranet-Portal von cubetech.ch. Dieser Teil entstand im Rahmen meiner praktischen Abschlussprüfung.

Herausforderungen

• Das Extranet ist weder fertig programmiert, noch getestet. Es gibt dementsprechend keine Erfahrungswerte, auf die zurückgegriffen werden könnte.

• Für die Recherche & Konzeption für das Extranet wurde deutlich zu wenig Zeit investiert.

Konkurrenzanalyse

User Research

Bedürfnisanalyse

Damit die Tour auf User:innen zugeschnitten ist, erstellte ich eine Online-Umfrage, welche die Kundenbedürfnisse ermitteln sollte. Die Umfrage wurde von acht Kund:innen beantwortet. Die 20 enthaltenen Fragen sind qualitativ und quantitativ.

Das wollte ich herausfinden:

• Stimmen die Einsendungen mit der Zielgruppe überein?
• Wie sollen Informationen aufbereitet werden?
• Wie ist die Sympathie gegenüber den bisherigen Abläufen mit cubetech und wo treten darin Probleme auf?

Meine Erkenntnisse:

• Die Vorfreude auf ein Extranet ist etwas gespalten. Das Spektrum umfasst sehr motivierte, bis skeptisch zurückhaltende Kund:innen.
• Die Welcome Tour muss im Vorfeld und während der aktiven Extranet-Nutzung durchführbar sein.
• Tasks müssen ohne Abschluss der kompletten Welcome-Tour durchführbar sein.
• Hilfestellungen müssen jederzeit abrufbar sein.
• Dass der persönliche Kontakt sehr wichtig ist, deckt sich mit den Erkenntnissen aus der Zielgruppenanalyse.
• Es muss gut über Prozesse und ihre Folgen aufgeklärt werden.
• Missverständnisse kommen vor und werden als ärgerlich empfunden. Eine Hilfestellung zu wünschenswerten Angaben der Support-Anfrage könnte dem möglicherweise entgegenwirken.
• Informationen müssen grafisch umgesetzt oder unterstützt werden.

Customer Journey

Brainstorming

Das Brainstorming eignet sich besonders als Startpunkt der kreativen Problemlösung und sah folgendermassen aus.

1. Auf pinken Post-its wurden stichwortartig Probleme niedergeschrieben, die uns aus den Recherchen bekannt sind.
2. Die Probleme wurden mit Ideen zur potenziellen Lösungen (gelbe Post-its) ergänzt.
3. Erst zum Schluss wurden die Zettel sortiert bzw. bewertet. Am grössten war dabei leider die Kategorie «nicht Teil der Welcome-Tour». Der grosse Vorteil daran ist jedoch, dass mein Denken freier war. So befinden sich nun keine Dinge in der Welcome-Tour, die anders sinnvoller gelöst werden könnten.

Skizzen

Die Lösungen aus dem Brainstorming wurden schliesslich in Skizzen übersetzt. Diese sollten den Ablauf verdeutlichen, Probleme aufzeigen und Ideen zur visuellen Anordnung generieren.

Prototyp / Interaktionskonzept / Visual Design

Unter Beachtung der Kommentare wurden die Skizzen in den Prototypen übertragen. Zu einigen Schritten wurden dabei verschiedene Lösungsansätze erstellt und miteinander verglichen.

‍

Icons

Der Verstand wählt das Wort, das Herz spricht besser auf das Icon an. Symbole reichern das Interface an, sie machen es hübscher, wärmer, menschlicher.

Ich skizzierte, wählte die passendste Variante aus und setzte diese um. Bei der Auswahl wurde darauf geachtet, dass sie sich massgeblich von anderen Icons der Reihe abgrenzen und dass sie Lösungen statt Probleme zeigen, bzw. positive Gefühle wecken. Beim Kreieren der Icons wurde darauf geachtet, dass sie den eigenen Stil bestehender cubetech Icons übernehmen und somit einen Wiedererkennungswert haben.

Testing

Um relevantes Feedback zu erhalten, wurden für das Testing cubetech Kund:innen angefragt, wobei sich drei Personen zur Verfügung stellten.

Per Screensharing habe ich das tatsächliche Verhalten der Nutzenden remote beobachtet, wodurch wichtige Usability-Schwachstellen aufgedeckt werden konnten. Das Testing dauerte knapp 30 Minuten und wurde immer nach dem gleichen Schema abgehalten. Die gestellten Fragen sowie erhaltenen Antworten sind in der detaillierten Dokumentation zu lesen.

Nach dem Testing wurden die einzelnen Zeilen und Spalten der Notizen quergelesen und anschliessend als Erkenntnisse zusammengefasst. Dabei besonders überraschend war, dass die Tour nicht sehr intensiv genutzt wurde. Texte wurden nicht gelesen oder sogar die gesamte Tour für unnötig befunden. Aus den herauskristallisierten Problemen wurden anschliessend mögliche Lösungen geformt. Daraus ergab sich, dass manche Konzepte angepasst oder sogar neu aufgesetzt werden mussten.

Finalen Prototyp austesten

Desktop:

https://xd.adobe.com/view/9cd196d6-f7ec-4dd2-ad96-75f74821379a-c982/

Mobile:

https://xd.adobe.com/view/536d01e0-6d26-4875-a893-70452d8fc266-063e/

Fazit

In dieser IPA entstand ein Produkt, auf das ich sehr stolz bin. Es ist in einer sehr finalen Form und hat viele sinnvolle Aspekte einbezogen, die Nutzende mit grosser Sicherheit wertschätzen.

Besondere Freude bereiten die zahlreichen Erkenntnisse aus Recherchen und Testings, welche einen spürbaren Einfluss auf das Projekt hatten. Konkret ist das in meinem Projekt, als z.B. der hohe Stellenwert persönlicher Kommunikation, sowie der Wunsch nach Selbstständigkeit auffiel.

‍