UX Design Agentur für Websites, Onlineshops und Apps

Wir untersuchen, wie Menschen Ihr Produkt tatsächlich nutzen, ordnen die Informationen, erstellen Prototypen und testen sie, bevor programmiert wird, und übergeben ein Designsystem, mit dem Ihr Team weiterarbeiten kann. Barrierefrei nach WCAG 2.2 AA ab dem ersten Entwurf und umgesetzt vom selben Team, das es gestaltet hat.

Erzählen Sie uns von Ihrem Produkt So arbeiten wir

2-3 Klicks Bis zum Ticketkauf beim TNC
WCAG 2.2 AA Barrierefreiheit im Design
Seit 2009 Design und Entwicklung, ein Team

01 · Recherche Marke, Publikum und Wettbewerb
02 · Konzept Eine Idee, die ordnet
03 · System Schrift, Farbe und Komponenten
04 · Prototyp Klickbar und getestet
05 · Tests Mit echten Nutzern
06 · Übergabe Ihr Team nutzt es ab Tag eins
Jeder Test schärft das System

Scroll

Definition

Was ist UX/UI-Design?

UX/UI-Design legt fest, wie ein digitales Produkt funktioniert (UX, User Experience) und wie jeder Screen aussieht und sich bedienen lässt (UI, User Interface). Die UX bestimmt Abläufe, Struktur und Inhalte anhand dessen, was Menschen brauchen; die UI setzt sie in Komponenten, Typografie, Farbe und Zustände um, die auf Anhieb verständlich sind.

In der Praxis umfasst es Nutzerforschung, Informationsarchitektur, Wireframes und klickbare Prototypen, visuelles Design, ein Designsystem mit seinen Komponenten und Usability-Tests. Es gilt für Websites, Onlineshops, mobile Apps und SaaS-Plattformen und reduziert, gut gemacht, Fehler, Supportanfragen und Nacharbeit in der Entwicklung.

Zusammenfassung

Was Sie mit UX/UI-Design einkaufen und was es Ihnen erspart.

Die Kosten einer schlechten Nutzererfahrung stehen auf keiner Rechnung: Sie stecken im abgebrochenen Warenkorb, im Formular, das niemand ausfüllt, in Supportanrufen für etwas, das selbstverständlich sein sollte, und in Wochen Entwicklungsarbeit, die verloren gehen, wenn ein Screen nach der Programmierung neu gestaltet wird. UX/UI-Design zieht diese Entscheidungen nach vorn, wo eine Änderung einen Prototyp kostet und keinen Sprint.

Wir arbeiten mit Forschung und echten Daten (Interviews, Analytics, Heatmaps, Nutzertests), nicht mit Meinungen. Daraus entsteht die Struktur, danach Prototypen, die getestet werden, und am Ende ein Designsystem mit Komponenten, Zuständen und Regeln, damit Ihr Produkt wachsen kann, ohne an Konsistenz zu verlieren. Barrierefreiheit nach WCAG 2.2 AA ist ab dem ersten Entwurf dabei: Kontrast, Fokus, Touch-Flächen und Lesereihenfolge werden gestaltet, nicht nachträglich geflickt.

Was uns unterscheidet: Design und Entwicklung sind dasselbe Team. Das abgenommene Design ist das, was gebaut wird, und wer es gestaltet hat, prüft, dass es eingehalten wird. So haben wir für das Teatre Nacional de Catalunya gearbeitet: Nach dem UX-Redesign braucht der Ticketkauf 2-3 Klicks, und der mobile LCP sank um 37 %.

-37 % Mobiler LCP nach dem TNC-Redesign
+35 % Direktbuchungen im Tamarit Beach Resort
+200 % Online-Spenden bei Ampans

Leistungsumfang

Was UX/UI-Design umfasst

Jede Phase liefert ein Ergebnis, das Sie nutzen können, auch wenn ein anderer Anbieter entwickelt.

Nutzerforschung: Interviews, Auswertung von Analytics und Heatmaps sowie ein Blick auf den Wettbewerb
Informationsarchitektur: Content-Map, Navigation, Taxonomien und Abläufe der wichtigsten Aufgaben
Wireframes und klickbare Prototypen in Figma, um Abläufe vor dem visuellen Design zu prüfen
Usability-Tests mit echten Menschen am Prototyp, mit priorisierten Ergebnissen
Interface-Design auf Basis Ihrer Marke: Typografie, Farbe, Icons, Zustände und Mikrointeraktionen
Designsystem: Komponenten, Tokens und Nutzungsregeln, damit Ihr Team neue Screens konsistent erstellt
Barrierefreiheit nach WCAG 2.2 AA im Design: Kontrast, sichtbarer Fokus, Touch-Flächen und Lesereihenfolge
Responsives Mobile-first-Design: jeder Screen für Smartphone, Tablet und Desktop durchdacht
Begleitung der Entwicklung: Spezifikationen, Prüfung des Umgesetzten und datenbasierte Anpassungen nach dem Launch

Warum

UX/UI-Design, Webdesign und Branding: Was ist was?

Drei Leistungen, die sich berühren, mit unterschiedlichen Zielen.

Branding legt fest, wer Sie sind: Markenstrategie, Logo, visuelle Identität und Tonalität. Webdesign ist das Projekt einer Unternehmenswebsite, die diese Marke transportiert und Besuche in Anfragen verwandelt. UX/UI-Design geht eine Ebene tiefer: wie ein Produkt bei echten Aufgaben funktioniert, etwa beim Kaufen, Buchen, Registrieren, Verwalten eines Kontos oder bei der täglichen Arbeit in einer Plattform. Sie brauchen es, wenn nicht das Erscheinungsbild das Problem ist, sondern dass Menschen nicht erledigen können, wofür sie gekommen sind. Wenn die Conversion einer funktionierenden Website schwächelt, beginnen Sie mit CRO.

designsystem/button.json

// Eine Komponente, alle Regeln

"button-primaer": {

"zustaende": ["normal", "hover", "fokus", "deaktiviert", "laedt"],

"mindestkontrast": "4.5:1",

"touch_flaeche": "mindestens 24x24 px",

"fokus": "sichtbar, 3:1 zum Hintergrund"

}

Mit Zuständen Komponenten
WCAG 2.2 AA Barrierefreiheit
Getestet Prototyp

Kernpunkte

Was wir gestalten

Produkte, bei denen die Nutzererfahrung entscheidet, ob sie genutzt werden.

01
Websites mit komplexen Aufgaben

Spielpläne, Suchfunktionen, geschützte Bereiche, Buchungen oder Ticketverkauf. Für das TNC haben wir die Navigation durch den Spielplan mit Filtern und die Seiten der Vorstellungen mit einer klaren Hierarchie (Termine, Besetzung, Preise und Kauf-Button) neu gestaltet.
02
Onlineshops und Buchungsstrecken

Produktseiten, Kategorien, Warenkorb und Checkout. Im Tamarit Beach Resort führt die mobile UX in 3 Schritten durch die Buchung, mit Galerie und Unterkunftsvergleich.
03
Mobile Apps

Abläufe, Navigation und Komponenten für iOS und Android, nach den Konventionen der jeweiligen Plattform und mit Touch-Flächen und Zuständen für die Bedienung mit dem Daumen. Umgesetzt werden sie in unserer App-Entwicklung.
04
Digitale Produkte und SaaS

Dashboards, lange Formulare, Berechtigungen und intensive tägliche Nutzung. Das machen wir auch für uns selbst: Nexo, unsere eigene Plattform für CRM, Projekte, Rechnungen und Zeiterfassung, haben wir gestaltet und nutzen sie jeden Tag.
05
Designsysteme

Komponentenbibliothek, Tokens und Dokumentation, damit mehrere Teams oder Dienstleister mit denselben Bausteinen gestalten und entwickeln, ohne jeden Screen neu zu erfinden.
06
UX- und Barrierefreiheits-Audits

Heuristische Prüfung, Datenanalyse und Nutzertests an Ihrem bestehenden Produkt, mit einer priorisierten Liste von Änderungen. Wenn gesetzliche Vorgaben zu erfüllen sind, übernimmt unser Service für Web-Barrierefreiheit.

So arbeiten wir

So läuft ein UX/UI-Projekt ab

Vom Wissen über Ihre Nutzer zu einem getesteten Design, das gebaut werden kann.

01
Discovery und Forschung

Interviews mit Ihrem Team und mit Nutzern, Auswertung von Analytics, Heatmaps und Supportanfragen. Daraus ergeben sich die Ziele, die wichtigsten Aufgaben und die zu lösenden Probleme.
Je nach Umfang
02
Architektur und Abläufe

Content-Map, Navigation und der Ablauf jeder wichtigen Aufgabe. Wir entscheiden, was auf welchen Screen gehört und in welcher Reihenfolge, bevor wir ihn zeichnen.
Je nach Umfang
03
Prototyp und Tests

Wireframes und ein klickbarer Prototyp, den wir mit echten Menschen testen. Was unklar ist, wird hier geändert, solange es wenig kostet.
Iterativ
04
Interface-Design und Designsystem

Visuelles Design auf Basis Ihrer Marke, mit allen Zuständen jeder Komponente und dokumentierten Regeln zur Barrierefreiheit nach WCAG 2.2 AA.
Je nach Umfang
05
Umsetzung und Messung

Wir begleiten die Entwicklung (unsere oder Ihre), prüfen, ob das Umgesetzte dem Design entspricht, und messen nach dem Launch mit Daten, was funktioniert.
Laufend

Für wen

Passt das zu Ihnen?

UX/UI-Design lohnt sich, wenn Menschen Aufgaben erledigen müssen und es Daten gibt, um zu messen, ob es gelingt.

Für wen

Unternehmen mit einer Website oder einem Shop, in dem sich Menschen verirren, abbrechen oder anrufen, um etwas zu erledigen, das einfach sein sollte.
Teams, die eine App oder ein SaaS-Produkt bauen und die Abläufe vor der Programmierung prüfen wollen.
Produkte, die Flicken für Flicken gewachsen sind und ein Designsystem brauchen, um wieder konsistent zu werden.
Organisationen, die Barrierefreiheit erfüllen müssen (WCAG 2.2 AA, European Accessibility Act, BFSG) und sie von Anfang an gestalten möchten.
Interne Produkt- oder Entwicklungsteams, die Designer mit technischem Urteilsvermögen brauchen.

Für wen nicht

Wenn Sie nur eine einfache Unternehmenswebsite brauchen, die Ihre Marke vermittelt: Dafür reicht ein klassisches Webdesign-Projekt.
Wenn die Markenidentität selbst fehlt (Logo, Farben, Tonalität): Beginnen Sie mit Branding.
Wenn Sie schöne Screens ohne Zeit für Forschung oder Nutzertests suchen: Dann würden wir Ihnen nicht das liefern, was wir anbieten.

Lieferumfang

Was enthalten ist und was nicht

Was Sie am Ende eines UX/UI-Design-Projekts erhalten.

Enthalten

Forschungsbericht mit den wichtigsten Aufgaben, den gefundenen Problemen und ihrer Priorität
Informationsarchitektur und Abläufe der wichtigsten Aufgaben
Klickbarer Figma-Prototyp und Ergebnisse der Usability-Tests
Design aller vereinbarten Screens für Smartphone, Tablet und Desktop
Designsystem: Komponenten mit ihren Zuständen, Tokens und Regeln zur Barrierefreiheit
Bearbeitbare Designdateien und Eigentum an allen Ergebnissen

Nicht enthalten

Entwicklung und Programmierung (separat angeboten, mit unserem oder Ihrem Team)
Entwicklung einer Marke und visuellen Identität von Grund auf (das ist ein Branding-Projekt)

Der Beweis

Design, gemessen an Ergebnissen

Für das Teatre Nacional de Catalunya haben wir ein aufgabenzentriertes UX-Redesign umgesetzt: Der Ticketkauf braucht 2-3 Klicks, der mobile LCP sank um 37 % (von 3,8 auf 2,4 s), die Seiten pro Sitzung stiegen um 18 %, und die Website erfüllt WCAG AA. Für das Tamarit Beach Resort haben wir eine mobile Buchung in 3 Schritten auf Basis der eigenen Buchungsmaschine gestaltet, und die Direktbuchungen stiegen um 35 %. Bei der Fundació Ampans ging inklusives Design nach WCAG 2.1 AA mit einem Anstieg der Online-Spenden um 200 % einher. Und bei TwoPoles hob das per CRO gemessene Redesign von Produktseiten und Kategorien die Conversion-Rate von 2,1 auf 2,5 %.

2-3 Klicks bis zum Ticketkauf (TNC)
3 Schritte der mobilen Buchung (Tamarit)
+35 % Direktbuchungen (Tamarit)
5,0 Bewertung auf Clutch

Für den CTO

Zusammenfassung für den CTO

Wie Design und Engineering zusammenpassen.

Wir gestalten in Komponenten mit allen Zuständen (normal, Fokus, Fehler, leer, lädt, deaktiviert) und mit Tokens für Farbe, Typografie und Abstände, die unverändert in den Code übergehen. So sprechen Designsystem und Komponentenbibliothek dieselbe Sprache, und eine Markenänderung erfordert keine Prüfung Screen für Screen.

Barrierefreiheit wird im Design spezifiziert: Kontrast von 4,5:1 für Text und 3:1 für Bedienelemente und Fokus, Mindestgröße der Touch-Flächen, Fokusreihenfolge und Semantik jeder Komponente. Gemessen wird anschließend mit axe-core und Screenreadern, nicht nach Augenmaß. Auch die Performance wird gestaltet: Bildgewicht, Schriften und Animationen, die die Core Web Vitals nicht gefährden, wie beim TNC.

Technologien

Figma
Design-Tokens
Tailwind CSS
axe-core
Lighthouse
VoiceOver
TalkBack
GA4
Hotjar
Microsoft Clarity

Komponenten mit allen Zuständen, nicht nur dem Idealfall
Design-Tokens, die ohne Neuinterpretation in den Code übergehen
Barrierefreiheit nach WCAG 2.2 AA spezifiziert und mit axe-core gemessen
Performance ab der Designphase berücksichtigt (Bilder, Schriften, Animation)
Design-Review des Umgesetzten vor dem Launch

Risiken und wie wir sie abdecken

Die Risiken, die wir vermeiden

Was in Designprojekten typischerweise schiefgeht.

01
Gestalten nach der Meinung der ranghöchsten Person im Meeting

Abhilfe
Jede wichtige Entscheidung stützt sich auf Forschung, Nutzungsdaten oder Nutzertests und wird dokumentiert.
02
Ein schönes Design, das sich nicht bauen lässt oder anders gebaut wird

Abhilfe
Design und Entwicklung sind dasselbe Team: Das Design wird technisch geprüft, und wir kontrollieren die Umsetzung vor dem Launch.
03
Barrierefreiheit, die am Ende nachgeflickt wird

Abhilfe
Kontrast, Fokus, Touch-Flächen und Lesereihenfolge werden im Designsystem festgelegt und mit axe-core gemessen.
04
Ein Produkt, das mit jedem neuen Screen an Konsistenz verliert

Abhilfe
Ein Designsystem mit Komponenten, Tokens und Nutzungsregeln, mit dem Ihr Team auch ohne uns weiterarbeiten kann.

Technologien

Werkzeuge

Womit wir forschen, gestalten und messen.

Figma
Maze
Hotjar
Microsoft Clarity
GA4
Looker Studio
axe-core
Lighthouse
VoiceOver
TalkBack
NVDA
WCAG 2.2
Tailwind CSS
Design-Tokens

Häufige Fragen

Häufige Fragen zum UX/UI-Design

Was uns vor Projektbeginn am häufigsten gefragt wird.

Was ist der Unterschied zwischen UX und UI?

Die UX (User Experience) bestimmt, wie das Produkt funktioniert: welche Aufgaben es löst, in welcher Reihenfolge, mit welcher Struktur und welchen Inhalten. Die UI (User Interface) bestimmt, wie jeder Screen aussieht und sich bedienen lässt: Komponenten, Typografie, Farbe, Zustände. Eine gute UI auf einer schlechten UX bleibt schwer zu bedienen, deshalb arbeiten wir an beidem zusammen.

Was macht eine UX Design Agentur?

Sie untersucht, wie Menschen Ihr Produkt nutzen, ordnet die Informationen, gestaltet und testet Prototypen, entwirft das Interface und ein Designsystem und begleitet die Entwicklung, damit das Umgesetzte dem Design entspricht. Bei uns kann dasselbe Team es außerdem bauen.

Worin unterscheidet es sich vom Webdesign?

Webdesign ist das Projekt einer Unternehmenswebsite, die Ihre Marke vermittelt und Anfragen erzeugt. UX/UI-Design konzentriert sich auf Produkte mit Aufgaben: Shops, Buchungen, geschützte Bereiche, Apps oder SaaS-Plattformen, mit Forschung und Nutzertests. Viele Webdesign-Projekte enthalten UX; der Unterschied liegt in der Tiefe.

Was kostet ein UX/UI-Design-Projekt?

Das hängt von der Zahl der Abläufe und Screens ab, davon, wie viel Forschung und wie viele Testrunden nötig sind, und ob Sie ein vollständiges Designsystem brauchen. Einen Einheitspreis veröffentlichen wir nicht: Nach einer ersten Discovery-Sitzung erhalten Sie ein verbindliches Angebot nach Phasen. Eine Unternehmenswebsite beginnt bei uns ab 4.500 €.

Wie lange dauert es?

Das hängt vom Umfang ab: Ein UX-Audit eines einzelnen Ablaufs ist etwas anderes als das Design eines ganzen SaaS-Produkts. Als reale Referenz: Das komplette Redesign des TNC, mit Design und Entwicklung, dauerte 8 Monate. Nach der Discovery erhalten Sie einen Zeitplan mit Meilensteinen.

Testen Sie mit echten Nutzern?

Ja. Wir testen die Prototypen mit Menschen, die Ihren Nutzern ähneln, bevor programmiert wird, und messen nach dem Launch mit Analytics und Heatmaps. Was unklar ist, wird im Prototyp geändert, wo eine Änderung am wenigsten kostet.

Was ist ein Designsystem, und brauche ich eines?

Es ist die Bibliothek der Komponenten (Buttons, Formulare, Karten, Tabellen) mit ihren Zuständen, Tokens und Nutzungsregeln. Sie brauchen eines, wenn Ihr Produkt viele Screens hat, wenn mehrere Personen oder Dienstleister daran gestalten und entwickeln oder wenn es wachsen soll. Für eine kleine Website genügt ein Styleguide.

Erfüllt das Design WCAG 2.2 AA?

Ja, standardmäßig. Ausreichender Kontrast, sichtbarer Fokus, Touch-Flächen, Lesereihenfolge und Alternativtexte werden im Design festgelegt und anschließend mit axe-core und Screenreadern gemessen. Wenn Sie ein formales Audit brauchen oder den European Accessibility Act erfüllen müssen, übernimmt das unser Service für Web-Barrierefreiheit.

Können Sie gestalten und mein Team entwickelt?

Ja. Wir liefern bearbeitbare Dateien, das Designsystem und Spezifikationen und begleiten Ihr Team während der Entwicklung. Wenn Sie lieber uns bauen lassen, sitzen Design und Entwicklung im selben Team, ohne Übergaben.

Gestalten Sie mobile Apps?

Ja: Abläufe, Navigation und Komponenten für iOS und Android, nach den Konventionen der jeweiligen Plattform. Wenn Sie die App auch bauen lassen möchten, sehen Sie sich unsere App-Entwicklung an.

Nächster Schritt

Erzählen Sie uns, was Ihre Nutzer erreichen müssen

Ein 30-minütiger Videocall, um Ihr Produkt zu verstehen und zu sehen, wo Menschen hängen bleiben. Wir sagen Ihnen, wie wir vorgehen würden und welchen Umfang das hätte.

Über mein Produkt sprechen