01
Kontext und Problem
Ateliya ist eine Verwaltungs-App für Schneidereien, bezahlt per Mobile Money. Die Website soll Lust machen, die App herunterzuladen und ein Abo abzuschließen.
Die alte Website funktionierte, aber ihr Design gefiel der Kundin nicht mehr. Die Aufgabe war ein neues Design mit denselben Seiten, Abläufen und APIs.
02
Meine Rolle
Ich habe die Neugestaltung allein durchgeführt, vom Design bis zum Launch, nach den Markenvorgaben der Kundin: Grün, Gold, Elfenbein und die Schrift Cormorant Garamond. Die Kundin hat jede Seite freigegeben, bevor ich zur nächsten überging.
- 01Design nach Markenvorgaben
- 02Entwicklung mit Astro
- 03Registrierungsformulare
- 04Barrierefreiheit
03
Vorgehen
Inspiriert haben mich Websites von Bezahl-Apps: vollfarbige Abschnitte, ein dynamischer Ton und leichte Animationen.
Ein Steppstich-Motiv trennt die Abschnitte und erinnert an das Handwerk. Ein echter Screenshot der App erscheint im Startfoto, und ein Mockup zeigt Kundschaft, Aufträge und Aktivität.
Screenshot 1 von 5
04
Technische Entscheidungen
Mein Ziel war eine schnelle Website mit zuverlässigen Formularen.
- Astro
- React
- Tailwind CSS
- TypeScript
01Bei Astro bleiben
Zuerst sollte ich die Website auf Next.js umstellen. Nach drei Tagen bin ich zu Astro zurückgekehrt: Für eine Präsentationswebsite lädt es weniger JavaScript, die Seiten erscheinen also schneller.
02React nur, wo es hilft
React wird nur auf der Preisseite und bei der Registrierung genutzt, den beiden Seiten mit einem mehrstufigen Formular.
03Klare Formulare
Prüfung von E-Mail, Telefon und Passwort, eine Zusammenfassung vor dem Absenden und verständliche Fehlermeldungen.
04Text, den alle lesen können
Nach einer Barrierefreiheitsprüfung habe ich eine Textfarbe mit zu wenig Kontrast dunkler gemacht.
05
Ergebnisse
Die neue Website ist online. Sie behält die Abläufe für Registrierung und Abo, mit einem Design, das den Markenvorgaben der Kundin treu bleibt.
- Seiten nutzen React
- 2
- mobile Zahlungsarten unterstützt
- 4
06
Was ich gelernt habe
Das Werkzeug nach dem Bedarf wählen: Nach drei Tagen mit Next.js zu Astro zurückzukehren, war für diese Website die richtige Entscheidung.
Details brauchen Zeit: Ich habe etwa zehn Versuche gebraucht, bis die App-Mockups auf allen Bildschirmen gut aussahen.
