UX Design
Die Agentur für nutzerzentriertes UX-Design
Als erfahrene Digitalagentur aus Mönchengladbach bieten wir nicht nur individuelle Entwicklung von Web Apps, TYPO3-Websites oder Onlineshops, sondern auch kreative Lösungen im Bereich des User Experience Designs nach Maß.
Unser Team aus erfahrenen Designern entwickelt individuelle, nutzerzentrierte und zielorientierte UX Designs für digitale Anwendungen. Durch unsere langjährige Expertise bei der Entwicklung von TYPO3-Websites, Web Apps und Onlineshops können wir technische Anforderungen und benutzerfreundliche, emotionale Designs optimal miteinander kombinieren. So gestalten wir effiziente und individuelle Lösungen, die funktionieren. Und auch immer im Bereich des vereinbarten Budgets bleiben.
Designer & Entwickler
Projekte
Aktive Kunden
Unsere Kunden
Diese Kunden vertrauen unserer Design-Expertise
Fullstack Digitalagentur
Wir kombinieren individuelles UX-Design & technische Expertise
Die wohl unterschätzteste Kombination der Agenturbranche: Design und Entwicklung aus einer Hand.
Es gibt immense Vorteile, wenn die Design-Agentur auch die Entwicklung übernimmt. Vor allem spart es Zeit, Kosten und Nerven. Das ist heute nicht mehr selbstverständlich. In vielen Projektsetups wird entweder das Design oder die Entwicklung hinzugekauft. Bei uns ist das aber nicht der Fall – wir lösen alles inhouse. Ohne Freelancer oder andere Agenturen.
Für ein agiles und zielorientiertes Projektsetup bietet eine Fullservice Design- und Entwicklungs-Agentur viele Vorteile im Rahmen des kreativen UX Gestaltungsprozesses:
- Direkte Kostenindikationen und sehr schnelle Kostenvoranschläge
- Design on Budget bzw. Design on Scope
- Klare, ehrliche und transparente Beratung auf Basis der Projekt KPIs
- Effizientes Projektsetup durch einfache Abstimmungen
- Deutlich geringere Kosten für die Projektleitung
- Bessere Ergebnisse durch erfahrene Designer und Entwickler
- Ein Ansprechpartner für alle Themen
- Bessere Beratung durch technische Expertise
Wir begleiten den gesamten Prozess im UX-Design: Von den ersten Kickoffs, über Workshops, einer Analyse- und Konzeptionsphase, dem eigentlichen UX-Design bis hin zum finalen Prototyping. Und im Anschluss übergeben wir einfach an unsere eigene Entwicklungsabteilung.
Klingt gut?
Unsere Referenzen
Individuelles UX Design im Einsatz
Design-Prozess
So arbeiten wir als UX-Design Agentur
Kreative Arbeit benötigt einen strukturierten Prozess um effiziente und zielorientierte Ergebnisse zu produzieren.
Kennenlernen & Strategie-Workshop
Im ersten Schritt des UX-Prozesses lernen wir uns kennen. Gerne auch persönlich. Wir sprechen über Produkte, Dienstleistungen, Mitarbeiter, Vision, Mission und Ziele. Für uns ist es wichtig, die Dynamik und die spezifischen Anforderungen der Unternehmen zu verstehen, um wirklich maßgeschneiderte Lösungen visualisieren und entwickeln zu können.
Je nach Umfang und Projektbudget macht auch ein ausführlicher Workshop Sinn, indem wir über maßgebliche Themen des UX-Design erarbeiten:
- Benchmarks & Best Practices
- Potenzialanalyse
- Prüfung des aktuellen Contens
- Analyse der Marken- und Designsprache
- Ableitungen aus der Webanalyse
- Zielgruppen-/Persona-Analyse
- Zukünftiges Tech-Setup
- Lead-Management
Wir bereiten den Workshop vor und übernehmen auch die Führung. Gemeinsam erarbeiten wir so Milestones für den Konzeptions- und Designprozess. Direkt mit den notwendigen Stakeholdern.
Analyse
Je nach gewünschtem Umfang analysieren wir den Zielgruppe, Markt, den Wettbewerb und die bestehenden Kommunikationskanäle wie Website, App oder Social Media. Wir schauen uns Brand, Sichtbarkeit und Design-System an. Am Ende steht eine umfangreiche Analyse, die Schwachpunkte identifiziert und Optimierungsmöglichkeiten und -Potentiale aufzeigt.
Konzeption
In der Konzeption werden die Anforderungen aus dem Workshop und Ergebnisse aus der Analysephase in ein Konzept übersetzt, das die grundlegende Struktur und Funktionalität der Website oder App definiert. Die Ergebnisse werden immer anhand einer ausführlichen Präsentation persönlich vorgestellt und diskutiert.
Design
Das Konzept wird nun in ein visuelles Design übersetzt, das Interaktions- und Gestaltungselemente der Anwendung definiert. Neben einem klassischen UX-Prototypen (Figma oder Adobe XD) von einzelnen Seiten und Funktionen gibt es auch ein übergreifendes Design-System, das Typographie, Formen, Farben und die Bild- oder Illustrationssprache definiert. Die Herleitung des Design-Systems ist ein komplexer Schritt und beinhaltet mehrere Teilprojekte, die nach Aufgabenumfang variieren können.
Die Entwicklung von Personas oder aufwändige Recherche-Phase gestalten den Designprozess meist etwas umfangreicher. Dafür sind gute visuelle und zielgruppenorientierte Lösungen nachhaltige Umsatztreiber.
Auch das UX-Design sowie die Herleitung des Design-Systems werden in einem persönlichen Termin, auch gerne bei Ihnen vor Ort, vorgestellt.
Implementierung & laufende Optimierung
Im letzten Schritt wird das UX-Design in eine Website, App oder einen Onlineshop implementiert. Dadurch, dass wir als Digitalagentur sowohl UX-Design als auch die technische Entwicklung inhouse anbieten, gibt es hier keine Wissensverluste die Zeit, Budget oder Ergebnis gefährden.
Einzelne Gewerke wie UX-Design oder Entwicklung werden heute oftmals aus Personal- oder Kostengründen ausgelagert. Das führt fast immer zu Problemen. Kein Design on Budget, ineffziente Kommunikationen oder (zu) hohe Kosten für die Projektleitung. Auch die Qualität leidet oft. Als Fullstack Agentur übernehmen wir alle Gewerke, mit einem Ansprechpartner und einem Team voller Experten im Hintergrund.
Daniel WaschlewskiSenior Digital Manager
Referenzen
Unsere UX-Design Referenzen
Die Basis
Forschung & Analyse im UX-Design Prozess
Durch eine umfangreiche Analysephase wird im UX-Design Prozess ein tiefes Verständnis von Bedürfnissen, Emotionen, Zielen und Verhaltensmustern der avisierten Zielgruppe entwickelt.
Je nach Projektumfang, -Budget und bereits existierenden Informationen gestaltet sich die Forschungs- und Analysephase mehr oder weniger umfangreich. Ziel der Analysephase ist es allerdings immer Annahmen zu vermeiden und stattdessen die UX-Strategie auf konkrete Daten und Fakten zu fundieren damit die UX-Design Agentur mit einer validen Basis starten kann. Grundsätzlich sollten in einer Analysephase folgende Erkentnisse über die Zielgruppe gewonnen werden:
- Verständnis über Bedürfnisse, Emotionen und Verhaltensmuster
- Identifikation von Anforderungen, Problemen und Herausforderungen
- Definition von Zielen und Erfolgskennzahlen
Auf Basis dieser Ergebnisse lässt sich dann ein relevantes und nutzerzentriertes UX-Design erstellen, das die gewünschten Ziele bestmöglich erreichen kann.
01: Interviews und Recherche
Interviews mit potentiellen Kunden oder Besuchern helfen, Bedürfnisse, Probleme und Verhaltensweisen zu identifizieren und Anforderungen zu konkretisieren. Durch gezielte Fragen können neben klassisch demographischen/statistischen Daten wie Alter, Geschlecht, Einkommen oder Bildungsniveau (...) auch tiefergehende Herauforderungen im eigentlichen Kaufprozess identifiziert werden.
02: Benchmarks und Best Practices
Die Recherche und Definition von Benchmarks oder Best Practices ist im UX-Design sehr hilfreich, aber niemals alleinige Grundlage für Entscheidungen hinsichtlich einer UX-Strategie. Neben Wettbewerbern aus der gleichen Branche werden auch Unternehmen, Produkte oder Dienstleistungen betrachtet, die vor den gleichen Herausforderungen stehen oder die gleichen Probleme zu lösen haben. Auch Inspirationen für gute Usability oder Customer-Journey können hier gesammelt und verarbeitet werden.
03: Analyse der Marken- und Designsprache
Das, was da ist, wird analysiert und bewertet. Es wird Dinge geben, die bereits gut gelöst sind und es wird Dinge geben, die man besser lösen kann. Betrachtet wird hier Content, Text, Tonalität, Customer Journey, Design, Bildsprache und Modernität. Nach der Anlayse werden entsprechende Handlungsempfehlungen formuliert. Als Digitalagentur bewerten wir hier auch die technische Umsetzung der Marken- und Designsprache.
04: Tracking-Analyse
Gibt es bereits Trackingzahlen, macht es Sinn, sich diese einmal genauer anzusehen. Auch in einer kurzen Analyse werden schnell wichtige Dinge klar:
- Bedeutung der jeweiligen Markting-Channels oder Touchpoints (SEO, Ads, Social ...) und deren Performance
- Einstiege und Ausstiege der Nutzer
- Wichtigste Seiten
- Weniger wichtige Seiten
- Seiten mit guter und weniger guter Engagementrate (Relevanz)
- Zielerreichungsgrad
- Technologie
- (...)
Grundsätzlich werden in der Webanalyse ganz messbar und objektiv einzelne Seitenbereiche und Marketing-Kanäle analysiert und daraus entsprechende Rückschlüsse für die UX-Strategie abgeleitet.
05: Klassiker der strategischen Unternehmensstrategie
Je nach Umfang und Notwendigkeit bieten wir (optional) auch die Klassiker der marketingorientierten Unternehmensführung an und steigen tief ein in Prozesse, Produkte, Potentiale und Risiken. Der Prozess macht insbesondere dann Sinn, wenn auch digital Produkte vertrieben/verkauft werden.
SWOT-Analyse
Kennt jeder aus dem Studium, hilft auch (fast) immer. Eine SWOT-Analyse im UX-Design Prozess schärft den kritischen Blick auf den Markt, die Gesellschaft und Umwelt und eröffnet neue Potentiale und Optionen in der Kommunikation. Sowohl strategisch, als auch gestalterisch und technisch. Differenzierung, Abgrenzung und Trenderkennung sind im Bereich des Web- oder App-Designs unglaublich wichtig und können auch nur durch eine saubere Analyse eben solcher Themen herausgearbeitet werden.
Sozioökonomische Potential-Analyse
Für die Entwicklung einer relevanten, aber auch emotionalen Marken- und Kommunikationsstrategie gilt es sozioökonomische und wettbewerbspolitische Faktoren einzubeziehen. Trends, Megatrends und Potentiale prägen das Gesellschaftsbild, sowohl kurz- als auch langfristig, und sollten als Themen- und Kommunikationsmotoren genutzt werden.
Mehr bei Bedarf und auf Wunsch.
Die Idee
Konzeption im UX-Design Prozess
In der Konzeption werden die Ergebnisse der Analysephase in ein Konzept übersetzt, das die grundlegende Struktur und Funktionalität der Website oder App definiert.
Der Projektbaustein der Konzeption im UX-Design Prozess kann, je nach Umfang, größer oder kleiner ausfallen. Bei kleineren Projekten würden wir direkt mit dem UX-Design starten und Prototypen entwickeln. Sind Websites, Apps oder Onlineshops aber groß und komplex, macht eine vorgelagerte Konzeption sehr viel Sinn, reduziert Abstimmungsschleifen und minimiert die Aufwände im nachgelagerten Designprozess.
01: Brainstorming und Ideenfindung
Nach einer Analysephase gibt es viele Erkenntnisse, die in Ergebnisse umgewandelt werden wollen. Brainstorming kann im Rahmen eines UX-Workshops stattfinden, den die Agentur leitet und moderiert. So können gemeinsam Ergebnisse erarbeitet und zugleich politische Themen berücksichtigt werden. Die kollaborative Arbeit ist meist sehr effizient und lösungsorientiert. Die Ergebnisse aus dem Workshop werden im Nachgang von der Agentur konsolidiert, aufbereitet und in konkrete Maßnahmen überführt.
02: Informationsarchitektur und Wireframing
Im Kern bestehen digitale Lösungen aus verschiedenen Informationen und Daten(sätzen). Nicht mehr, nicht weniger. Diese gilt es zu organisieren und in eine nutzbare, leicht verständliche Struktur zu überführen. Dabei helfen Wireframes und Sitemaps um die Grundstruktur der Benutzeroberfläche zu visualisieren. Darüber hinaus können auch Funktionen, eine rudimentäre Navigation oder Suche skizziert werden.
Gut ausgearbeitete Wireframes helfen, das technische Setup passgenau definieren zu können und bilden die strukturelle Basis für ein gutes Design.
03: Design ist für uns kein Teil der Konzeption
Bei uns ist Design und Gestaltung ein separater Prozessschritt und wird nicht im Bereich der Konzeption gelöst. Das macht für uns Sinn, da die Anforderungen an die Menschen, die in den jeweiligen Gewerken arbeiten z.T. vollkommen unterschiedlich sind.
In der Konzeptionsphase verlassen wir uns auf Ergebnisse, Zahlen und Fakten. Betriebswirtschaftliche Kenntnisse, Erfahrungen im operativen (SEO-)Marketing und ein technischer Blick auf das Projekt sind wichtig. Hier spielt weniger Kreativität eine Rolle, sondern vielmehr wirtschaftliches, marketingorientiertes und technisches Verständnis.
Das Konzept der Website muss im übrigen auf das Gesamtbudget passen – denn oftmals sind Webprojekte auch Festpreisangebote. Und das wird im besten Fall bereits in der Konzeption berücksichtig, sodass ein Design to Budget auch überhaupt erst möglich ist.
Die Kreation
Design und Gestaltung
In der Designphase werden die Erkenntnisse aus Analyse und Konzeption in ein visuelles Erscheinungsbild übersetzt.
Das Design einer Webanwendung umfasst viele Bereiche und Teilprojekte. Von der Typographie über Abstände, Bildsprache, Formsprache, Farben, Muster bis hin zu Animationen wird alles in einem UX-Design Prototype definiert.
01: Designsystem
In einem Designsystem werden die grundsätzlichen Gestaltungselemente einer Website, App oder eines Shopsystems definiert. Das sind:
Brand Elements
Bei der Gestaltung von Brand Elements wird z.B. das Logo in verschiedenen Formen visualisiert. Es ist manchmal notwendig verschiedene Versionen des eigenen Logos für verschiedene Anwendungszwecke zu optimieren. So macht es Sinn das Logo in einer invertierten und in einer deutlich reduzierten Version anzubieten. Auch andere visuelle Komponenten, die für die Markendarstellung wichtig sind, werden hier für die Darstellung im Netz optimiert.
Grid
Designer und Entwickler platzieren Elemente auf einem Grid. Bei der Entwicklung von digitalen Anwendungen gibt es nicht nur ein Grid, sondern verschiedene Grids in Abhängigkeit verschiedener Auflösungen/Viewports der unterschiedlichen Endgeräte. So ist die Darstellungsbreite eines Monitors deutlich höher, als die eines Smartphones. Im responsive Design muss das abgefangen werden. In der Regel designt man auf drei Größen. Bei besonders anspruchsvollen Projekten können es aber auch 5+ Viewports geben.
Abstände (Spacings)
Auch Abstände zwischen Elementen sind ein Gestaltungselement. Mehr Space schafft mehr Freiraum und erfüllt andere Zwecke als ein eher effizientes Spacing. Je nach Zielgruppe und Zweck werden die Abstände definiert.
Farben
Farben haben einen sehr großen Einfluss auf das Erscheinungsbild einer Website oder App und sollten daher gemäß der Zielgruppendefinition über Lymbic-Types bewusst gewählt werden. Es gibt aber nicht nur Farben, sondern auch Verläufe und Schattierungen von Farben. Es wird auch nicht nur eine Farbe definiert, sondern ein ganzer Haufen von Farben für verschiedene Zwecke. Im besten Fall nicht wie ein bunter Malkasten, sondern gemäß des Corporate Designs und entsprechenden Varianten für:
- Überschriften (h1-h5)
- Fließtext und verschiedene Textlinks
- Buttons
- Hintergründe
- Systemmeldungen
- Hover-Farben
- Primary Set
- Secondary Set
- ...
Um die richtigen Farben im UX-Design zu finden, bedarf es einer Agentur mit Design-Expertise und Erfahrung im Neuromarketing-Bereich. Denn Farben werden unterbewusst und sehr schnell, also implizit, erfasst und verarbeitet. Und jeder Typ Mensch präferiert andere Farbsets. Wissenschaftlich bewiesen.
Schriftart oder Typographie
Die Wahl der Schriftart ist ähnlich, wie auch die Wahl des relevanten Farbsets, eine große Entscheidung im UX-Design Prozess. Auch die Schrift ist Gestaltungselement, muss aber gleichzeitig noch mehrere Funktionen erfüllen. Eine Schriftart muss:
- auf allen Endgeräten gut lesbar sein
- zur definierten Zielgruppe passen (rund, eckig, schmal, dick)
- in verschiedenen Schnitten zu gefallen wissen
Häufig wird für Überschriften-Elemente (Headlines) eine andere, meist werblichere, plakativere Schrift gewählt als für die Copy oder den Fließtext. Daneben gibt es auch noch verschiedene Font-Styles für unterschiedliche Stilmittel, die meist über die Font-Size und die Font-Weight gesteuert werden. So erhalten Websites einen Magazin-Charakter und wirken besonders individuell und hochwertig.
Icons
Icons sind hilfreich für das implizite Verständnis von Inhalten des User Interfaces. Icons helfen somit die Nutzung der Website, App oder des Onlineshops zu vereinfachen und sind gleichzeitig auch ein probates Stilmittel, das auf die jeweilige Zielgruppe designt oder ausgewählt werden sollte. Auch hier gibt es kantige oder ründliche Varianten. Icons mit Outline, handgezeichnet, gefüllt oder mit Verlauf.
Illustrationen
Illustrationen sind ein grafisches Stilmittel, das visuelle Darstellungen von Handlungen oder Prozessen zeigt. Auch gerne animiert. Illustrationen sind ausführlicher und feiner als ein Icon.
Bildsprache
Unglaublich wichtig ist der Einsatz der richtigen Bilder. Relevant, passend zur Zielgruppe und authentisch. Niemand möchte in die Stock-Hölle absteigen. Eine gute Agentur schreibt gute Bildkonzepte, die Nutzer länger auf der Website halten und die Emotionen übertragen, die ausgelöst werden sollen.
Komponenten
Eine digitale Anwendungen besteht aus bestimmten Komponenten, die designt werden wollen und immer wieder eingesetzt werden. Darunter zählen:
- Buttons in verschiedenen Zuständen und Prioritäten
- Links in verschiedenen Zuständen und Prioritäten
- Dropdowns
- Tabs
- Labels
- Input-Fields
- Labels
- Listen
- Footer
- (...)
CMS-Module
Sowohl Websites, als auch Web Apps oder Onlineshops sind meistens durch Redakteure pflegbar. Das bedeutet es gibt Module, die man im Content Management System oder im Shopsystem einbindet und selbst pflegen kann. Wir setzen als CMS vorwiegend TYPO3 und als Shopsystem Shopware ein. Zu den Standard-Elementen, die eigentlich immer designt werden gehören:
- Text-Element
- Text-Bild-Element(e)
- Image-Gallery
- Accordion
- Tab-Bar
- Teaser- und Cards-Elemente
- Kontaktformulare
- Kontakt-Cards
- Icon-Wall
- (...)
Zum Schluss werden alle Design-Elemente sinnvoll miteinander verknüpft und in einem Prototoypen zusammengesetzt. Dort werden exemplarisch bestimmte Seitenbereiche entwickelt um ein vollumfängliches Bild vom entwickelten Designsystem zu erhalten.
Digitaler Partner
Wir gestalten digitale Lösungen
Wir entwickeln Designs, Websites, Apps oder Onlineshops schon seit mehr als 15 Jahren für kleine und große Unternehmen.
Dabei sind wir immer ehrlich, transparent und professionell. Mit uns finden Sie einen starken Partner, der durch viel Erfahrung, viel Kreativität und vor allem auch durch technische Expertise erfolgreiche und auf allen Projektebenen stimmige Designs für digitale Lösungen gestaltet. On Budget, on Time und immer individuell auf Ihre Zielgruppe zugeschnitten.
