Caixa Mágica Software

UX/UI Design Hub

Entwerfen Sie das
Schiffe wie entworfen

Wir gestalten Benutzeroberflächen für Web-, Mobil- und Automobilplattformen. Die Arbeit basiert auf Nutzerforschung, orientiert sich an Standards der Barrierefreiheit und ist detailliert genug spezifiziert, dass das Entwicklungsteam sie ohne Interpretationsspielraum umsetzen kann.

Caixa Mágica UX/UI Design Hub
Plattformen

Was wir entwerfen

Von bürgerorientierten Portalen bis hin zu Automotive HMI

Unsere UX/UI-Arbeit erstreckt sich über öffentliche Plattformen, die von Millionen von Bürgern genutzt werden, mobile Anwendungen für Außendienstmitarbeiter, Enterprise-Backoffice-Tools und fahrzeugintegrierte Mensch-Maschine-Schnittstellen. In jedem Fall sind die Designbeschränkungen kontextspezifisch. Daher entwerfen wir von Anfang an plattformspezifisch, anstatt einen generischen Ansatz zu verfolgen.

01

Web-Plattformen

Von Marketing-Websites bis hin zu komplexen Unternehmensportalen mit rollenbasierter Zugriffskontrolle, Mehrsprachigkeit und Transaktionsflüssen mit hohem Volumen. Wir haben Schnittstellen für Plattformen des öffentlichen Sektors entworfen, die von Millionen von Bürgern genutzt werden, Umgebungen, in denen die Einhaltung von Barrierefreiheitsstandards zwingend vorgeschrieben ist und die Kosten einer verwirrenden Benutzeroberfläche sich in Supportanrufen niederschlagen.

02

Mobile Anwendungen

Native und plattformübergreifende Benutzeroberflächen für Android und iOS. Wir gestalten unter Berücksichtigung der Einschränkungen von Mobilgeräten: begrenzter Bildschirmplatz, Touch-Interaktionen, variable Konnektivität. Gutes Mobile Design ist kein komprimiertes Desktop-Design. Es ist ein Erlebnis, das darauf aufgebaut ist, wie Menschen ein Gerät tatsächlich nutzen, oft abgelenkt, oft unterwegs.

03

Unternehmenssoftware

Back-Office-Tools, operative Dashboards, Datenmanagementsysteme und Workflow-Schnittstellen. Dies sind Umgebungen, in denen Benutzer acht Stunden am Tag verbringen. Die Priorität liegt auf Effizienz und Klarheit: Reduzierung der kognitiven Belastung, Minimierung von Fehlerraten und Lesbarkeit komplexer Daten ohne Schulungsaufwand.

04

Automobil-HMI

Mensch-Maschine-Schnittstellen-Design für fahrzeugintegrierte Systeme, eine Spezialdisziplin mit eigenen Sicherheitsbeschränkungen und Interaktionsmustern. Wir haben mit Blickzeitstandards, Reduzierung von Ablenkungen, der Integration von Touch- und physischen Bedienelementen sowie der Herausforderung, für Benutzer zu gestalten, die den Bildschirm nur für einen kurzen Moment betrachten können, gearbeitet.

Design-Systeme

Für Kunden, die in großem Umfang bauen, erstellen wir Komponentenbibliotheken und Designsysteme, die Entwicklungsteams einen konsistenten, wiederverwendbaren Satz von Bausteinen bieten. Ein gut durchdachtes Designsystem schließt die Lücke zwischen Design und Entwicklung, hält das Produkt visuell konsistent, während es wächst, und bedeutet, dass neue Bildschirme erstellt werden können, ohne dass ein Designer jede Entscheidung überprüfen muss. Wir erstellen diese in Figma mit vollständiger Komponenten-Dokumentation und arbeiten mit der technischen Abteilung zusammen, um sicherzustellen, dass das System sauber auf das von ihnen gewählte Framework abgebildet wird.

Prozess

Wie wir entwerfen

Warum frühes Testen wichtig ist

Ein Usability-Problem, das im Wireframe-Stadium gefunden wird, kostet einen Designer eine Stunde zur Behebung. Dasselbe Problem, das nach der Entwicklung entdeckt wird, erfordert Wochen zur Behebung und birgt das Risiko, bereits funktionierende Komponenten zu destabilisieren. In der Praxis bedeutet dies, dass wir Usability-Sitzungen in jeder Phase durchführen – nicht nur am Ende, wenn die Behebung von Problemen teuer ist.

01

Nutzerforschung

Wir sprechen mit den Menschen, die das Produkt nutzen werden. Für Unternehmenssoftware bedeutet dies Sitzungen mit Betriebsteams, Kundendienstmitarbeitern oder Außendienstmitarbeitern, die täglich in der Benutzeroberfläche arbeiten werden. Bei Verbraucherprodukten bedeutet dies strukturierte Tests mit Zielbenutzern, bevor ein einziges hochdetailliertes Mockup erstellt wird. Der Umfang der Forschung passt sich dem Projektzeitplan an, aber wir überspringen ihn niemals.

02

Informationsarchitektur

Bevor wir uns Gedanken darüber machen, wie etwas aussieht, legen wir fest, wie Inhalte und Funktionalität organisiert werden sollen. Die richtige Struktur ist das, was ein Produkt, das die Nutzer navigieren können, von einem unterscheidet, das eine Einarbeitung erfordert. Tree Testing und Card Sorting mit echten Nutzern validieren die IA, bevor wir uns für sie entscheiden.

03

Wireframes und Prototyping

Interaktive Prototypen, die vor Beginn der Entwicklung getestet werden können. Usability-Tests in der Wireframe-Phase decken strukturelle Probleme und Probleme im Ablauf auf, solange deren Behebung noch kostengünstig ist. Der Prototyp entspricht dem tatsächlichen Produkt so gut, dass die Nutzer auf nützliche und aufschlussreiche Weise verwirrt werden.

04

High-Fidelity-Design und -Spezifikation

Visuelles Design, Komponenten-Spezifikationen, Interaktionsnotizen für nicht standardmäßige Verhalten und ein Styleguide. Barrierefreiheit wird in dieser Phase integriert: Farbkontrast nach WCAG 2.1 AA, Tastaturnavigation, Screenreader-Kompatibilität, Touch-Target-Größen. Dies ist keine Checkliste, die wir am Ende durchgehen.

05

Implementierungs-QA

Wir überprüfen die erstellte Benutzeroberfläche vor dem Start, um sicherzustellen, dass die Implementierung der Designabsicht entspricht. Dies ist bei jedem Engagement Standard. Ohne diesen Schritt werden Designs nicht wie geplant ausgeliefert, da die Lücke zwischen einer Figma-Datei und einer gerenderten Benutzeroberfläche der Ort ist, an dem die meisten visuellen Inkonsistenzen auftreten.

Warum es wichtig ist

Designer, die mit den Ingenieuren zusammenarbeiten, die bauen

Designer, die nur gestalten und nicht mit Ingenieuren in der Produktion zusammenarbeiten, entwickeln Gewohnheiten, die die Implementierung erschweren. Interaktionszustände werden nicht berücksichtigt. Animationen werden spezifiziert, deren Erstellung teuer ist. Komponenten werden erstellt, ohne darüber nachzudenken, wie sie bei unterschiedlichen Datenlängen und Bildschirmgrößen skalieren.

Unsere Designer wissen, was gebaut wird, von wem und in welchem Rahmenwerk. Das Ergebnis ist eine reibungslose Übergabe und Schnittstellen, die tatsächlich so ausgeliefert werden, wie sie entworfen wurden.

Für Kunden, die mit ihrem eigenen Entwicklungsteam zusammenarbeiten, stellen wir Figma-Deliverables mit dem erforderlichen Spezifikationsgrad zur Verfügung, der Rätselraten überflüssig macht.

Framework-bewusstes Design

Wir gestalten nach dem Komponentenmodell von Angular, React oder Vue. Komponenten sind realistisch zu implementieren, keine idealisierten Entwürfe, die vor der Auslieferung neu entwickelt werden müssen.

WCAG 2.1 AA als Standard

Barrierefreiheit ist in jeder Spezifikation integriert: Farbkontrast, Tastaturnavigation, Screenreader-Kompatibilität, Touch-Ziele. Keine Checkliste nach dem Start.

Inkrementelle Verbesserung verfügbar

Wir prüfen die bestehende Benutzeroberfläche, identifizieren die größten Probleme und gestalten spezifische Abläufe neu, ohne dass ein vollständiger Umbau erforderlich ist. Messbare Verbesserungen mit geringerem Risiko und geringeren Kosten.

Qualitätssicherung nach dem Erstellen enthalten

Wir überprüfen die erstellte Benutzeroberfläche vor der Veröffentlichung. So werden Designs tatsächlich wie entworfen ausgeliefert, und dies ist Standard bei jeder Beauftragung.

FAQ

Häufig gestellte Fragen

Was Kunden typischerweise fragen, bevor sie eine Design-Beauftragung beginnen.

Was ist der Unterschied zwischen UX Design und UI Design?

UX-Design befasst sich damit, wie ein Produkt funktioniert: die Informationsstruktur, der Aufgabenfluss und ob Benutzer ihre Ziele effizient erreichen können. UI-Design befasst sich damit, wie es aussieht: die visuelle Sprache, Komponenten und ästhetische Konsistenz. Gutes Produktdesign erfordert beides. UX ohne UI erzeugt funktionale, aber unattraktive Software. UI ohne UX erzeugt attraktive Software, die frustrierend zu bedienen ist.

Wie gehen Sie an Barrierefreiheit heran?

Wir gestalten nach WCAG 2.1 AA als Standard-Baseline. Für öffentliche Projekte in Portugal und der EU gestalten wir nach den höheren Barrierefreiheitsanforderungen, die durch europäische Gesetzgebung vorgeschrieben sind. Barrierefreiheit ist von Anfang an integriert: Kontrastverhältnisse, Tastaturnavigationspfade, Screenreader-Beschriftungen und Touch-Zielflächen sind Teil jeder Spezifikation.

Führen Sie User Research durch, bevor Sie entwerfen?

Ja, immer. Für eine große Unternehmensplattform könnten das strukturierte Interviews mit 15 bis 20 Benutzern, Card Sorting, Tree Testing und mehrere Runden Usability-Tests bedeuten. Für ein fokussiertes Redesign könnten es fünf moderierte Usability-Sitzungen mit bestehenden Benutzern sein. Der Ansatz passt sich dem Projekt an, aber Benutzerforschung wird nie übersprungen. Designdecisions, die ohne Benutzereinbeziehung getroffen werden, sind reine Vermutungen.

Arbeitsprozess und Ergebnisse

Kann man ein bestehendes Produkt verbessern, ohne es von Grund auf neu zu bauen?

Ja, und dies ist eines der gängigsten Projekte, die wir durchführen. Wir überprüfen die bestehende Benutzeroberfläche, identifizieren die Probleme mit den größten Auswirkungen und überarbeiten spezifische Komponenten oder Abläufe. Dies liefert messbare Verbesserungen ohne das Risiko und die Kosten eines vollständigen Neuanfangs.

Wie arbeiten Sie mit unserem Entwicklungsteam zusammen?

Wir liefern Figma-Dateien mit vollständigen Komponentenspezifikationen, Interaktionshinweisen für nicht standardmäßige Verhaltensweisen, einem Styleguide und einem Komponenteninventar. Wenn Ihr Team React, Angular oder Vue verwendet, gestalten wir nach dem Komponentenmodell dieses Frameworks. Eine QA-Überprüfung der erstellten Benutzeroberfläche vor der Veröffentlichung ist in jedem Auftrag enthalten.

Was kostet ein Design-Engagement und wie lange dauert es?

Ein UX-Audit und Neudesign eines bestimmten Produktbereichs dauert in der Regel 4 bis 8 Wochen. Eine komplette Produktgestaltung, von der Nutzerforschung bis hin zu einem vollständigen Designsystem, dauert je nach Produktkomplexität 3 bis 6 Monate. Wir legen den Umfang für jede Zusammenarbeit nach einem ersten Gespräch individuell fest.

Haben Sie ein Produkt zu entwerfen?

Erzählen Sie uns, was Sie entwickeln und wer es nutzen wird. Wir antworten innerhalb eines Werktages.

Lass uns reden