Product-Design-Fallstudie
Website-Baukasten, Onlineshops
System zur Erstellung von Onlineshops · Hebräisch / Englisch · E-Commerce
Über das E-Commerce-Projekt
Projektdetails
Das ist nicht einfach ein Designprojekt für einen Onlineshop. Ich habe an einem System aus Komponenten, Vorlagen, responsiven Varianten und Elementen gearbeitet, mit dem sich Onlineshops bequem und schnell erstellen lassen. So konnte die Outsourcing-Firma viele Aufträge für Onlineshops annehmen und in sehr kurzer Zeit umsetzen.
Meine Rolle
User Experience Designer / Visual Designer
„Der Krieg in meinem Land hat viele Menschen stark getroffen. Ich musste in Cafés, Coworking-Spaces, Garagen und auf Parkplätzen arbeiten. Das hat mir geholfen, abzuschalten und viel tiefer in Projekte einzutauchen.“
Designprozess
Der Projektweg umfasste, das Geschäftsproblem unserer Kunden zu erkennen, seine Feinheiten zu verstehen, Probleme und Bedürfnisse der Nutzer zu definieren, das Design zu übertragen, Low-Fidelity-Vorlagen zu erstellen und Screens für responsives Design zu gestalten. Der Prozess war iterativ und half deshalb, mehr als eine Struktur für Onlineshops zu schaffen und eine bequeme Zusammenarbeit mit Kunden und dem Entwicklungsteam zu sichern.
Arbeit an der Idee
In täglichen Brainstormings führten wir wiederholt Interviews mit Kunden und analysierten die Ergebnisse. Personas und Empathy Maps halfen, sowohl die Kunden als auch die Nutzer der Onlineshops besser zu verstehen.
Die Designer im Team untersuchten Wettbewerber und übernahmen die besten Lösungen in unser Projekt. Die ersten Phasen waren voller Meetings mit Entwicklern und Managern, was später ebenfalls wertvolle Zeit sparte.
Recherche und Visualisierung
Es war ein langer und spannender Weg, Wireframes für verschiedene Blöcke des Onlineshop-Systems zu entwickeln. Danach wurden die Blöcke zu vollständigen Webseiten zusammengesetzt. Der letzte Schritt dieser Phase war die Gestaltung der Screens für responsives Design.
Produktlaunch
Frontend-Entwickler erstellten Code-Vorlagen für die schnelle Umsetzung bei verschiedenen Aufträgen. Der Manager nimmt den Auftrag vom Kunden an, der Designer erstellt ein kreatives visuelles Design, und die Entwickler binden das Design ein, indem sie den Vorlagen-Code anpassen.
Anpassung
Nach der ersten Version der Onlineshop-Vorlagen wurden die meisten Prozesse angepasst. Am Ende hatte unser Unternehmen 3 Arten von E-Commerce-Systemen. Das half, den Kundenstamm zu erweitern und einen sehr einfachen, aber kreativen Prozess zur Erstellung von Onlineshops zu etablieren.
In dieser Fallstudie zeige ich als Beispiel das visuelle Design eines der Onlineshops, die ich gestaltet habe. Außerdem zeige ich, wie die Seitenblöcke nach der Wettbewerbsanalyse entstanden, die Arbeit an verschiedenen Seitenlayouts und den Prozess des responsiven Designs.
Arbeit an der Idee
Persona Mark: Onlineshop
Interessen
Gründe, unser Produkt zu bestellen: Kontext / Problem
Recherche und Visualisierung
Schon während der Wettbewerbsanalyse, der täglichen Team-Meetings und der Analyse der Struktur von Onlineshops wurde an Bausteinen (Vorlagen) für künftige Screens gearbeitet.
Parallel entstanden auch die Screens für responsives Design, damit die Entwickler bequem arbeiten konnten. Das sparte in den nächsten Projektphasen viel Zeit.
Produktlaunch
Superschnelle Designschritte
Management
Hier findet die Abstimmung zwischen Kunde und Projektmanager statt. Ausarbeitung der technischen Aufgabe und Übergabe an die Designer.
Visuelles Design
In dieser Phase macht sich der Designer mit der technischen Aufgabe vertraut und gestaltet das visuelle Design der fertigen Vorlagen. Je nach Kundenwunsch entsteht ein superkreatives oder ein strenges, zurückhaltendes Design
Launch
Die Entwickler erhalten das Design und binden es in fertige Code-Vorlagen ein. Danach werden Design und Frontend-Ergebnis abgeglichen. Und schließlich: Launch des Shops und ein zufriedener Kunde.
eco-techno store
Farben
Wenn ein Kunde zu uns kam, hatte sein Produkt meist schon ein bestimmtes Branding. Hatte das Unternehmen keine Corporate Identity, führten wir eine kurze Umfrage durch und berücksichtigten seine Wünsche bei der Farbwahl.
Typografie
Die meisten Kunden kamen aus Israel, deshalb nutzten wir Schriften mit Hebräisch-Unterstützung. War die Website auf Englisch, wählten wir eine Schrift, die zur Identität und zum Branding des Kunden passt.
Visuelles Design: Desktop
Visuelles Design: Mobile
Launch
In dieser Fallstudie zeige ich als Beispiel das visuelle Design eines der Onlineshops, die ich gestaltet habe. Außerdem zeige ich, wie die Seitenblöcke nach der Wettbewerbsanalyse entstanden, die Arbeit an verschiedenen Seitenlayouts und den Prozess des responsiven Designs.
Fazit
Dieses E-Commerce-Projekt geht über das bloße Design eines Onlineshops hinaus: Es ist ein umfassendes System aus Komponenten, Vorlagen, responsiven Varianten und Elementen. Der Ansatz ermöglichte es der Outsourcing-Firma, viele Onlineshop-Aufträge in bemerkenswert kurzer Zeit effizient umzusetzen. Meine Doppelrolle als User Experience Designer und Visual Designer spielte dabei eine zentrale Rolle.
Link zur Website des Unternehmens, in dem ich dieses Projekt umsetzen konnte: navoto.com.
Danke!
Danke fürs Ansehen! Und ich danke den Streitkräften der Ukraine, dass ich arbeiten kann!
