Veröffentlicht am

MEGA Sampling mit dem Plugin Alliance MEGA Sampler

Plugin Alliance MEGA Sampler

Vergiss Samples suchen außerhalb Deiner DAW. Bleib im Tunnel und konzentriere dich auf das, was wichtig ist.

Der Plugin Alliance MEGA Sampler ist ein Sample-Player mit einem Online-Sample-Library-Service, der direkt in der Musiksoftware der User geöffnet wird. Mit einer ständig wachsenden Sample-Bibliothek können sie ganz einfach navigieren und die perfekten Sounds für ihre Produktionen finden.
Samples oder ganze Sample-Pakete finden und verwenden ist kinderleicht. Im dazugehörigen Sampler können die Nutzerinnen und Nutzer die Samples bearbeiten und auch in komplexe Projekte einbinden.

Zurück zu allen Projekten

Plugin Alliance

Zeitraum
Sommer 20121 – Frühjahr 2022 (und ongoing)

Link
https://www.plugin-alliance.com/en/products/mega_sampler.html

Meine Leistungen
Research, Ideation, Konzeption User Flows gesamtes Plugin, UX- & UI Design Library, Beratung gesamtes Plugin & Projekt 

Der Sampler bietet Nutzer*innen, die noch neu in der Musik-Produktion sind, einen einfachen Einstieg in die Arbeit mit Samples.
Der eingebetteten Lern-Bereich sorgt dafür, dass der gesamte Verarbeitungs-Prozess im Plugin stattfinden kann, ohne dass sie auf der Suche nach Inhalten oder Tutorials in den browser wechseln müssen.
Erfahrene Musikerinnen und Musiker können direkt loslegen, indem sie passende Samples in der Library finden oder eigene Stücke in den Sampler ziehen.

Vom Samples finden bis zur detaillierten Bearbeitung
Der Plugin Alliance MEGA Sampler ist ein Sample-Player mit einem Online-Sample-Library-Service für die DAW. Die Sample Bibliothek wächst ständig und muss auch in Zukunft gut durchsuchbar und verständlich sein.
Im Player werden die Samples dann mit Filtern wie dem Knifonium, PPG und neuen Effektpedalen unserer Partner Black Box Analog Design, AMEK, PPG, SPL, Maag, elysia und anderen bearbeitet, bis der perfekte Sound herauskommt.

Teaser Videos (und alle Tutorials) auf YouTube

Beim öffnen die Starten die Nutzer*innen  mit der Player-Ansicht, und können hier einfach mit der Navigation in die Sample Library und die Lern-Section wechseln.
Eines der wichtigsten Ziele ist es, das User mit unterschiedlichem Kenntnis-Stand schnell starten können und eine steile Lernkurve haben.

Vorgehen

In mehrere Interaktionen haben der Produkt-Owner, Entwickler*innen und ich uns in ständiger Abstimmung mit den Stakeholdern vom geschriebenem Konzept über Wireframes und grobe Designs zum finalen Produkt voran gearbeitet.
Die GUI des eigentlichen Samplers wurde vom GUI-Design Goran Lizdek entworfen. Auch hier haben wir durch kurze Abstimmungsrunden einen einheitlichen look& Feel finden können, obwohl für die Library und den Sampler unterschiedliche Techniken im Design (Vektor-/ Pixelbasiert) und in der Umsetzung verwendet wurden.

Ansicht der Wireframes, die schon relativ konkret waren
In der Planungsphase arbeiteten wir mit recht konkreten Wireframes. So konnten wir die Dev-Aufgabenbereiche früh anhand der Use Cases und der GUI aufteilen.
Ein Auszug aus den Diagrammen die ich erstellt habe, um die einzelnen Elemente, ihr Zusammenhang und ihre Zustände zu beschreiben.
Ein Auszug aus den Diagrammen die ich erstellt habe, um die einzelnen Elemente, ihr Zusammenhang und ihre Zustände zu beschreiben. Eine abgewandelte Version von Klassendiagrammen hilft allen projektbeteiligten, die Zusammenhänge und Unterschiede der Elemente besser zu verstehen.

Ausblick

Das Produkt, dass im Juni 2022 online gegangen ist, ist Version 1.0. Diese Version wird im Player um diverse Funktionen ergänzt werden und auch im Design und User Flows anhand des User Feedbacks weiterentwickelt.
Dadurch, dass ich im letzten Jahr auch eine Figma Design-Library für dieses und ähnliche Projekte entwickelt habe, könnten auch externe Designer*innen relativ leicht in das Projekt einsteigen.

Ein kleiner Screenshot der Design Library, die u.a. für den Sampler verwendet wird (Ausschnitte)

Meine Rolle

  • UX-Lead
  • UI-Design
  • Recherche
  • Entwickeln Informationsarchitektur, Seitentypen, Inhaltstypen
  • Entwicklung von Wireframes, Moodboards und Low- sowie High-Fidelity Clickdummies
  • Beratung des Teams durch den gesamten Projektverlauf

Mehr Projekte

Veröffentlicht am

Gut gestanzt in Köln: Relaunch der Buschoff-Seite

Buschhoff Stanztechnik Relaunch

Gut gestanzt in Köln: Die moderne Stanzerei bekommt eine neue Website, die den Charakter des Unternehmens erlebbar macht.

Konzeption von der Pike auf: Wir entwickelten für die Buschhoff-Website ein stimmiges Corporate Design, das die heterogenen Zielgruppen der Marke mit den passenden Inhalten versorgt. Im Zentrum unserer Arbeit standen dabei immer die besondere Unternehmenskultur und die Mitarbeiter*innen des Kölner Traditionsunternehmens.

Zurück zu allen Projekten

Agentur
mehrwert intermediale Kommunikation GmbH

Kunde
Buschhoff Stanztechnik Köln

Zeitraum
Sommer 2018 – März 2019

Link
www.buho.de

Agentur-Leistungen
Konzeption, Design, Programmierung Frontend und Backend, Erarbeitung Corporate Design, Fotografie (Jan Hosan)

Wir entwickelten für das mittelständische Traditionsunternehmen eine robuste und leicht pflegbare Webseite. Konzeption, Design und technische Umsetzung sind auf Nachhaltigkeit ausgelegt. Die Seite funktioniert natürlich auf den verschiedenen, aktuellen Endgeräten und ist an die gängigen Accessibility-Standards angepasst.

Entsprechend des anspruchsvollen Kundenstamms mit ständig wechselnden Herausforderung arbeitetenn wir die Alleinstellungsmerkmale der Fertigung bei Buschhoff und die hervorragende Qualität der Produkte des Familienunternehmens heraus. Das Design ist voller Anspielung auf die verschiedenen Fertigungsarten im Werk. Spezielle Produkte und ihr Einsatz sind in Case Studys nachvollziehbar dargestellt. Für alle (An)Fragen gibt es diverse Möglichkeiten zur direkten Kontaktaufnahme.

Ein besonderes Augenmerk legen wir zudem auf die Mitarbeiter*innen und das besondere, gute Arbeitsklima in dem Familienunternehmen. Der freundschaftlich- partnerschaftlich Umgang ist schon beim Betreten der Räumlichkeiten spürbar. Der Respekt, der jedem Mitarbeiter und jeder Mitarbeiterin und ihren Fähigkeiten entgegen gebracht wird, muss auch digital erlebbar sein und wird dank der Fotografie von Jan Hosan in großzügige Bildwelten übertragen.

Auszug Feature-Darstellung auf der Startseite

Mikrointeraktionen, die Struktur aufbrechende grafische Elemente, beeindruckende Bildwelten sowie eine grundpositivie Sprache vermitteln den speziellen Buschhoff-Flair.

Vorgehen

In enger Zusammenarbeit mit den Kund*innen erarbeiteten wir in Workshopform die Herausforderungen, wichtigen Inhalte und Informationsarchitektur der Webseite.

Die Produktvielfalt, Fertigungsweise von Buschhoff und Nutzer*innen der Seite wurden in Workshops und Anschlusstreffen im Detail besprochen. Insbesondere die Zielgruppen spielen eine wichtige Rolle, da sie sich sehr in ihren Bedürfnissen auf der Webseite und ihrem Vorwissen unterscheiden.

Auszug aus dem Flow

In der Konzeptionsphase erarbeiteten wir das Gesamtkonzept und Ausgestaltung der Seitentypen auf Grundlage diverser Wireframes, Flows, Moodboards und dem neu erstellten Corporate Design, um dann in enger kollaborativer Zusammenarbeit konkret in UI-Design und die technische Umsetzung zu gehen.

Beispiel: Darstellung Responsive Design

Meine Rolle

  • UX-Lead
  • Recherche
  • Workshops Konzeption und Leitung
  • Entwickeln Informationsarchitektur, Seitentypen
  • Entwicklung von Wireframes, Moodboards und Low-Fidelity Prototypen
  • Enge Zusammenarbeit mit UI-Designteam
  • Enger Kundenkontakt im gesamten Projekt

Mehr Projekte

Veröffentlicht am

TU Dortmund Relaunch

Startseite der Tudo-Webseite in einem iPad

TU Dortmund Relaunch

Zeitgemäß und barrierearm gehen jetzt Hand in Hand!

Konzeption, Design, Programmierung und Beratung – Mehrwert hat den Webauftritt komplett umgekrempelt.
Ich habe das Projekt als federführende UX-Designerin vom Pitch an und über den Launch hinaus begleitet.

Zurück zu allen Projekten

Kunde
Technische Universität Dortmund

Agentur
mehrwert intermediale Kommunikation, Köln

Zeitraum
Sommer 2017 – Sommer 2018

Link
www.tu-dortmund.de

Leistungen
Konzeption, Design, Programmierung Frontend und Backend, Entwicklung von Style Guide und Templates für zukunftsfähige Erweiterung

Aus der vormals stark gewachsenen und unübersichtlichen Portalstruktur entwickelten wir eine Webseite, die zielgruppenspezifische Inhalte leicht zugänglich macht, eine konsistente Informationsarchitektur besitzt und dem Corporate Design entspricht.

Responsive & barrierearm

Um den Ruf der Hochschule als besonders barrierearmen Lernort gerecht zu werden, muss auch die Webseite so barrierearm wie möglich sein. Das bedeutet, dass wir von Anfang an in Konzeption und Design Barrierarmut verfolgen. In Interviews mit den Studierenden und Lehrkräften der Hochschule konnten wir das barrierarme Design und die technischeUmsetzung weiter verbessern.

Filterfunktionen, Teaser und klare Nutzerführung ermöglichen leichte Zugänglichkeit der Inhalte

Verschiedene Nutzer*innen haben unterschiedliche Bedürfnisse und Surf-Verhalten. Alle Inhalte sind mittels Suchfunktionen auffindbar. Zum Beispiel sind wichtigste News  prominent auf der Startseite platziert und auch miteinander verknüpft, alle Inhalte mittels Suchfunktion auffindbar, Events sowohl über den Kalender in der Navigation als auch den Schnellzugriff auf der rechten Seite und überall dort, wo sie händisch eingefügt werden, erreichbar. Auf der Webseite gibt es zudem diverse Listen, prominent hier natürlich die Studiengangsliste, die jeweils durchsuchbar und, sofern sinnvoll, auch filterbar sind. Diese Funktionen stehen in allen Browsergrößen zur Verfügung.

Präsentation der Erreichbarkeit und der Listenaufführung der Studiengänge

Vorgehen

In enger Zusammenarbeit mit den Kund*innen erarbeiteten wir in diversen Workshops die Herausforderungen, wichtigen Inhalte und Informationsarchitektur der Webseite. In der Konzeptionsphase erarbeiteten wir das Gesamtkonzept und Ausgestaltung der Seitentypen und Funktionen auf Basis von Nutzer*innen-Befragungen und Studien in engen Feedbackschleifen mit den Kund*innen und Kunden. Vom Pitch bis Abschluss des Projekts arbeitete das Projektteam gewerke-übergreifend und im agilen Scrum-Workflow eng zusammen.

Auszug aus den Features der Startseite

Herausforderungen

  • Viele verschiedene Stakeholder
  • Heterogene Zielgruppen
  • Mehr als 10.000 Seiten und eine Vielzahl unterschiedlicher Seitentypen und Spezialfälle
  • Wachsende Anforderungen im Projektverlauf
  • Ein nur bedingt barrierearmes CD der Hochschule

Meine Rolle

  • UX-Lead
  • Pitch-Vorbereitung und Präsentation
  • Recherche
  • Zielgruppen-Interviews
  • Workshops Konzeption und Leitung
  • Entwickeln neuer Informationsarchitektur und Seitentypen
  • Entwicklung von Wireframes und Low-und High-Fidelity Prototypen
  • Entwicklung erste Designanmutungen
  • Enge Zusammenarbeit mit UI-Designteam
  • Enger Kundenkontakt im gesamten Projekt
Auszug aus den Wireframes für die mobile Auprägung
Auszug aus einem Dokument zur Vorstellung der Seitentypen anhand von Wireframes
Auszug aus einem Dokument zur Vorstellung der Seitentypen
Auszug aus den TuDo-Wireframes der Seitentypen und der responsiven Navigation
Designanmutungen
Erste Designanmutung aus der Konzeptions-/ frühen Designphase.

Mehr Projekte

Veröffentlicht am

League of Accessibility

League of Accessibility

Barrieren den Kampf ansagen – bei der Arbeit und im Alltag.

Barrierefreiheit geht uns alle an. Deshalb haben wir mit der League of Accessibility eine Initiative gegründet das Wort zur Sensibilisierung für Barrierefreiheit gegründet. Heraus kam ein Kartenset, mit dem wir unser Superkräfte für eine Verbesserung von analogen und digitalen Medien noch besser nutzen können.

Zurück zu den Projekten

Kunde
mehrwert internes Projekt

Zeitraum
Winter 2018/19

Link
https://www.accessibility-heroes.de

Leistungen
Komplette mehrwert-Eigenentwicklung, da internes Projekt

 

 

Daher haben meine damalige Agentur mehrwert und ich im Winter 2017 beschlossen, die „League of Accessibility“ zu gründen. Als immersive Story gedacht, bekommen Kundinnen und Kunden zuerst einen Mitgliedsausweis und werden langsam mittels Mails, Tutorials, Videos und Telefonaten an ihre Aufgabe als „Accessibility Hero“ herangeführt.

Eines der Highlights ist der Versand dieses Kartensets: Liebevoll illustriert und mit einfühlsamen Texten versehen werden Barrierearmut, Barrieren an sich, Übungen zum nachfühlen und vor allem Anweisungen, was jede*r einzelne tun kann, beschrieben.

Die Vision

Gleichberechtigung und Teilhabe aller ermöglichen. Dafür kann jede und jeder unter uns einen Teil beitragen. Das Wissen über Barrierefreiheit haben wir in diesem Einstiegskartenset für analoge und digitale Barrierefreiheit zusammengefasst. Es hilft den Kund*innen selbst, ihr Wissen aufzubauen und ins Handeln zu kommen.

Karte aus League of Accessibility: Handy nur mit der Voice-Funktion steuern

Vorgehensweise

In Brainstorming Sessions in kleinem Team und Zeit für Einzelarbeit  entstand schließlich die Idee der „League of Accessibility“. Unter der Prämisse, auch Raum für die Designkompetenz analog und digitial der Agentur darzustellen und gleichzeitig ein nachhaltiges Produkt zu verschenken, entstand dieses Kartenset. 

Das zugeklappte Kartenset mit der Vorderseite nach oben. Beschriftung: "Dein Einstiegskartenset für analoge und digitale Barrierefreiheit. League of Accessibility"
Das Kartenset kommt in einer handlichen Verpackung.
Die aufgeklappte Verpackung mit dem LOA-Mitgliedsausweis daneben
Die aufgeklappte Verpackung mit dem LOA-Mitgliedsausweis daneben
Die verschiedenen Kartentypen des Sets liegen nebeneinander.
Es gibt "Empathiekarten", "Handlungskarten" und "Barrierekarten". Jeder der Karten gehört zur Kategorie "Sehen", "Hören", "Sprechen" oder "Fühlen".

Einen Großteil der Arbeit nahm die Zeit für Recherche der Inhalte, Aufbereitung der Darstellung, aber auch Entwicklung der Story und Bildideen in Anspruch.

Das Projekt ist in sehr enger Zusammenarbeit im mehrwert-Team und mit dem Illustrator und der Texterin entstanden. Federführend waren hierbei UI-Designerin Kathrin Scholz und ich.

Handlungskarten beschreiben Maßnahmen, die einfach im Arbeits- oder Privatleben umgesetzt werden sollten, um barrierearmere Produkte zu erzeugen.
Mit den Empathiekarten können kleine Spiele gespielt werden, die bestimmte Arten von Barrieren nachvollziehbarer machen.
Barrierekarten erklären die verschiedene Arten von Barrieren und sensibilisieren dafür, dass sie nicht immer sichtbar und nicht immer dauerhaft sein müssen, sondern für jede Person in verschiedenen Situationen sehr relevant und vorhanden sein können.

Herausforderungen

  • Interne Projekte benötigen immer eine besondere Aufmerksamkeit, um nicht unterzugehen
  • Komplexes Thema auf einfache, leicht zu verstehende und unterhaltsame Pakete runterbrechen
  • Nochmal tieferes Einsteigen in das Thema Barrierearmut

Meine Rolle

Sehr enge Arbeit mit UI-Designerin Kathrin Scholz und dem restlichen Team

  • Ideation
  • Konzeption
  • inhaltliche Recherche und Inhaltserarbeitung
  • Scribble-Erstellung
  • Prototyp-Erstellung
  • Abstimmungen mit Texterin & Illustrator
  • Abstimmung im weiteren Projektverlauf bzgl. Design und Entwicklung der Webseite
Ein Prototyp einer Verpackung mit drauf geklebten Zetteln
Die Anleitung zur Verwendung des Kartensets, Seite 1
Die beigelegte Anleitung klärt über das Thema Accessibility auf und erläutert, wie man das Set verwenden kann.

Mehr Projekte

Veröffentlicht am

Projekte

Beruflich bewege ich mich vorrangig in der Konzeption und im Account Management. In diesen Bereichen übernehme sowohl den direkten Kundenkontakt als auch die Vorbereitung, Konzeption und Präsentation von Ausschreibungen und Projekten. Ich glaube, dass Entwicklung und Innovation dort geschehen, wo verschiedene Disziplinen zusammentreffen.

Meine Projekte und meine Interessen loten die Grenzen verschiedener Gebiete ab, um interdisziplinär mit tollen Teams neue Dinge entstehen zu lassen.

Einige Kunden, mit denen ich zusammen gearbeitet habe:
Carlsen, Arbeit und Leben e.V., Bundesministerium für Bildung und Forschung, JBB Rechtsanwälte, Noodles Noodles & Noodles Möbelmanufaktur, Crealogix, Berlin Verlag, Piper Verlag, Kryolan Professional Make-Up, gebrueder beetz Filmproduktion, Staatsoper München (Pitch)