Klankwelle Redesign

Klankwelle Redesign

Redesign der iOS Application "Klankwelle" - ein digitaler, modularer Synthesizer.

Ein digitaler, modularer Synthesizer
Modulare Synthesizer sind elektronische Musikinstrumente, die aus verschiedenen Modulen bestehen. In Abhängigkeit voneinander und in ihrer Zusammenstellung erzeugen sie Klänge, durch das modulare Verbinden ergibt sich eine Vielzahl an Möglichkeiten.

Aufgabe
Das Redesign einer App, hierbei sollten wir besonders auf die User Experience achten und eine App mit breitem Funktionsumfang aber nicht ganz so gut ausgearbeitetem UX und UI verbessern. Auch neue Funktionen können noch hinzugefügt werden wenn wir es als nötig erachten.

Analyse von Klankwelle

Der erste Eindruck der App zeigte nicht nur Verbesserungsmöglichkeiten sondern auch gleich einige ihrer Besonderheiten und Stärken. Gut ist die Möglichkeit relativ schnell etwas zu experimentieren, der modulare Synthesizer ist überschaubar und dennoch mächtig. Ausserdem ist die app kostenlos - die gesamte Konkurrenz vergleichsweise teuer.

Negativ fiel auf, dass die App eine schlechte Bedienbarkeit und Orientierung hat. Ausserdem ist die Darstellungsweise - für modulare Synthesizer üblich - eher abstrakt.

Hier wollten wir ansetzen. Unsere Design Principles richteten sich also daran aus, diese negative Punkte zu korrigieren und mit neuen Features noch zu erweitern. Ausserdem passten wir sie auf unsere ermittelnen Personas an.

Neue und überarbeitete Features

Ebenenstruktur

Sequencer sowie die Output Controls sind von jedem Screen, ausser der vergrößerten Modulansicht, schnell über die Tabs an der Seite erreichbar, ebenso der File Manager. Tap auf ein auf dem Canvas liegendes Modul zoomt auf die Modulansicht heran.

Minimap

Play Button: gibt den Sound der aktuellen Module wieder. Minimap: Schnelle Navigation, zeigt Module des Canvas in reduzierten Abbildungen an. Kontext-Button: verändert sich je nach Aktivität des Users.

Tooltips

Ein Long Press auf interaktive Elemente zeigt hilfreiche Tooltips und kleine Tutorials an.

Stecksystem

Um die Patchkabel mit ihrer schlechten Bedienbarkeit aus der App weglassen zu können, verwendeten wir ein Stecksystem. Anfänglich noch mit Viereckigen Modulen, änderten sich diese im Verlaufe des Prozesses von Vier- auf Seckseckig.

Module

Nach etlichen Iterationen landeten wir bei sechseckigen Modulen, mit eigens gestalteten Icons und einer Farbcodierung für jedes Modul. Bei Tap auf ein Modul wird dieses vergrößert dargestellt. Jedes Modul hat zwischen 2 und 4 Inputs und einen Output. Inputs werden meistens durch Slider kontrolliert. Wird ein Modul in den Input eines anderen gesteckt, kontrolliert das angedockte Modul diesen Input-Parameter.