Wie ein Web-App-Projekt abläuft: Phasen, Dauer und Kosten verständlich erklärt

Ein Web-App-Projekt läuft in sechs Phasen ab: Zuerst wird geklärt, welches Problem die Anwendung lösen soll und wer damit arbeitet. Dann entstehen ein Konzept mit Rollen, Datenmodell und klickbarem Prototyp, danach die Entwicklung in kurzen Etappen, ein Test mit echten Nutzern, der Livegang mit Datenübernahme und schliesslich der laufende Betrieb. Wie lange das dauert und was es kostet, entscheidet vor allem der Umfang der ersten Version. Bei DLM Digital beginnt ein Prototyp oder MVPEin Minimum Viable Product (MVP) ist die kleinste lauffähige Version eines Produkts, die für echte Nutzer bereits einen vollständigen Nutzen erfüllt und…Mehr erfahren → ab CHF 10'000.

Dieser Artikel richtet sich an Geschäftsführende und Projektverantwortliche in KMU, die zum ersten Mal eine Web-App bauen lassen und wissen möchten, was auf sie zukommt. Ob es überhaupt eine Web-AppEine Web-App ist eine Anwendung, die im Browser läuft und sich wie ein Programm bedienen lässt — mit Login, Eingaben, gespeicherten Daten und Abläufen. Anders…Mehr erfahren → braucht oder eine Website reicht, klärt der Artikel Web-App, Website oder App?. Hier geht es um das Wie.

Phase 1: Klärung, das Problem vor der Lösung

Jedes gute Projekt beginnt mit Fragen, nicht mit Bildschirmen. Was läuft heute schlecht? Wo gehen Zeit, Daten oder Kunden verloren? Wer soll künftig was erledigen, und woran merken Sie nach einem halben Jahr, dass sich die Investition gelohnt hat?

In dieser Phase, oft Discovery-Phase genannt, werden die heutigen Abläufe Schritt für Schritt aufgeschrieben. Am meisten bringt es, mit echten Beispielen zu arbeiten: die Excel-Liste, die drei Leute parallel pflegen, die E-Mail, mit der Kunden ihre Unterlagen schicken, das PDF-Formular, das ausgedruckt und wieder eingescannt wird.

Ergebnis der Klärung ist eine kurze Liste:

• das Ziel in einem Satz,
• die Rollen, etwa Kunde, Sachbearbeitung, Leitung,
• die Kernabläufe, die die erste Version können muss,
• die Dinge, die bewusst später kommen,
• die Systeme, mit denen die Web-App sprechen muss.

Der letzte Punkt wird häufig unterschätzt. Eine Anbindung an Buchhaltung, CRMEin CRM (Customer Relationship Management) ist eine Software, in der ein Unternehmen alle Informationen zu Kunden und Interessenten zentral verwaltet:…Mehr erfahren → oder ein bestehendes Branchenprogramm kann ein Projekt mehr prägen als jede Oberfläche. Was eine solche Schnittstelle ist und wo die Tücken liegen, erklärt API-Schnittstelle erklärt.

Phase 2: Konzept, Datenmodell und Klickprototyp

Aus der Klärung entsteht das Konzept. Drei Dinge gehören dazu.

Rollen und Rechte. Wer darf was sehen und ändern? Ein Kunde sieht nur seine eigenen Dokumente, die Sachbearbeitung alle Kunden ihrer Region, die Leitung alles. Diese Regeln früh festzulegen, verhindert später teure Umbauten.

Datenmodell. Welche Dinge verwaltet die Anwendung, und wie hängen sie zusammen? Kunde, Auftrag, Dokument, Termin, Rechnung. Das klingt technisch, ist aber eine fachliche Frage: Kann ein Auftrag mehrere Kunden haben? Gehört ein Termin zu einem Auftrag oder zu einem Kunden? Wer hier sauber denkt, spart in der Entwicklung Wochen.

Klickprototyp. Bevor programmiert wird, entsteht ein klickbarer Entwurf der wichtigsten Bildschirme. Sie klicken sich durch, als wäre die Anwendung fertig, und merken schnell, wo etwas fehlt oder anders gemeint war. Der Unterschied zwischen Skizze, Gestaltungsentwurf und Prototyp ist in Wireframe, Mockup, Prototyp beschrieben.

Wer die Anforderungen schriftlich festhalten möchte, findet in Lastenheft und Pflichtenheft für Software einen Aufbau. Für viele KMU-Projekte reicht ein schlankes Dokument mit Zielen, Rollen, Abläufen und Abnahmekriterien.

Phase 3: Entwicklung in kurzen Etappen

Die Entwicklung läuft am besten nicht als monatelanger Block, an dessen Ende eine grosse Überraschung steht, sondern in kurzen Etappen. Nach jeder Etappe gibt es einen Zwischenstand, den Sie in einer Testumgebung, der Staging-Umgebung, selbst ausprobieren können.

Die Reihenfolge folgt dem Nutzen: Zuerst der Kernablauf von Anfang bis Ende, auch wenn er noch schlicht aussieht. Danach Schritt für Schritt die Ergänzungen. So gibt es früh etwas Funktionierendes, und Sie können Prioritäten verschieben, wenn sich unterwegs zeigt, dass etwas wichtiger ist als gedacht.

Ihre Rolle in dieser Phase: regelmässig testen und entscheiden. Ein Projekt wird selten durch die Programmierung langsam, sondern durch offene Fragen, die eine Woche auf eine Antwort warten.

Wie sich Festpreis und Abrechnung nach Aufwand auf diese Phase auswirken, vergleicht Festpreis oder Aufwand?.

Phase 4: Test mit echten Nutzern

Bevor die Web-App live geht, arbeiten einige künftige Nutzer mit echten oder realistischen Daten damit. Nicht das Projektteam, das jeden Knopf kennt, sondern die Sachbearbeiterin, die den Ablauf täglich erledigt, und wenn möglich ein, zwei Kunden.

Getestet werden:

• Abläufe: Lässt sich jeder Kernablauf ohne Hilfe erledigen?
• Rechte: Sieht jede Rolle genau das, was sie sehen soll, und nichts mehr?
• Geräte: Funktioniert die Anwendung auf dem Handy so gut wie am Computer? Eine Anleitung dafür steht in Responsive Design prüfen.
• Fehlerfälle: Was passiert bei einer falschen Eingabe, einem abgebrochenen Upload, einer doppelten Buchung?

Die Rückmeldungen werden sortiert: Was muss vor dem Livegang behoben werden, was kommt in die nächste Version?

Phase 5: Livegang, Daten und Schulung

Der Livegang ist mehr als ein Knopfdruck. Dazu gehören:

• Datenübernahme: Bestehende Kunden, Aufträge oder Dokumente werden aus Excel oder dem alten System übernommen. Das braucht Bereinigung, denn alte Daten sind selten so sauber, wie man denkt.
• Zugänge: Benutzerkonten anlegen, Einladungen verschicken, sichere Anmeldung einrichten.
• Schulung: Eine kurze Einführung für das Team, oft reicht eine Stunde mit den wichtigsten Abläufen.
• Rückfallplan: Was tun, wenn am ersten Tag etwas klemmt? Wer ist erreichbar?

Ein ruhiger Zeitpunkt hilft. Eine Web-App für die Steuererklärung geht besser nicht mitten in der Abgabefrist live.

Phase 6: Betrieb und Weiterentwicklung

Mit dem Livegang beginnt der längste Teil: der Betrieb. Hosting, Backups, Sicherheitsupdates, Überwachung und kleine Anpassungen laufen, solange die Anwendung läuft. Was ein Wartungsvertrag dafür regeln sollte, beschreibt Service Level Agreement für Software und Web-Apps.

Fast jede Web-App wächst. Nach einigen Wochen im Alltag zeigt sich, welche Funktion fehlt und welche niemand nutzt. Diese Erfahrung ist wertvoller als jede Vermutung vor Projektstart, und genau deshalb lohnt es sich, die erste Version schlank zu halten.

Wovon Dauer und Kosten abhängen

Pauschale Angaben wie «eine Web-App dauert drei Monate» helfen niemandem, weil der Umfang zwischen zwei Projekten um ein Vielfaches schwanken kann. Die Treiber lassen sich aber benennen:

Zu den Preisen: Bei DLM Digital beginnt ein Prototyp oder MVP für eine neue Anwendung bei CHF 10'000. Was eigene Software über die Jahre insgesamt kostet, inklusive Betrieb, zeigt die Übersicht Software-Kosten Schweiz. Warum ein Prototyp oft der klügere erste Schritt ist als das fertige Produkt, rechnet Prototyp statt Produkt durch.

Beispielplanung: Auftragsportal für einen Gebäudetechniker

Konstruiertes Beispiel, kein Kundenfall. Die Angaben zur Dauer sind eine mögliche Planung, keine Zusage. Ein Betrieb mit zwölf Mitarbeitenden verwaltet Serviceaufträge heute in einer geteilten Excel-Datei. Monteure rufen im Büro an, um den nächsten Auftrag zu erfahren, Rapporte kommen auf Papier zurück.

Ziel der ersten Version: Das Büro erfasst Aufträge, Monteure sehen ihre Aufträge auf dem Handy, erfassen Rapport und Fotos vor Ort, das Büro sieht den Stand sofort. Nicht in der ersten Version: Rechnungsstellung, Lager, Kundenzugang.

• Klärung: zwei Workshops mit Büro und zwei Monteuren, Sichtung der Excel-Datei und von zehn echten Rapporten.
• Konzept: Rollen Büro und Monteur, Datenmodell Kunde, Objekt, Auftrag, Rapport, Foto. Klickprototyp der sechs wichtigsten Bildschirme, getestet mit den Monteuren.
• Entwicklung: zuerst der Weg «Auftrag erfassen, zuweisen, Rapport abschliessen», danach Fotos, Suche und Filter.
• Test: zwei Wochen Parallelbetrieb mit einem Monteur-Team.
• Livegang: Übernahme der offenen Aufträge, Einführung am Morgenrapport.
• Betrieb: Wartung, nach drei Monaten Entscheid über die Rechnungsanbindung.

Die Monteure nutzen die Anwendung als Progressive Web App vom Home-Bildschirm aus, ohne AppEine App, kurz für Applikation oder Anwendung, ist ein Programm, das eine bestimmte Aufgabe für seine Nutzenden erledigt. Im Alltag meint man damit meist eine…Mehr erfahren → Store. Dass ein Handwerksbetrieb mit eigener Betriebssoftware arbeiten kann, zeigt unsere Referenz Karo Kanaltechnik: Website, Web-App und eine iOS-App für iPhone und iPad, die gebaut ist und sich im Testing befindet.

Was Sie vor dem ersten Gespräch vorbereiten können

1. Heutige Abläufe aufschreiben, mit echten Beispielen, auch den unschönen.
2. Beteiligte benennen: Wer arbeitet künftig damit, wer entscheidet?
3. Vorhandene Daten sammeln: Excel-Listen, Formulare, Exporte aus bestehenden Programmen.
4. Prioritäten setzen: Was muss die erste Version können, was darf warten?
5. Zeit einplanen: Eine Ansprechperson sollte während des Projekts wöchentlich verfügbar sein.

Wenn Sie so vorbereitet ins Gespräch kommen, lässt sich der Umfang schnell und realistisch einschätzen. Wie wir Web-Apps für KMU planen und umsetzen, finden Sie unter Web-App entwickeln lassen. Für grössere Betriebssoftware über mehrere Bereiche gibt es Individualsoftware Schweiz, und für die schnelle Prüfung einer neuen Idee Prototyp und Validierung.

Fazit

Ein Web-App-Projekt ist kein Blindflug, wenn die Phasen klar sind. Die Klärung verhindert, dass das Falsche gebaut wird. Der Klickprototyp entdeckt Missverständnisse, solange sie billig sind. Kurze Etappen halten das Projekt steuerbar, der Test mit echten Nutzern sichert den Alltag ab, und der Betrieb sorgt dafür, dass die Anwendung auch in drei Jahren noch läuft. Dauer und Kosten bestimmt am Ende vor allem eine Entscheidung: wie schlank Sie die erste Version halten.