Purrint®
Brand Design & Online Shop Design & Development für Katzenmarke
Purrint® ist ein eCommerce-Projekt für personalisierte Bekleidung und Lifestyle-Produkte für Katzenliebhaber, für das ich eigenständig das Corporate Design, UX, Produktfotos und die Produktillustrationen entwickelt habe.
In dieser Marktnische soll eine hochwertige Lösung gefunden werden, die Katzenliebhaber rundum begeistert, indem sie ihr eigenes Tier mit einer Konfigurationsfunktion perfekt nachbilden können.
Der Shop kann unter diesem Link live angesehen werden: zum Shop.
Vorgaben & Features
- Entwicklung eines hochwertigen, einzigartigem Corporate Designs auf Basis von Marktforschung
- Entwicklung des Online-Shops mit Hilfe von Best Practice UX- und Designmethoden
Umsetzung
- Entwicklung des Marketingkonzepts
- Entwicklung des Corporate Designs
- Usability-Testing
- Coding vom Shop mit HTML, CSS, Vue & Twig
- Leitung der Entwicklung von Middleware zur Kommunikation des Shops mit externen Services
Inhaltsverzeichnis
Planung des Shops
Da von Anfang an klar war, dass der Shop der wichtigste Part des Brandings sein wird, habe ich mit der Entwicklung des Online Shop-Designs gestartet.
Für jedes Seitenlayout wurde ein grobes Wireframe in Figma entwickelt. Diese ordnete ich den Schritten in einem ersten User Flow zu. Auf Basis des User Flows entwickelte ich dann die Shop-Sitemap in FigJam.
Die Wireframes fungierten anschließend als Basis für die weitere Entwicklung des Shop-Designs.
Mit den Wireframes als Basis entwarf ich Testbilder mit verschiedenen Farben. Probanden bewerteten jedes Testbild danach, wie stark sie das jeweilige Bild mit den Markenwerten von Purrint® (persönlich, ehrlich, anspruchsvoll und tierlieb) assoziieren. Mit diesem Test konnten früh im Prozess Farben gefunden werden, die der Marke entsprechen und daraus die Primärfarben für das Corporate Design ableiten.
High Fidelity-Wireframes
Sobald die grundlegende Ästhetik der Marke feststand, konnten damit High Fidelity-Wireframes für Desktop & Mobil erstellt und Lösungen für die Feinheiten erarbeitet werden. In diesem Zug legte ich die Formen und Elemente des Corporate Designs fest.
Den Schwerpunkt der Usability Tests liegt auf dem Konfigurator im Shop, da dies ein kritischer Punkt in der Customer Journey ist. Trotzdem testete ich auch immer wieder, wie gut Benutzer durch den Shop navigieren können, um Frustmomente zu identifizieren und zu vermeiden.
Beispielhaft sind hier die Startseite und die Produktseite als High Fidelity-Wireframes abgebildet.
Template
Nach der Fertigstellung der High Fidelity-Wireframes sowie des Brand Designs, wurde der Shop erst in HTML und anschließend in der Templating-Sprache Twig für Craft Commerce umgesetzt.
Für die Performance sind verschiedene Techniken (u.a. Template-Caching und Lazy Loading) eingesetzt. In Zusammenarbeit mit einem Full-Stack-Developer folgten weitere Verbesserungen. Damit wird ein Google Lighthouse-Score erreicht, der 60% besser ist als der der Konkurrenz und die Seite lädt damit durchschnittlich 20-50% schneller als konkurrierende Shops.
Newsletter & E-Mail
Zusätzlich zum Shop-Template wurden auch Newsletter- sowie E-Mail-Layouts (Versandbestätigung, Bewertungsemail etc.) angelegt. Der Newsletter kann durch einen einfachen Editor problemlos von Anwendern ohne Programmier- oder Designkenntnisse angewandt werden. Die Newsletter-Erstellung kann so von z.B. einem Marketing-Texter alleine erfolgen, was weniger Arbeitskräfte bindet.
Beim Design wurde darauf geachtet, dass dies gut umsetzbar in E-Mail-HTML ist und nach dem Prinzip „Graceful Degradation“ gearbeitet. Auch in älteren E-Mail-Clienten mit schlechter HTML-Unterstützung sieht die E-Mail immer annehmbar aus.
Produktbilder
Um ein Design zu entwickeln, das durchgehend als hochwertig wahrgenommen wird, muss auch ein Foto-Stil festgelegt werden. Als Online Shop sorgen Qualität und ein konsequent durchgehender Stil der Fotos für eine einheitliche Markenwahrnehmung.
Illustrationen
Auch die Illustrationen sind im Corporate Design festgelegt. Infografiken und schmückende Maskottchen-Illustrationen lockern Bleiwüsten auf und informieren den Besucher. Damit diese Illustrationen schnell und effizient erstellt werden können, habe ich einen schlichten Stil entwickelt, der sich aus den Markenfarben zusammensetzt.
