01
Kontext und Problem
Moomen Pro ist eine Kassen- und Verwaltungs-App für kleine Unternehmen: Verkäufe, Lager, Kundschaft und Belege.
Die alte Website wirkte veraltet und weckte wenig Lust, sich anzumelden. Der Kunde wollte eine moderne Website, die die App vorstellt, die Angebote zeigt und Verbrauchsmaterial wie Drucker und Papierrollen verkauft.
02
Meine Rolle
Ich habe die Seiten der Website gestaltet und entwickelt und sie dann an zwei bestehende APIs angebunden: Preise und Shop. Außerdem habe ich das Präsentationsvideo per Vibe Motion Design erstellt.
- 01Seitendesign
- 02API-Anbindung
- 03Bestellung über WhatsApp
- 04Präsentationsvideo
03
Vorgehen
Die Besucherinnen und Besucher sind meist mobil unterwegs, oft mit langsamer Verbindung. Deshalb habe ich eine leichte Website mit statischen Seiten gebaut, die schnell laden.
Im Shop öffnet jedes Produkt mit einem Button WhatsApp, das Produkt ist schon angegeben: So bestellt die Kundschaft gewohnt. Die Preise erscheinen in der Landeswährung.
Screenshot 1 von 4
04
Technische Entscheidungen
Meine Entscheidungen kamen vor allem aus konkreten Problemen.
- Astro
- Tailwind CSS
- TypeScript
- REST-API
01Ein Layout, das nur online kaputt war
Auf meinem Rechner sah die Website richtig aus, nach der Veröffentlichung aber nicht: Die Desktop-Version sah aus wie die mobile. Ich habe herausgefunden, dass das Werkzeug zur CSS-Komprimierung einen Teil der Styles entfernte, und es deaktiviert.
02Den ganzen Katalog anzeigen
Die API lieferte die Produkte seitenweise, die Website zeigte aber nur die erste Seite. Ich habe eine Paginierung ergänzt.
03Der richtige Preis in der richtigen Währung
Ich habe zwei API-Antworten kombiniert, um jedes Angebot in der Landeswährung anzuzeigen.
04Grundlagen von SEO und Barrierefreiheit
Titel und Beschreibung pro Seite, eine Sitemap, ein Link direkt zum Inhalt und Unterstützung der Einstellung für reduzierte Bewegung.
05
Ergebnisse
Die neue Website ist online. Sie stellt die App vor, zeigt die Angebote in der Währung jedes Landes und ermöglicht die Bestellung von Verbrauchsmaterial über WhatsApp.
- Seiten mit einheitlichem Design
- 15
- APIs angebunden, Preise und Shop
- 2
06
Was ich gelernt habe
Immer die veröffentlichte Version testen, nicht nur die Entwicklungsversion: Der Layoutfehler existierte erst online.
Beim nächsten Mal verfolge ich Anmeldungen und Klicks zu WhatsApp, um zu prüfen, ob die Designentscheidungen funktionieren.
