Projekt “Premium Living” von findmyhome.at–eine UX Case Study
Als Senior UX Designer des Immobilienportals findmyhome.at war ich bei der Erstellung einer neuen Enterprise Software verantwortlich für User Research, Wireframing, Visual Design und Prototyping, bis zum HTML/CSS-Handout. Mein Projektteam bestand aus Marketing, Qualitätsmanagement, Developern und — punktuell — der Geschäftsführung.
Mit diesem Produkt konnte das Unternehmen erfolgreich einen neuen Geschäftszweig eröffnen.
Das Projekt
Auftraggeber
Immobilienportal Findmyhome.at
Bei dem neuen Produkt „Premium Living“ handelt es sich um ein umfangreiches Content-Management-System zum Erstellen von Websites zur attraktiven Präsentation exklusiver Immobilien, das an Bauträger, Immobilienbüros und Makler als Kunden ausgerollt wurde.
Es sollten unterschiedliche Daten von gering technik-affinen Mitarbeitern von Immobilienbüros eingetragen werden können und diese Kunden sollten von unserer Seite administriert und abgerechnet werden können.
Wir hatten von Beginn an eine fixe Deadline mit einem halben Jahr Zeit für den Marktstart.
Bestehende Produkte auf dem Markt
Die bestehenden Systeme sind wenig intuitiv, sodass
- Kunden und Mitarbeiter umfangreich eingeschult werden müssen und
- die Bearbeitungszeit lang und personalintensiv ist.
Ziel
Das neue Produkt sollte ein Geschäftsmodell mit höherer Gewinnspanne ermöglichen, indem die Informationen und Medien intuitiv von Bauträgern, Immobilienbüros und Beratern — von gering technik-affinen Maklern bis Millenials — selbst erstellt und bearbeitet werden können.
Mein Beitrag
Ich war in verschiedenen Funktionen verantwortlich für die Konzeption und Gestaltung der App, in ständiger Kommunikation mit den Developern, bis zum Hand-off eines funktionalen HTML/CSS- Files.
Meine Rollen
- User Researcher
- UX-Design
- Interaktion Design und Prototyping
- User Testing
- Visual Design
Erste Annäherung
- Wir begannen mit einem Workshop in drei Teilen, da der Geschäftsführer als Entscheider nur begrenzt verfügbar war. Frontend- und Backend-Developement waren bei jedem Termin dabei.
- Danach führte ich Interviews mit Powerusern bisheriger Systeme, wie Vertriebsleiter oder Dateneingabespezialisten in Immobilienbüros. Auf die Expertise dieser Nutzer griff ich immer wieder, bis zu den User Tests der Prototypen, zurück.
Ein Beispiel für die Entwicklung neuer Features durch User Research
Durch diese User Research stieß ich auf das Problem, dass besonders Vertriebsmitarbeiter zu einem Objekt unterschiedliche Ansprechpartner haben, wie Bauträger, Immobilienbüros oder Makler der einzelnen Immobilien. In den bisherigen Systemen konnte man nur einen einzigen Ansprechpartner pro Objekt angeben.
Die Eingabeoption für Ansprechpartner auf jeder Kundenebene wurde ein Key-Feature des neuen Produkts.
Die Mühen der Ebene
Ich legte großes Augenmerk auf die Arbeit mit Wireframes und auf Besprechungen mit den verschiedenen Stakeholdern, um alle geschäftlichen und rechtlichen Anforderungen mit der bestmöglichen Nutzererfahrung aufzusetzen.
Menüführung
Ein zentraler Punkt der App sind die Screens für das Anlegen der Kunden- und Objektdaten. Über mehrere Iterationen gelang es, die unterschiedlichen Kategorien der Informationen zu strukturieren:
- Kundendaten
- Allgemeine Informationen über das Objekt
- Detailinformationen
- Medienuploads
- Darstellung der Objekte auf der Landingpage
Entwicklung des Home-Screens
In der Ausgangskonzeption war die Listenansicht des Home-Screens nur für den Überblick und die Suche nach Kunden oder Objekten/Projekten gedacht. Das Hauptaugenmerk bei der ursprünglichen Listenansicht lag auf den Filtern und der schnellen Suche.
Über mehrere Iterationen von Lo-Fi-Prototypes erreichte ich, dass sich bereits in dieser Listenansicht alle wesentlichen Informationen anzeigen und bearbeiten lassen.
Die Listenansicht wurde dadurch immer mehr von der reinen Suche zum primären Tool für die Dateneingabe.
Dadurch änderte sich auch die Gewichtung zwischen Kunden und Objekten: Zu Beginn gingen wir davon aus, dass der Kunde zentral ist und diesem die Objekte/Projekte zugeordnet sind. Durch die neuen Möglichkeiten kam nun aber bei Tests der Wunsch auf, Objekte/Projekte unabhängig von Kunden erstellen und bearbeiten zu können.
Verworfene Designs
Eines der zahlreichen Beispiele für die Evolution des Designs ist die Entwicklung der Suchfunktion: Ursprünglich war nur ein allgemeines Suchfeld als Topbar geplant. Dann testeten wir speziell nur für die Listenansicht eine Detailsuche in der Sidebar. Durch die wachsende Bedeutung der Listenansicht stellten wir bei Interviews fest, dass die User verwirrt waren über die beiden Positionen der unterschiedlichen Suchen. So vereinigten wir die Suchfunktion wieder, indem die Detailsuche nach oben zum allgemeinen Suchfeld kam.
Das Finish
Das Branding des Unternehmens war sehr stark auf klassisches Print-Design ausgerichtet, mit nur wenig Erfahrung in der Überführung zu digitalem Design.
Die Farbpalette bestand hauptsächlich aus einem dunklen Blau, das auch für Überschriften verwendet wurde, wodurch sich Schwierigkeiten in der konsistenten Darstellung von Hyperlinks ergaben. Die zweite Hauptfarbe war ein sattes Rot, mit einer großen Ähnlichkeit zu Error-Meldungen. Um ein nachvollziehbares und konsistentes Design der App zu gewährleisten, verwendete ich alternative Farbskalen, mit denen ich die Farbwerte der CI-Farben erhalten und nur Sättigung sowie Grauwert anpassen konnte.
Ich streute schon sehr früh zwischen den Lo-Fi-Wireframes schrittweise einzelne Screens in Richtung finales Visual Design ein, um die Reaktionen zu testen. Im Zuge der weiteren Schleifen testete ich immer mehr Screens in immer weiter ausgearbeitetem Visual Design, sodass ich auch bei den Teammitgliedern ein Verständnis hin zu Inklusion, Lesbarkeit und Konsistenz erreichen konnte.
Interaktionen
Da es in der App sehr viele voneinander abhängige Auswahloptionen gibt, war es schon in einer sehr frühen Phase von Wireframes nützlich, Prototypen für die Interaktionen zu entwerfen, um die einzelnen Screens oder auch nur Teile davon testen zu können.
Click-through Homescreen — Kunde — Objekt:
Im folgenden Click-through ist ein Prototyp für die wesentlichen Interaktionsmöglichkeiten in der Listenansicht dargestellt. Die Einträge zur Übersicht und Suche in der Liste sind einzeilig angeführt, können darüber hinaus jedoch mit einem Klick auf den Balken des Listeneintrags aufgeklappt werden. In diesem Zustand sind die wesentlichen businessrelevanten Informationen zum Kunden erstellbar oder zu bearbeiten (einschließlich Buchungszeitraum).
Beim Hover über den Kundennamen erscheint die Hyper-Verlinkung zum Datensatz. Über diese Mikrointeraktion komme ich zum vollen Datensatz des Kunden, bei dem ich unten auch die zugehörigen Objekte angeführt sehe. So kann ich direkt zum Kunden gehörige Objekte anlegen oder bestehende bearbeiten.
Vice versa habe ich in der Objekte/Projekte-Listenansicht die gleichen Möglichkeiten und kann im Click-through auch vom Objekt zum Kunden kommen oder diesen neu anlegen.
Besonders die Möglichkeiten der schnellen Bearbeitung in der Listenansicht wurde erst durch Prototypen erkennbar, sodass wir dieses Asset immer weiter ausgebaut haben.
Click-through Namensänderung des Objekts:
Die folgende Mikrointeraktion des Bearbeiten/Erstellen eines Eintrags in der Listenansicht hat uns erst die oben erwähnten übergeordneten Strukturen ermöglicht.
Im Unterschied zum Klick auf den Balken wählt man hier das Bearbeiten-Icon aus. Das schafft zusätzliche Sicherheit und Vertrauen, da nichts unbeabsichtigt verändert werden kann.
Die Icons werden ersetzt durch den Speicher-Button, wodurch der Bearbeitungsmodus visualisiert ist. Wenn man das zu bearbeitende Feld auswählt, zeigt ein farbiger Rahmen an, dass jetzt nur genau dieses Feld bearbeitet wird und kein anderes. In diesem Feld kann nun ein neuer Eintrag erstellt, oder ein bestehender verändert werden.
Mittels der drei Icons Bearbeiten, Duplizieren und Preview kann somit sehr schnell und simpel der Eintrag eines beispielsweise ähnlichen Kunden dupliziert, kleine Änderungen schnell bearbeitet, abgespeichert und als Vorschau auf der Landingpage kontrolliert werden.
Die Mikro-Interaktionsmöglichkeiten sind
- Balken zum Auf- und Zuklappen
- Hover und Klick auf den Namen
- Duplizieren
- Bearbeiten
- Preview
- Speichern
Überraschung
Bei der ersten Präsentation aller Screens im finalen Design kam es plötzlich zu einem Stopp von Feedback. Nach einigen Erkundigungen über diese Zurückhaltung wurde klar, dass die Präsentation des „fertigen“ Designs alle zu respektvoller Zurückhaltung veranlasste.
Nachdem ich diese Befürchtungen zerstreuen konnte, wirkte das fortgeschrittene Visual Design und die high-fidelity Prototypes jedoch sehr diskussionsfördernd. Das folgende Feedback war großartig und brachte uns alle einen wesentlichen Schritt vorwärts.
Learning
Je mehr ein Produkt durch Visual Design und Prototyping einer funktionierenden App gleicht, desto mehr wird Usern erst bewusst, was sie eigentlich möchten.
Die Schwierigkeit liegt darin, gleichzeitig etwas zu präsentieren, das “fertig” aussieht, dabei aber den Teammitgliedern und Testusern dennoch das Gefühl zu geben, dass sie Änderungswünsche äußern können. Man muss darauf gefasst sein, dass dadurch in einer recht späten Phase des Designprozesses noch wesentliche Entwicklungen und Nutzen für das Produkt herauszuholen sind.
Hand-off
Vom ersten Workshop an und bei jedem Meeting war das Development mit dabei. Ich war über das ganze Projekt hindurch in ständiger Kommunikation mit Frontend- und Backenddevelopement über die technische Umsetzbarkeit der Screens und Prototypes.
Wir tauschten über Tools wie Invision und Zeplin Assets des Designs aus, aber das tatsächliche Hand-off bestand in einem funktionalen HTML-File, das ich im Visual Studio Code schrieb.
In diesem HTML-File führte ich alle Felder, Switches und Interaktionen auf ihre zugrundeliegenden HTML-Funktionen — Checkboxes, Radio Buttons, Input Fields usw. — zurück, sodass bereits bei der ersten Schleife der technischen Umsetzung alle Inputs, Datenbanklogiken und Funktionalitäten getestet werden konnten.
Ich merkte bei jedem Schritt detailliert an, was zu tun ist und was es zu beachten gilt, mit den entsprechenden Designs und Prototypen als Vorlage.
Unsere Developer nahmen das Hand-off vollständig ab und konnten direkt in die Umsetzung mittels react.js gehen.
Nico, unser php-Programierer
Win/Win
Ich konnte als Vertreter der User bei der Erstellung dieses digitalen Produkts ein ohne Bedienungsanleitung oder langwierige Einschulung intuitiv benutzbares Backend gestalten.
- Eingewöhnungszeit < 10min.
- Aufwand für Datensatzerstellung –60%
- Keine technische Unterstützung nötig
User Research und Testing haben dem Produkt zusätzlichen Value gebracht. Die Interaktionen und das Visual Design erfüllen internationale Standards und heben die App von der Konkurrenz deutlich ab.
