(2023)
(2023)
nkm Onlineshop
nkm Onlineshop
Redesign
Redesign
Über Das Projekt
Im Rahmen dieses Projekts habe ich ein Redesign für den Onlineshop der Firma nkm (Naturkosmetik München), einem Unternehmen für nachhaltige Wirkstoffkosmetik, entworfen. Auf Basis meiner Marken- und Shop-UX-Analyse ist eine überarbeitete Version der Website entstanden, die ein positives Einkaufserlebnis bietet und die Marke in einem modernen, angepassten Look repräsentiert.
Art des Projekts
Studienprojekt
Beteiligte
Ich (Einzelprojekt)
Bereiche
UI/UX Design
E-Commerce
Zeitraum
4 Monate
Problemdefinition
Die Struktur und das User Interface des Shops waren insgesamt solide aufgebaut und gestaltet. Allerdings wirkten einige Elemente nicht harmonisch im Gesamtbild und das UI-Design nutzte das Potenzial, die Marke individuell zu repräsentieren, noch nicht optimal aus.
Auch in den Bereichen Navigation, Funktionsumfang und Nutzerfreundlichkeit bestand Verbesserungspotenzial. So fehlten beispielsweise die Möglichkeit, Produkte direkt miteinander zu vergleichen, und die Option, sich eine individuelle Routine zusammenzustellen.
Problemdefinition
Die Struktur und das User Interface des Shops waren insgesamt solide aufgebaut und gestaltet. Allerdings wirkten einige Elemente nicht harmonisch im Gesamtbild und das UI-Design nutzte das Potenzial, die Marke individuell zu repräsentieren, noch nicht optimal aus.
Auch in den Bereichen Navigation, Funktionsumfang und Nutzerfreundlichkeit bestand Verbesserungspotenzial. So fehlten beispielsweise die Möglichkeit, Produkte direkt miteinander zu vergleichen, und die Option, sich eine individuelle Routine zusammenzustellen.
Problemdefinition
Die Struktur und das User Interface des Shops waren insgesamt solide aufgebaut und gestaltet. Allerdings wirkten einige Elemente nicht harmonisch im Gesamtbild und das UI-Design nutzte das Potenzial, die Marke individuell zu repräsentieren, noch nicht optimal aus.
Auch in den Bereichen Navigation, Funktionsumfang und Nutzerfreundlichkeit bestand Verbesserungspotenzial. So fehlten beispielsweise die Möglichkeit, Produkte direkt miteinander zu vergleichen, und die Option, sich eine individuelle Routine zusammenzustellen.
Problemdefinition
Die Struktur und das User Interface des Shops waren insgesamt solide aufgebaut und gestaltet. Allerdings wirkten einige Elemente nicht harmonisch im Gesamtbild und das UI-Design nutzte das Potenzial, die Marke individuell zu repräsentieren, noch nicht optimal aus.
Auch in den Bereichen Navigation, Funktionsumfang und Nutzerfreundlichkeit bestand Verbesserungspotenzial. So fehlten beispielsweise die Möglichkeit, Produkte direkt miteinander zu vergleichen, und die Option, sich eine individuelle Routine zusammenzustellen.
Zielsetzung
Mein Projektziel war es, meine Fähigkeiten im UI-Design weiter auszubauen, mich intensiver mit Design-Systemen auseinanderzusetzen und neue Ansätze zu testen, um die Persönlichkeit einer Marke in das visuelle Design einer Website zu übertragen. Darüber hinaus wollte ich mein im Praxissemester in einer E-Commerce-Agentur erworbenes Wissen zu E-Commerce-UX und Shop-Design festigen und erweitern.
Zielsetzung
Mein Projektziel war es, meine Fähigkeiten im UI-Design weiter auszubauen, mich intensiver mit Design-Systemen auseinanderzusetzen und neue Ansätze zu testen, um die Persönlichkeit einer Marke in das visuelle Design einer Website zu übertragen. Darüber hinaus wollte ich mein im Praxissemester in einer E-Commerce-Agentur erworbenes Wissen zu E-Commerce-UX und Shop-Design festigen und erweitern.
Zielsetzung
Mein Projektziel war es, meine Fähigkeiten im UI-Design weiter auszubauen, mich intensiver mit Design-Systemen auseinanderzusetzen und neue Ansätze zu testen, um die Persönlichkeit einer Marke in das visuelle Design einer Website zu übertragen. Darüber hinaus wollte ich mein im Praxissemester in einer E-Commerce-Agentur erworbenes Wissen zu E-Commerce-UX und Shop-Design festigen und erweitern.
Zielsetzung
Mein Projektziel war es, meine Fähigkeiten im UI-Design weiter auszubauen, mich intensiver mit Design-Systemen auseinanderzusetzen und neue Ansätze zu testen, um die Persönlichkeit einer Marke in das visuelle Design einer Website zu übertragen. Darüber hinaus wollte ich mein im Praxissemester in einer E-Commerce-Agentur erworbenes Wissen zu E-Commerce-UX und Shop-Design festigen und erweitern.
Recherche
Unternehmen und Marke verstehen
Zu Beginn meiner Recherche habe ich mich mit der Geschichte des Unternehmens beschäftigt und den aktuellen Markenauftritt untersucht, um die Vision, die Werte und das Konzept von nkm möglichst umfassend zu verstehen.
Unternehmen und Marke verstehen
Zu Beginn meiner Recherche habe ich mich mit der Geschichte des Unternehmens beschäftigt und den aktuellen Markenauftritt untersucht, um die Vision, die Werte und das Konzept von nkm möglichst umfassend zu verstehen.
Unternehmen und Marke verstehen
Zu Beginn meiner Recherche habe ich mich mit der Geschichte des Unternehmens beschäftigt und den aktuellen Markenauftritt untersucht, um die Vision, die Werte und das Konzept von nkm möglichst umfassend zu verstehen.
Unternehmen und Marke verstehen
Zu Beginn meiner Recherche habe ich mich mit der Geschichte des Unternehmens beschäftigt und den aktuellen Markenauftritt untersucht, um die Vision, die Werte und das Konzept von nkm möglichst umfassend zu verstehen.
Die Vision von nkm: eine Revolution in der Kosmetikbranche hin zu einer nachhaltigen, umweltfreundlichen und effektiven Hautpflege aus heimischen Pflanzenarten.
Die Vision von nkm: eine Revolution in der Kosmetikbranche hin zu einer nachhaltigen, umweltfreundlichen und effektiven Hautpflege aus heimischen Pflanzenarten.
Die Vision von nkm: eine Revolution in der Kosmetikbranche hin zu einer nachhaltigen, umweltfreundlichen und effektiven Hautpflege aus heimischen Pflanzenarten.
Die Vision von nkm: eine Revolution in der Kosmetikbranche hin zu einer nachhaltigen, umweltfreundlichen und effektiven Hautpflege aus heimischen Pflanzenarten.
Bei der Neugestaltung des Onlineshops habe ich darauf geachtet, die Werte von nkm zu integrieren. So werden beispielsweise die Natürlichkeit und Nachhaltigkeit der Produkte durch eine entsprechende Bildwelt und farbliche Gestaltung hervorgehoben. Gleichzeitig wird der innovative, junge Charakter von nkm durch das moderne Design unterstrichen.
Bei der Neugestaltung des Onlineshops habe ich darauf geachtet, die Werte von nkm zu integrieren. So werden beispielsweise die Natürlichkeit und Nachhaltigkeit der Produkte durch eine entsprechende Bildwelt und farbliche Gestaltung hervorgehoben. Gleichzeitig wird der innovative, junge Charakter von nkm durch das moderne Design unterstrichen.
Bei der Neugestaltung des Onlineshops habe ich darauf geachtet, die Werte von nkm zu integrieren. So werden beispielsweise die Natürlichkeit und Nachhaltigkeit der Produkte durch eine entsprechende Bildwelt und farbliche Gestaltung hervorgehoben. Gleichzeitig wird der innovative, junge Charakter von nkm durch das moderne Design unterstrichen.
Bei der Neugestaltung des Onlineshops habe ich darauf geachtet, die Werte von nkm zu integrieren. So werden beispielsweise die Natürlichkeit und Nachhaltigkeit der Produkte durch eine entsprechende Bildwelt und farbliche Gestaltung hervorgehoben. Gleichzeitig wird der innovative, junge Charakter von nkm durch das moderne Design unterstrichen.
Zielgruppe
70%
25-54 Jahre
30%
25-54 Jahre
Eigenschaften
Haben erhöhtes Bewusstsein für Umweltschutz & Nachhaltigkeit
Achten vermehrt auf eine gesunde Lebensweise
Sind bereit, für gute Qualität mehr zu zahlen
Identifizieren sich mit Werten und Philosophie von nkm
Erwartungen an Kosmetikprodukte
Frei von bedenklichen Inhaltsstoffen & Tierversuchen
Qualitativ hochwertig
Hautverträglich und wirksam in der Anwendung
Möglichst nachhaltig produziert und verpackt
Konzept
Ziele für das Redesign des Onlineshops
Auf Basis der Bedürfnisse der Zielgruppe, die ich mithilfe von Personas und Customer-Journey-Maps genauer untersucht habe, sowie einer Konkurrenzanalyse ähnlicher Marken habe ich die wichtigsten Ziele für das Redesign des Shops definiert.
Ziele für das Redesign des Onlineshops
Auf Basis der Bedürfnisse der Zielgruppe, die ich mithilfe von Personas und Customer-Journey-Maps genauer untersucht habe, sowie einer Konkurrenzanalyse ähnlicher Marken habe ich die wichtigsten Ziele für das Redesign des Shops definiert.
Ziele für das Redesign des Onlineshops
Auf Basis der Bedürfnisse der Zielgruppe, die ich mithilfe von Personas und Customer-Journey-Maps genauer untersucht habe, sowie einer Konkurrenzanalyse ähnlicher Marken habe ich die wichtigsten Ziele für das Redesign des Shops definiert.
Ziele für das Redesign des Onlineshops
Auf Basis der Bedürfnisse der Zielgruppe, die ich mithilfe von Personas und Customer-Journey-Maps genauer untersucht habe, sowie einer Konkurrenzanalyse ähnlicher Marken habe ich die wichtigsten Ziele für das Redesign des Shops definiert.
Shop-Analyse und Überarbeitung der Navigation
In einer UX-Analyse des bestehenden Onlineshops habe ich alle relevanten Seiten genau untersucht, um sowohl die Stärken als auch mögliche Usability-Probleme zu identifizieren. Ein Nutzertest mit der Live-Seite lieferte mir wertvolle Erkenntnisse über die aktuelle Benutzerfreundlichkeit, die Navigation sowie die Verständlichkeit der Inhalte und Interaktionselemente.
Auf dieser Grundlage habe ich die Informationsarchitektur überarbeitet und ein klar strukturiertes Navigationsmenü entworfen. Dieses erleichtert die Orientierung im Shop und macht es beispielsweise möglich, Produkte gezielt nach Hautproblemen zu finden.
Shop-Analyse und Überarbeitung der Navigation
In einer UX-Analyse des bestehenden Onlineshops habe ich alle relevanten Seiten genau untersucht, um sowohl die Stärken als auch mögliche Usability-Probleme zu identifizieren. Ein Nutzertest mit der Live-Seite lieferte mir wertvolle Erkenntnisse über die aktuelle Benutzerfreundlichkeit, die Navigation sowie die Verständlichkeit der Inhalte und Interaktionselemente.
Auf dieser Grundlage habe ich die Informationsarchitektur überarbeitet und ein klar strukturiertes Navigationsmenü entworfen. Dieses erleichtert die Orientierung im Shop und macht es beispielsweise möglich, Produkte gezielt nach Hautproblemen zu finden.
Shop-Analyse und Überarbeitung der Navigation
In einer UX-Analyse des bestehenden Onlineshops habe ich alle relevanten Seiten genau untersucht, um sowohl die Stärken als auch mögliche Usability-Probleme zu identifizieren. Ein Nutzertest mit der Live-Seite lieferte mir wertvolle Erkenntnisse über die aktuelle Benutzerfreundlichkeit, die Navigation sowie die Verständlichkeit der Inhalte und Interaktionselemente.
Auf dieser Grundlage habe ich die Informationsarchitektur überarbeitet und ein klar strukturiertes Navigationsmenü entworfen. Dieses erleichtert die Orientierung im Shop und macht es beispielsweise möglich, Produkte gezielt nach Hautproblemen zu finden.
Shop-Analyse und Überarbeitung der Navigation
In einer UX-Analyse des bestehenden Onlineshops habe ich alle relevanten Seiten genau untersucht, um sowohl die Stärken als auch mögliche Usability-Probleme zu identifizieren. Ein Nutzertest mit der Live-Seite lieferte mir wertvolle Erkenntnisse über die aktuelle Benutzerfreundlichkeit, die Navigation sowie die Verständlichkeit der Inhalte und Interaktionselemente.
Auf dieser Grundlage habe ich die Informationsarchitektur überarbeitet und ein klar strukturiertes Navigationsmenü entworfen. Dieses erleichtert die Orientierung im Shop und macht es beispielsweise möglich, Produkte gezielt nach Hautproblemen zu finden.
Skizzen
Wireframes
Wireframes
Wireframes
Wireframes
Design
Um den Markenkern von nkm in ein authentisches Design zu übersetzen, habe ich zentrale Begriffe aus meiner Markenanalyse herausgearbeitet und gezielt in das Design integriert, sodass der Charakter der Marke visuell spürbar wird.
Um den Markenkern von nkm in ein authentisches Design zu übersetzen, habe ich zentrale Begriffe aus meiner Markenanalyse herausgearbeitet und gezielt in das Design integriert, sodass der Charakter der Marke visuell spürbar wird.
Um den Markenkern von nkm in ein authentisches Design zu übersetzen, habe ich zentrale Begriffe aus meiner Markenanalyse herausgearbeitet und gezielt in das Design integriert, sodass der Charakter der Marke visuell spürbar wird.
Um den Markenkern von nkm in ein authentisches Design zu übersetzen, habe ich zentrale Begriffe aus meiner Markenanalyse herausgearbeitet und gezielt in das Design integriert, sodass der Charakter der Marke visuell spürbar wird.
Moodboard
Visuelle Umsetzung des Markenkerns
Inspiriert von den Rohstoffen und Produkten von nkm ist eine Farbpalette entstanden, die die Nähe der Marke zur Natur betont.
Die Serifenschrift Tobias wirkt elegant und gleichzeitig modern. Die Tropfenform, beispielsweise am kleinen a, f oder r, erinnert an den Tropfen im nkm-Logo und stellt so einen direkten Bezug zur Marke her.
Visuelle Umsetzung des Markenkerns
Inspiriert von den Rohstoffen und Produkten von nkm ist eine Farbpalette entstanden, die die Nähe der Marke zur Natur betont.
Die Serifenschrift Tobias wirkt elegant und gleichzeitig modern. Die Tropfenform, beispielsweise am kleinen a, f oder r, erinnert an den Tropfen im nkm-Logo und stellt so einen direkten Bezug zur Marke her.
Visuelle Umsetzung des Markenkerns
Inspiriert von den Rohstoffen und Produkten von nkm ist eine Farbpalette entstanden, die die Nähe der Marke zur Natur betont.
Die Serifenschrift Tobias wirkt elegant und gleichzeitig modern. Die Tropfenform, beispielsweise am kleinen a, f oder r, erinnert an den Tropfen im nkm-Logo und stellt so einen direkten Bezug zur Marke her.
Visuelle Umsetzung des Markenkerns
Inspiriert von den Rohstoffen und Produkten von nkm ist eine Farbpalette entstanden, die die Nähe der Marke zur Natur betont.
Die Serifenschrift Tobias wirkt elegant und gleichzeitig modern. Die Tropfenform, beispielsweise am kleinen a, f oder r, erinnert an den Tropfen im nkm-Logo und stellt so einen direkten Bezug zur Marke her.
Finales Design des Prototyps
Testing
Zu Beginn des Projekts habe ich einen Nutzertest mit der Live-Seite durchgeführt, um erste Erkenntnisse zur Usability zu gewinnen. Später habe ich zwei Thinking-Aloud-Tests mit meinem Prototyp durchgeführt.
Mithilfe der Tests konnte ich besser verstehen, welche Produktdetails für die Kaufentscheidung relevant sind. Außerdem hat sich gezeigt, ob die gesuchten Informationen leicht auffindbar und verständlich sind. Idealerweise würde ich die Seite mit weiteren Personen testen, um eine größere Bandbreite an Antworten zu erhalten und die häufigsten Usability-Probleme zu ermitteln.
Zu Beginn des Projekts habe ich einen Nutzertest mit der Live-Seite durchgeführt, um erste Erkenntnisse zur Usability zu gewinnen. Später habe ich zwei Thinking-Aloud-Tests mit meinem Prototyp durchgeführt.
Mithilfe der Tests konnte ich besser verstehen, welche Produktdetails für die Kaufentscheidung relevant sind. Außerdem hat sich gezeigt, ob die gesuchten Informationen leicht auffindbar und verständlich sind. Idealerweise würde ich die Seite mit weiteren Personen testen, um eine größere Bandbreite an Antworten zu erhalten und die häufigsten Usability-Probleme zu ermitteln.
Zu Beginn des Projekts habe ich einen Nutzertest mit der Live-Seite durchgeführt, um erste Erkenntnisse zur Usability zu gewinnen. Später habe ich zwei Thinking-Aloud-Tests mit meinem Prototyp durchgeführt.
Mithilfe der Tests konnte ich besser verstehen, welche Produktdetails für die Kaufentscheidung relevant sind. Außerdem hat sich gezeigt, ob die gesuchten Informationen leicht auffindbar und verständlich sind. Idealerweise würde ich die Seite mit weiteren Personen testen, um eine größere Bandbreite an Antworten zu erhalten und die häufigsten Usability-Probleme zu ermitteln.
Zu Beginn des Projekts habe ich einen Nutzertest mit der Live-Seite durchgeführt, um erste Erkenntnisse zur Usability zu gewinnen. Später habe ich zwei Thinking-Aloud-Tests mit meinem Prototyp durchgeführt.
Mithilfe der Tests konnte ich besser verstehen, welche Produktdetails für die Kaufentscheidung relevant sind. Außerdem hat sich gezeigt, ob die gesuchten Informationen leicht auffindbar und verständlich sind. Idealerweise würde ich die Seite mit weiteren Personen testen, um eine größere Bandbreite an Antworten zu erhalten und die häufigsten Usability-Probleme zu ermitteln.
Learnings
In diesem Projekt habe ich neue Herangehensweisen für die Entwicklung eines markenbasierten UI-Designs ausprobiert und in meinen Prozess integriert. Dabei konnte ich meine UI-Design-Skills insbesondere in den Bereichen Typografie, Farbwahl und -wirkung sowie Layout und visuelle Hierarchie gezielt weiterentwickeln.
In diesem Projekt habe ich neue Herangehensweisen für die Entwicklung eines markenbasierten UI-Designs ausprobiert und in meinen Prozess integriert. Dabei konnte ich meine UI-Design-Skills insbesondere in den Bereichen Typografie, Farbwahl und -wirkung sowie Layout und visuelle Hierarchie gezielt weiterentwickeln.
In diesem Projekt habe ich neue Herangehensweisen für die Entwicklung eines markenbasierten UI-Designs ausprobiert und in meinen Prozess integriert. Dabei konnte ich meine UI-Design-Skills insbesondere in den Bereichen Typografie, Farbwahl und -wirkung sowie Layout und visuelle Hierarchie gezielt weiterentwickeln.
In diesem Projekt habe ich neue Herangehensweisen für die Entwicklung eines markenbasierten UI-Designs ausprobiert und in meinen Prozess integriert. Dabei konnte ich meine UI-Design-Skills insbesondere in den Bereichen Typografie, Farbwahl und -wirkung sowie Layout und visuelle Hierarchie gezielt weiterentwickeln.
Zur Optimierung meines Workflows in Figma habe ich mich tiefer mit Designsystemen auseinandergesetzt. Dieses Wissen habe ich genutzt, um eine wiederverwendbare Komponentenbibliothek für mein Projekt aufzubauen.
Zur Optimierung meines Workflows in Figma habe ich mich tiefer mit Designsystemen auseinandergesetzt. Dieses Wissen habe ich genutzt, um eine wiederverwendbare Komponentenbibliothek für mein Projekt aufzubauen.
Zur Optimierung meines Workflows in Figma habe ich mich tiefer mit Designsystemen auseinandergesetzt. Dieses Wissen habe ich genutzt, um eine wiederverwendbare Komponentenbibliothek für mein Projekt aufzubauen.
Zur Optimierung meines Workflows in Figma habe ich mich tiefer mit Designsystemen auseinandergesetzt. Dieses Wissen habe ich genutzt, um eine wiederverwendbare Komponentenbibliothek für mein Projekt aufzubauen.
Zudem habe ich mein Wissen über Shopper Types, Einkaufsphasen und Kaufentscheidungsprozesse vertieft und dabei Best Practices für Produktdetailseiten, Vergleichstabellen und Checkout-Prozesse kennengelernt.
Zudem habe ich mein Wissen über Shopper Types, Einkaufsphasen und Kaufentscheidungsprozesse vertieft und dabei Best Practices für Produktdetailseiten, Vergleichstabellen und Checkout-Prozesse kennengelernt.
Zudem habe ich mein Wissen über Shopper Types, Einkaufsphasen und Kaufentscheidungsprozesse vertieft und dabei Best Practices für Produktdetailseiten, Vergleichstabellen und Checkout-Prozesse kennengelernt.
Zudem habe ich mein Wissen über Shopper Types, Einkaufsphasen und Kaufentscheidungsprozesse vertieft und dabei Best Practices für Produktdetailseiten, Vergleichstabellen und Checkout-Prozesse kennengelernt.
Weitere Projekte
Weitere Projekte
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
ownyourcycle
(2024)
UI/UX Design
Branding
Social Media
Film
Coding:
Animated Type
(2024)
Creative Coding
Grafikdesign
Coding:
Animated Type
(2024)
Creative Coding
Grafikdesign
Coding:
Animated Type
(2024)
Creative Coding
Grafikdesign
Coding:
Animated Type
(2024)
Creative Coding
Grafikdesign