Voltu UI Design

VOLTU, die neue Plattform des Mobile-Marketing-Giganten glispa, richtet sich an erfolgreiche Influencers und Content Creators in den sozialen Netzwerken. Mit VOLTU können diese ihre Posts im Handumdrehen monetarisieren. MNDN begleitete glispa bei allen Phasen des Projektes, von Branding und Konzeption über das komplette UI- und UX-Design bis hin zum Frontend Development.

Die richtige Stimmung

Das Briefing-Material war schnell gesichtet: glispa trat einzig mit einem VOLTU Logo an uns heran. In engem Dialog mit dem Kunden experimentierten wir zunächst mit verschiedenen Stimmungen, bis die Wahl – immer die Zielgruppe im Blick – auf ein kontrastreiches, maskulines und aufgeräumtes Erscheinungsbild fiel. Dieses wurde den Anforderungen der Website entsprechend zu einer vollständigen Designsprache ausgebaut und bildete die Grundlage für die parallele Fertigung von Marketingmaterialien durch das Marketingteam von glispa.

Motivierendes Onboarding

Um seinen Usern die relevantesten Kampagnen anbieten zu können, muss VOLTU sie zunächst kennenlernen – dazu stellt das System beim Signup eine Serie von Fragen. Den User mit einem langen Formular und unzähligen Textfeldern zu konfrontieren wäre hier der falsche Weg – der Onboarding-Prozess soll ansprechend und motivierend sein. Wir setzten uns für kreative Eingabemethoden wie Sliders und XY-Pads ein, die ideal auf die erfragten Informationen abgestimmt sind. So entstand ein spielerisches Signup-Erlebnis, bei dem der User schrittweise durch die Fragen geführt wird.

Kampagnen, die passen

Nach dem Signup erwartet den User VOLTUs Herzstück: die Kampagnenauswahl. Unter einer persönlichen Begrüßung mit Mini-Stats im Header-Bereich schlägt VOLTU Kampagnen vor, die zum Influencer und seinen Followern passen. Die besten Matches werden deutlich hervorgehoben – so kann der User ohne mühsame Suche direkt mit einer Kampagne beginnen.

Interface Components Campaign Grid

Klares Farbsystem

Im UI von VOLTU stehen Kampagnen, die der User aktuell betreibt, Seite an Seite mit weiteren passenden Kampagnen. Wir sorgten für ein klares Farbleitsystem, um den Kampagnenstatus an jeder Stelle des UI deutlich zu machen. Dieses erstreckt sich über die Einträge der Kampagnenauswahl bis hin zu den Kampangenseiten selbst.

UI Colors

Interaktiver Styleguide

Auch wenn wir neben der detaillierten Ausarbeitung des UI auch das gesamte Frontend Development von VOLTU übernahmen, ließen wir den Kunden in der Fortsetzung nicht allein: Wir gaben glispa einen interaktiven Styleguide an die Hand. Die UI-Elemente mit all ihren Eigenschaften wie Positionierungen, Farben, Fonts, etc. lassen sich darin zielgerichtet inspizieren und bei Bedarf in alle benötigten Formate exportieren.

Résumé

Die Besonderheit der Plattform VOLTU liegt darin, dass sie sich direkt an Influencers und Content Creators richtet. Mit einem motivierenden Onboarding-Prozess, persönlichen Vorschlägen und einem klar verständlichen Kampagnen-Management gehen wir gezielt auf ihre Erwartungen und Bedürfnisse ein. Wir lieferten für glispa ein komplettes Paket bis hin zur fertigen Frontend-Umsetzung und gaben dem Kunden zudem Tools an die Hand, das Produkt effizient weiterzuentwickeln. VOLTU startet aktuell durch und akzeptiert ab sofort Anmeldungen!

Unsere Aufgabe war es, für den Klavier-Trainer und damit das Herzstück des Projekts ein User Interface (UI) zu entwickeln. Zudem waren wir für das Branding und die Website verantwortlich. Wesentlich für die Bewältigung dieser Aufgaben war zunächst ein umfassendes Verständnis des Produkts. Gemeinsam mit Skoove aus Berlin entwickelten wir dafür einen Projektplan, kartierten die Features und vereinbarten den Funktionsumfang eines MVPs (Minimum Viable Product).

Skoove UI Design: Trainer Interface

User-Centered Design

Bei Skoove handelt es sich um Lernsoftware – dieses Verständnis ist für die Entwicklung der Skoove UI sehr wichtig gewesen. Das Erlernen eines Instruments verlangt eine hohe Aufmerksamkeit – jede Ablenkung beeinträchtigt den Lernprozess. Wir begegneten dieser Herausforderung mit „User-Centered Design“: alle Entscheidungen zur Bedienung der Software werden hierbei aus der Perspektive des Users getroffen.

Diese Ausrichtung betraf sämtliche Aspekte des Interfaces, u.A. die Navigation zwischen Kursen und Lektionen, die Anzeige des persönlichen Lernfortschritts und Erklärungen zu Lektionen.

Der Feedback-Loop

Test-User waren ein essentieller Bestandteil des Entwicklungsprozesses. Auf dem Papier kommt man selten zu einer schlüssigen Lösung, stattdessen müssen Entscheidungen und Konzepte stets in realen Situationen überprüft werden. Zu diesem Zweck wurden bei Skoove vor Ort kontinuierlich User-Tests durchgeführt, die aufzeigten, welche Elemente ein User wahrnahm und sofort verinnerlichte und welche Interaktionen hingegen den Zweck verfehlten. Die neu gewonnenen Erkenntnissen wurden in das nächste Design integriert – ein Loop, der sich von Iteration zu Iteration der perfekten Lösung annäherte.

Trainer VS Trackpad

Die Bedienung des Klaviertrainers stellte eine besondere Herausforderung dar, schließlich existieren hier zwei Bedien-Ebenen: das Interface des Trainers auf dem Bildschirm und die Klaviatur unter den Händen des Users. Müssen die Hände ständig vom Klavier zum Trackpad springen, steht der Trainer im Weg: jede Bedienung bremst den Spielfluss und somit auch den Lernerfolg. Das Ergebnis: Eine frustrierende User-Experience.

Steuerung mit Klaviertasten

Trainer und Klavier dürfen dehalb nicht in separaten Welten „spielen“, sondern müssen auf einer Bedienebene zusammengeführt werden. Unsere Lösung: Speziell belegte Klaviertasten zur Steuerung des Trainers. Der Vorteil liegt darin, dass der User nicht zum Trackpad springen und dort Start/Stopp klicken muss, sondern die Klaviatur mit den Händen gar nicht erst verlässt. Statt den User zu behindern, integriert sich der Trainer unmittelbar in den Spielfluss: zwischen Trainer und Klavier existiert eine feste Verbindung.

UI Iterationen der Klaviersteuerung

Fehlerquellen minimieren

Den Trainer durch die Klaviatur zu bedienen bringt weitere Herausforderungen mit sich: Wie kann verhindert werden, dass der User beim Spielen versehentlich ein belegte Taste trifft? Die Platzierung der Weiter- und Zurück-Buttons am linken Rand der Klaviatur ergab sich in User-Tests schnell als effektivste Lösung. Bei der User-Interaktion zum Starten und Stoppen einer Übung waren jedoch weitaus mehr Iterationen nötig. Getestet wurden verschiedene Tastenkombinationen bis hin zu ganzen Tastaturbereichen. Auch mit der Dauer des Tastendrucks wurde experimentiert um unabsichtliches Auslösen zu verhindern.

ERROR PREVENTION
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them.
– Jakob Nielsen, Usability Heuristics for User Interface Design

Branding & Website-Design

MNDN war neben dem Klaviertrainer auch für das Erscheinungsbild der Marke Skoove zuständig. Das Logo ausgenommen, entwickelten wir das komplette Corporate Design für Skoove inkl. Landing Page und den Seiten zur Kursauswahl.

Skoove Website Landing Page Design

Résumé

Dieses Projekt ist ein gutes Beispiel dafür, dass sich Interface-Entwicklung nicht immer nur auf dem Monitor abspielt. Durch konstante Exploration, Iteration und das intensive User-Testing nahm Skoove nach und nach Gestalt an und konnte zu einem benutzerfreundlichen und marktfertigen Produkt reifen.

Skoove hat eine sehr erfolgreiche Beta-Phase durchlaufen, das Interface wurde vom Skoove-Team weiterentwickelt und um viele neue Funktionen ergänzt. Nun wurde Skoove offiziell released.
Jetzt Skoove ausprobieren!

Looperator Main Screen

Mondon Design wurde damit beauftragt das komplette Design für den Looperator zu entwickeln: Dazu gehörten Bildsprache, Konzeption, Graphic User Interface Design (GUI Design) und User Experience Design (UX Design). Zusätzlich entwarfen wir das Looperator Logo, die App Icons, Promotionsmaterial und auch die Grafiken für den Installer. Dadurch hatten wir die Möglichkeit ein komplett konsistentes Nutzererlebnis zu gestalten.

UI Design mit Blick nach vorne

Wir entwickeln Interfaces auflösungsunabhängig. Das bedeutet, dass die Oberfläche auf jedem Anzeigegerät optimal aussieht. Von Projektbeginn an behielten wir den potentiellen Release des Looperators auf hochauflösenden Displays (Retina iPad, High-Res Monitore) im Blick. Die GUI wurde bereits beim Entwurf in Photoshop komplett vektorbasiert angelegt. Dies ist ein großer Vorteil gegenüber pixelbasierter Gestaltung, da das komplette Interface verlustfrei vergrößert und verkleinert werden kann. Natürlich muss im Prozess fortwährend sichergestellt werden, dass alle Elemente in allen Auflösungsstufen visuell „funktionieren“. Dank solcher Standards in unseren Arbeitstechniken können wir ein User Interface sehr schnell auf andere Plattformen übertragen – sauber und unkompliziert.

Die Looperator GUI ist komplett aus Vektoren gebaut.

Effizienz durch Reduktion

Unsere Arbeit für den Looperator zeichnete sich durch hohe Effizienz aus, speziell bei der Konzeption der GUI-Elemente: So einfach wie möglich, so komplex wie nötig. So war z.B. die Größenänderung eines Dropdown Menüs während der Entwicklung blitzschnell realisierbar, da nur ein einziges Vektorobjekt manipuliert werden musste. Die Reduktion zwang uns natürlich auch dazu, die Gestaltung der Elemente auf den Punkt zu bringen. Ein willkommener Nebeneffekt.

Jedes UI-Element besteht aus einem einzigen Vektorobjekt.

Prozess

Die Entwicklung einer Benutzeroberfläche ist ein evolutionärer Prozess. Für den Looperator warfen wir zunächst einen Blick auf die Alpha Version der Software: Wo liegen die Stärken und Besonderheiten? In welchen Situationen müssen wir den User stärker an die Hand nehmen? Im Wireframing optimierten wir anschließend den Workflow, schlugen zusätzliche Funktionen vor und sorgten für eine intuitive Bedienung. Eine klare Aufteilung der Arbeitsbereiche, ein farbiges Leitsystem und eine inhaltlich begründete Anordnung aller Controls schaffen ein übersichtliches Arbeitsumfeld. Schnelligkeit ist Trumpf: Alle Effekte lassen sich über Popups kurzerhand auswählen. Im Prozess legten wir großes Augenmerk darauf, die erlernten Bedienungskonventionen der User zu respektieren – eine besondere Herausforderung, schließlich geht der Looperator an einigen Stellen neue Wege um die Bedienung zu beschleunigen. Dass die Lösungen sowohl für die Mausbedienung als auch auf Touch-Devices funktionieren mussten, versteht sich von selbst.

Effect Icons Design

Im Looperator stehen ungewöhnlich viele Effekte zur Verfügung, deren Vielfalt den User nicht irritieren sollte. Mit einem von Grund auf neu gestalteten Icon-Set schafften wir hier Übersicht. Alle Funktionen werden dem User durch eine konsistente Bildsprache vermittelt. Auch abstrakte Effekte können eindeutig identifiziert und zugeordnet werden. Ein zweistufiges Beschriftungssystem ermöglicht es zudem, Variationen von Effekten klar voneinander abzugrenzen. Das Icon Design wurde durchweg minimalistisch umgesetzt, bedient sich aber dennoch starker visueller Signale.

Skizzen

Looperator Effect Icons

Looperator Branding

Sound-Loops begründen Ihre Ästhetik durch Wiederholung. Eine treffende Bildmarke haben wir mit der Unendlichkeits-Schleife gefunden, die Kernfunktion des Looperators ist hier Programm. Die Schleife findet sowohl im App Icon als auch im Looperator Schriftzug Verwendung.

Looperator App Icon und Logo

Résumé

Kern unserer Arbeit am Looperator war der komplexen Software ein klares, visuell konsistentes und auflösungsunabhängiges Interface zu verleihen, mit dem der User intuitiv und flexibel arbeiten kann. Unbegrenzte Möglichkeiten ohne zu überfordern. Explorieren und Experimentieren oder den direkten Weg zum gewünschten Sound einschlagen. Live Einsatz auf Touch Screens und Mausbedienung im Studio – der Reiz dieses Projektes lag für uns auch in diesen Kontrasten. Wir konnten Sugar Bytes ein Interface liefern, das von einem blitzschnellen Workflow geprägt wird – sorgfältig bis ins kleinste Detail.

Screenshots

Session Keys Grand S/Y präsentiert einerseits Pianos, deren Eigenschaften – im Gegensatz zu einem futuristischen Synth-VST – Ihren Ursprung im echten Leben haben. Andererseits kann hier der Sound über einzigartige Parameter auf eine Art und Weise manipuliert werden, wie es in der Realität unmöglich wäre. Die große Herausforderung für das Interface Design von Session Keys Grand S/Y bestand in der dem Medium angemessenen Kontrolle einer solchen Klangvielfalt.

Screenshot Session Keys Grand S

Die Suche nach der richtigen UI Bildsprache

In produktiven und kreativen Umgebungen ist es notwendig, die Bedienung der Oberfläche schnell, intuitiv und schlank zu halten. Hierzu ist es sinnvoll die Controls gewohnten Konventionen folgen zu lassen. Ein Kontrollelement soll „Aufforderungscharakter“ haben, d.h. es muss seine Bedienbarkeit und Wirkungsweise ehrlich vermitteln: Ein Drehknopf verheißt, dass man ihn drehen kann. Diese Erwartung sollte er erfüllen.

Die Anlehnung an bekannte Bedienkonzepte aus dem realen Umfeld des Anwenders bis hin zur Nachbildung realer Objekte (Skeuomorphismus) kann hierbei hilfreich für eine gute User Experience sein. So hilft das Milchglaspanel bei Session Keys Grand S/Y dem User zu vermitteln, dass sich die Controls nicht direkt am Instrument befinden. Das Glühen der aktiven Elemente lässt eine dahinterliegende Lichtquelle erahnen – eine Botschaft, die wir von aktiven Buttons elektrischer Geräte kennen.

Parameter ohne Realitätsbezug

Neben einem für Grand Pianos charakteristischen Klangbild können mit dem Pentamorph Contoller fantastische Klangwelten erzeugt werden, die weit über das Offensichtliche hinausgehen. Mit nur einem Regler lässt sich der Klang des Pianos on-the-fly verändern, vom charakteristischen Klangbild eines Steinway bis hin zu athmosphärischen Sounds, die sich einer natürlichen Herleitung entziehen.

Konzeptskizzen Pentamorph Controller

Von Pianolack überzogene Holzknöpfe zur Steuerung eines teilweise irrealen Klangbildes führen hier also auf den sprichwörtlichen Holzweg. Deshalb entschieden wir uns gegen eine Anlehnung an die reale Vorlage und trennten vielmehr Klangquelle und Kontrollebene voneinander.

Umsetzung und Organisation der GUI

Flache, minimalistische Controls bestimmen das Erscheinungsbild der Bedienebene. Die Farbpalette kommt mit wenigen Abstufungen aus und löst sich deutlich von den detaillierten Piano Renders ab.

Ebenen des Session Keys Grand S/Y User Interfaces

Trotz dieser Reduktion lehnen wir Ornamentik und Verzierungen nicht grundsätzlich ab, sie existieren z.B. auf den Panels in Form von Trennlinien. Strukturiert wird das streng hierarchische Layout über eine ausgefeilte Tab Architektur, sorgfältig gesetzte Typographie und ausreichend White Space. Die Controls in Session Keys Grand S/Y sind auf ihre grundlegende Funktionalität reduziert. Das minimale Design spielt seine Vorteile voll aus: Das Interface kann dadurch auf engstem Raum einen hohen Grad an Komplexität vertragen ohne unübersichtlich zu werden.

Konzeptskizzen Dynamics Controls

Interaktive Elemente haben wir besonders kontrastreich gestaltet und lassen sie deutlich hervortreten. Die Kommunikation ist hierbei konsistent: Für aktive und inaktive Button States werden stets die selben Farbtöne verwendet. Dies hilft bei der Orientierung und beschleunigt die Bedienung.

Design Recherche Piano Icons. Mit ihnen wird zwischen den Varianten gewechselt: offen und geschlossen (aktiv).

Ein maßgeschneidertes Interface für den Screen

Session Keys Grand S/Y geht über eine Simulation hinaus. Die Bereitschaft von e-Intruments, das Interface ein Stück weit von der Realität loszulösen, ermöglichte eine für das Medium Screen maßgeschneiderte UI Sprache. Das Resultat ist ein ehrliches, übersichtliches und klares User Interface.

Ausschnitt Session Keys Grand S/Y Interface Design

Wir hoffen damit ein Instrument gestaltet zu haben, das für seine Plattform – den Screen – optimal funktioniert. Dank eines Interfaces, das den Musiker präzise und schnell zum gewünschten Ergebnis führt.

Screenshots der wichtigsten Screens: