--- title: "Product Design und UX/UI für SaaS und Web-Apps — Dardo" description: "Product Design und UX/UI für SaaS, Web-Apps und MVPs: Task Flows, alle Interface-Zustände, Prototypen und umsetzbare Komponenten. Gründergeführt, US-Zeiten." url: "https://dardo.studio/de/leistungen/product-design-ux-ui-web-apps-saas/" language: "de" translations: {"en":"https://dardo.studio/en/services/product-design/","es":"https://dardo.studio/es/servicios/diseno-de-producto/","fr":"https://dardo.studio/fr/services/design-produit/","it":"https://dardo.studio/it/servizi/product-design-ux-ui-web-app-saas/","pt":"https://dardo.studio/pt/servicos/design-de-produto/","nl":"https://dardo.studio/nl/diensten/productontwerp/","sv":"https://dardo.studio/sv/tjanster/produktdesign/","pl":"https://dardo.studio/pl/uslugi/projektowanie-produktow-cyfrowych/","uk":"https://dardo.studio/uk/services/product-design/","ru":"https://dardo.studio/ru/services/product-design/","ar":"https://dardo.studio/ar/services/product-design/","hi":"https://dardo.studio/hi/services/product-design/","th":"https://dardo.studio/th/services/product-design/","ja":"https://dardo.studio/ja/services/product-design/","ko":"https://dardo.studio/ko/services/product-design/","zh-Hans":"https://dardo.studio/zh-Hans/services/product-design/","zh-Hant":"https://dardo.studio/zh-Hant/services/product-design/"} updated: "2026-10-08" --- # Produktdesign und UX/UI für Web-Apps und SaaS Produktdesign ist die UX- und UI-Arbeit, die bestimmt, wie sich eine Web-App oder ein SaaS-Produkt verhält: welche Aufgabe zuerst kommt, was jeder Screen zeigt und wie die Oberfläche reagiert, wenn etwas gelingt oder schiefgeht. Dardo gestaltet diese Systeme für Gründerinnen, Gründer und Produktteams, von MVP-Oberflächen bis zu neuen Features, und kann sie auch umsetzen. Sie erhalten Abläufe, Prototypen und Komponenten, die Ihre Entwickler ohne Raten implementieren können. Von Dardo Redaktionsteam · Aktualisiert 8. Okt. 2026 · 6 Min. Lesezeit [Schreiben Sie uns auf WhatsApp](https://wa.me/573163373216?text=Hallo%20Dardo%2C%20ich%20h%C3%A4tte%20gern%20ein%20Angebot%20f%C3%BCr%3A%20Produktdesign%20und%20UX%2FUI%20f%C3%BCr%20Web-Apps%20und%20SaaS) ## Produktdesign oder Webdesign: Was brauchen Sie? Eine Marketing-Website erklärt ein Angebot und führt zu einer Anfrage. Ein Produkt wird immer wieder genutzt, um Arbeit zu erledigen, und muss deshalb Konten, Berechtigungen, echte Daten und jeden Zustand dazwischen abdecken. Produktdesign übernimmt genau diese zweite Aufgabe: die Abläufe, Informationsarchitektur, Komponenten und Rückmeldungen, die ein Tool beim ersten Besuch verständlich und beim hundertsten schnell machen. Wenn Sie eine Website brauchen, die Ihr Unternehmen präsentiert, beginnen Sie mit individuellem Webdesign. Besteht das Produkt überwiegend aus Diagrammen, Karten oder operativen Dashboards, geht unser Angebot zur Datenvisualisierung hier tiefer. Viele SaaS-Teams brauchen beides, und wir planen beides als getrennte Liefergegenstände, damit jeder für sich abgenommen werden kann. ## Was ein Produktdesign-Projekt umfasst Das Angebot legt fest, welche Phasen enthalten sind, wer welche Inputs liefert und wie jedes Arbeitsergebnis abgenommen wird. - Abbildung zentraler Aufgaben und Abläufe, einschließlich Rollen und Berechtigungen - Informationsarchitektur und Navigation - Interaktive Prototypen, geprüft mit realistischen Inhalten - UI-Komponenten mit Zuständen für leer, Laden, Fehler und fehlende Berechtigung - Inhaltsregeln und Barrierefreiheitszustände für jede Komponente - Umsetzungsspezifikationen und Überprüfung der fertigen Oberfläche ## Ein MVP rund um eine reale Aufgabe gestalten Wir beginnen mit einer konkreten Aufgabe, etwa einen Eintrag einreichen, einen Datensatz finden oder Optionen vergleichen, und definieren Erfolg in beobachtbaren Kriterien. Wir erfassen die beteiligten Personen, Berechtigungen, Informationen und Entscheidungen. Support-Gespräche, Produktdaten und Analytics können zeigen, wo ein bestehender Ablauf scheitert. Liegen solche Belege noch nicht vor, kennzeichnen wir Annahmen als Annahmen und planen eine gezielte Discovery, statt sie als Forschungsergebnisse auszugeben. Jeder Ablauf wird gezeichnet für die erste Nutzung, wiederkehrende Nutzung, leere Daten, Fehler, Abbruch, Bestätigung und Wiederherstellung. Dieses Inventar der Zustände macht den tatsächlichen Aufwand früh sichtbar und verhindert, dass ein ansprechender Idealpfad zur gesamten Spezifikation wird. ## Die schwer umkehrbaren Entscheidungen prototypisch testen Der Prototyp konzentriert sich auf Navigation, Terminologie, Datendichte, responsives Verhalten und die Rückmeldung nach jeder Aktion. Prüfende bearbeiten definierte Aufgaben mit realistischen Inhalten, sodass das Feedback daran anknüpft, was Menschen abschließen konnten oder nicht, und nicht nur am Geschmack. Ein Prototyp belegt das gestaltete Verhalten; Akzeptanz und Umsatz werden nach dem Release gemessen, und wir versprechen sie nicht im Voraus. ## Superame: Gestaltung eines öffentlichen Projekt-Rankings Dardo hat Superame gestaltet und entwickelt, ein Produkt, das die Projektsuche in einen sichtbaren Wettbewerb verwandelt. Eine Bestenliste erzeugt Dringlichkeit, aber auch Misstrauen, wenn sich Platzierungen ohne Erklärung ändern. Deshalb steht der Rang im Mittelpunkt, getragen von einer stabilen Projektidentität, Entdeckungsansichten und einer klaren Erklärung, wie man teilnimmt. Das Design behandelt Entdecken, Einreichen und Feedback als eine zusammenhängende Journey, und mobile Interaktionen sind so gestaltet, dass sie gleichwertiges Feedback ohne Hover geben. Es ist ein laufendes Produkt, kein Mockup. Die Astro-Anwendung speichert das Ranking in einer Neon-Datenbank und leitet Käufer zum gehosteten Checkout von Dodo Payments weiter. Der Server prüft signierte Zahlungs-Callbacks, bevor er Guthaben gutschreibt, und wendet dieselbe idempotente Buchung auf Rückerstattungen und Zahlungsstreitigkeiten an. Zahlen zu Teilnahme, Bindung und Umsatz bleiben unveröffentlicht, bis ein datierter Produktbericht freigegeben ist. ## Vom Prototyp zur funktionierenden Software Die Übergabe umfasst Komponenten, Zustände, Inhaltsregeln und Umsetzungshinweise. Wir klären, welche Fragen Input von Entwicklung oder Richtlinien brauchen, wer sie freigibt und wie die fertige Oberfläche mit dem Prototyp abgeglichen wird. Dardo kann die Web-Oberfläche umsetzen oder an der Seite Ihrer Entwickler arbeiten; Architektur, Backend, Sicherheit und Datenverantwortung werden separat geplant, damit niemand annimmt, sie seien abgedeckt. ## Kosten und Zusammenarbeit mit einem kleinen Senior-Team Die Kosten richten sich nach der Anzahl der Nutzerrollen und zentralen Abläufe, den Zuständen, die jeder Screen abdecken muss, dem gewünschten Umfang an Discovery oder Tests und danach, ob Dardo die Oberfläche auch umsetzt. Das Anfrageformular fragt nach einem Budgetrahmen, von unter 5.000 USD bis 60.000 USD und mehr, und wir passen den Umfang daran an, statt feste Screen-Pakete zu verkaufen. Dardo ist ein Team aus drei Personen in Bogotá, Kolumbien, geleitet von Gründer Nicolás Cerón. Sie arbeiten direkt mit den Menschen, die gestalten, auf Englisch oder Spanisch, und die Zeitzone von Bogotá, UTC−5, passt zu den Arbeitszeiten an der US-Ostküste und in den Central Time Zones. Für nordamerikanische Produktteams macht das Nearshore-Zusammenarbeit praktikabel: Reviews und Entscheidungen finden am selben Tag statt. ## Fragen vor Ihrer Entscheidung **Was macht eine Product-Design-Agentur?** Eine Product-Design-Agentur plant und gestaltet, wie ein digitales Produkt funktioniert: Task Flows, Informationsarchitektur, Interface-Komponenten, Prototypen und die Spezifikationen, nach denen Entwickler:innen bauen. Manche übernehmen außerdem Research oder die Entwicklung des Produkts. Bei Dardo reicht ein Projektumfang vom Konzipieren eines zentralen Flows bis zum Entwerfen und Umsetzen einer Weboberfläche. Im Angebot steht genau, welche Phasen enthalten sind. **Was kostet UX/UI-Design für ein MVP?** Das hängt von der Zahl der Nutzerrollen, zentralen Flows und Interface-Zustände ab, außerdem davon, wie viel Research und wie viele Tests Sie brauchen. Wir erstellen das Angebot, nachdem wir die Kernaufgabe erfasst haben, statt nach Anzahl der Screens zu kalkulieren, denn ein Flow mit komplexen Berechtigungen kann aufwendiger sein als zehn einfache Seiten. Die Budgetstufen in unserem Anfrageformular, von unter 5.000 USD bis über 60.000 USD, helfen uns, das erste Angebot einzuschätzen. **Wie lange dauert es, ein MVP zu gestalten?** Das hängt davon ab, wie viele Flows und Zustände das erste Release braucht. Die Meilensteine legen wir im Angebot fest, nachdem wir die Kernaufgabe erfasst haben. Der erste Meilenstein ist ein Prototyp dieser Aufgabe samt leeren Zuständen und Fehlerzuständen, der früh zeigt, ob der Plan aufgeht. Wenn Sie einen Starttermin oder Fundraising-Termin haben, nennen Sie ihn gleich zu Beginn, damit sich der Umfang in Phasen aufteilen lässt. **Brauchen wir vor dem Start Nutzer oder Research?** Nein. Vorhandene Erkenntnisse wie Support-Tickets, Analytics oder Interviews sind wertvoll, aber viele MVPs starten ohne sie. Wir beginnen mit dem, was Ihr Team weiß, halten Annahmen ausdrücklich als Annahmen fest und wählen je nach Risiko gezielte Research- oder Prototypentests. Was wir vermeiden: Vermutungen als Erkenntnisse auszugeben. **Was ist der Unterschied zwischen Product Design, UX-Design und UI-Design?** UX-Design gestaltet Struktur und Ablauf: was Menschen tun müssen und in welcher Reihenfolge. UI-Design gestaltet die Oberfläche, die sie sehen und bedienen: Layout, Komponenten, Typografie und Feedback. Product Design verbindet beides mit Produktentscheidungen, etwa was das erste Release enthält und wie Erfolg gemessen wird. In einem kleinen Team wie unserem decken dieselben Personen alle drei Bereiche ab, sodass bei Übergaben keine Entscheidungen verloren gehen. **Kann Dardo das Produkt auch bauen?** Ja, für Weboberflächen. Wir können das Frontend umsetzen oder mit Ihren Entwickler:innen zusammenarbeiten. Superame ist ein Produkt, das wir bis hin zum Bezahlvorgang gestaltet und entwickelt haben. Architektur, Backend, Sicherheit und Datenverantwortung werden getrennt vom Interface-Design abgegrenzt, sodass im Angebot klar steht, wer welchen Teil verantwortet. **Gestaltet ihr Dashboards und Admin-Bereiche?** Ja, als Teil der Flows eines Produkts: Navigation, Tabellen, Filter, Berechtigungen und die Zustände drumherum. Wenn der Kern der Arbeit darin besteht, Daten zu visualisieren, etwa mit Diagrammen, Karten oder Rankings samt Quellen und Einheiten, ist unser Data-Visualization-Service der bessere Einstieg. Produkte, die beides brauchen, erhalten einen gemeinsamen Umfang mit geteilten Komponenten. [Dardo](https://dardo.studio/de/) · [Leistungen](https://dardo.studio/de/leistungen/) · Produktdesign ## Verwandte Arbeiten & Fallstudien [![superame.lol: veröffentlichte Projektoberfläche](https://dardo.studio/work/superame-1.webp?v=34a51b35f537) · Laufendes Produkt / Ranking und Teilnahme · **superame.lol** · Sehen Sie sich das öffentliche Ranking und den Teilnahmeablauf zusammen mit den dokumentierten Produktzuständen an. Die Fallstudie unterscheidet umgesetztes Verhalten von nicht gemessener Akzeptanz und nicht gemessenem Umsatz. · Projekt ansehen](https://dardo.studio/de/referenzen/superame-webdesign-fallstudie/) ## Beginnen Sie mit einer realen Produktaufgabe Erfassen Sie einen zentralen Ablauf, seine Fehlerzustände und das Erfolgskriterium. Sehen Sie sich die veröffentlichte Oberfläche von Superame an und machen Sie aus der Produktentscheidung ein testbares Briefing. [01 · **Passende Arbeiten ansehen** · Veröffentlichtes Projekt und genauer Leistungsumfang](https://dardo.studio/de/referenzen/superame-webdesign-fallstudie/) · [02 · **Angrenzende Leistungen vergleichen** · Die Leistung wählen, die zum Problem passt](https://dardo.studio/de/leistungen/webdesign-agentur-bogota/) · [03 · **Ihr Briefing besprechen** · Ein Angebot mit klarem Umfang in Ihrer Sprache anfragen](https://dardo.studio/de/kontakt/?service=product-design) ## Weiterstöbern. - [![superame.lol – Vorschau der Website](https://dardo.studio/_astro/01M4H711Q11QCMQDA10WE4A1K7_ZrTSRU.webp) · Fallstudie · **superame.lol – Webdesign-Fallstudie**](https://dardo.studio/de/referenzen/superame-webdesign-fallstudie/) - [Leistung · **Entwicklung von Web-Apps, SaaS und MVPs**](https://dardo.studio/de/leistungen/webapp-entwicklung/) - [Leistung · **Datenvisualisierung und Dashboard-Interfaces im Design**](https://dardo.studio/de/leistungen/datenvisualisierung/) - [Leistung · **Individuelles Webdesign-Studio in Bogotá, Kolumbien**](https://dardo.studio/de/leistungen/webdesign-agentur-bogota/)