Style Definery
Styledefinery ist ein kuratierter Second-Hand-Fashion-Store, der mit stark variierenden Einzelstücken, Konsignationsware und mehreren Verkaufskanälen arbeitet. Das Projekt umfasste die UX-Konzeption, das UI Design sowie die technische Umsetzung eines E-Commerce-Systems, das gestalterischen Anspruch mit klarer Struktur, wartbarer Datenlogik und echter Omnichannel-Fähigkeit verbindet. Ziel war der Aufbau eines stabilen Systems, das der Besonderheit von Einzelprodukten gerecht wird und langfristig tragfähig bleibt.
Rahmenbedingungen & Zielbild
Ausgangslage
Styledefinery arbeitet mit kuratierten Second-Hand-Einzelstücken, deren Produktdaten stark variieren und sich nicht über klassische Shop- und Variantenlogiken abbilden lassen. Die vorhandenen Strukturen waren funktional, jedoch nicht auf Wachstum ausgelegt. Produktinformationen, Pflegeprozesse und Verkaufskanäle griffen nicht sauber ineinander, was zu hohem manuellem Aufwand, inkonsistenter Darstellung und begrenzter Erweiterbarkeit führte.
Zielsetzung
Ziel war der Aufbau eines klar strukturierten Systems, das stark variierende Einzelprodukte nachvollziehbar darstellt und gleichzeitig redaktionell einfach pflegbar bleibt. Zusätzlich sollte eine saubere Verwaltung der Produkte inklusive Consigner-Zuordnung und Auszahlungslogiken möglich sein. Der Shop sollte visuell ruhig und hochwertig funktionieren, Omnichannel-fähig sein und auf einer skalierbaren technischen Architektur basieren.
Meine Rolle & Verantwortlichkeiten
Ich habe das Projekt ganzheitlich verantwortet und sowohl konzeptionelle als auch technische Entscheidungen selbst getroffen. Dazu gehörten die Entwicklung der Informations- und Datenstruktur, alle UX-Entscheidungen, das vollständige UI Design sowie die Umsetzung im Shopify-Ökosystem. Darüber hinaus habe ich die Metafelder-Logik definiert, CSV-Workflows für die Produktpflege aufgebaut, die Shopify-POS-Anbindung umgesetzt und externe Verkaufskanäle wie eBay integriert. Design und Development liefen dabei als zusammenhängender Prozess.
UX / UI – Konzept & Entscheidungen
Second-Hand-E-Commerce erfordert eine andere UX-Logik als klassische Shops. Nutzer:innen vergleichen keine identischen Produkte, sondern Informationen wie Zustand, Größe, Material und Besonderheiten. Deshalb habe ich früh entschieden, Produktdaten strikt von Layout-Entscheidungen zu trennen, wiederkehrende Inhalte systematisch zu bündeln und bewusst auf Sonderfälle zu verzichten. Navigation, Kategorisierung und Inhaltspriorisierung wurden entlang realer Nutzungs- und Pflegeprozesse aufgebaut, mit dem Fokus auf Nachvollziehbarkeit, Wiederverwendbarkeit und Klarheit.
<div data-tn style="display:none">Wettbewerbsanalyse</div><style>
.sd-ux-container {
max-width: 100%;
padding: 2rem 1.5rem;
background-color: #FFFFFF;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1F2937;
}
.sd-ux-title {
font-size: 1.375rem;
font-weight: 600;
margin-bottom: 2rem;
line-height: 1.4;
}
.sd-ux-principles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.sd-ux-principle-card {
padding: 1.5rem;
background-color: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sd-ux-principle-card:hover {
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.sd-ux-icon {
font-size: 1.75rem;
margin-bottom: 0.25rem;
}
.sd-ux-principle-label {
font-weight: 600;
font-size: 0.95rem;
color: #374151;
}
.sd-ux-principle-text {
font-size: 0.875rem;
color: #6B7280;
line-height: 1.5;
}
.sd-ux-insight-box {
padding: 1.5rem;
background: linear-gradient(135deg, #F3F4F6 0%, #F9FAFB 100%);
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
border-left: 4px solid #8B5CF6;
}
.sd-ux-insight-label {
font-size: 0.875rem;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.sd-ux-insight-text {
font-size: 1rem;
color: #374151;
line-height: 1.6;
font-weight: 500;
}
@media (max-width: 640px) {
.sd-ux-container {
padding: 1.5rem 1rem;
}
.sd-ux-title {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.sd-ux-principles {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.sd-ux-principle-card {
padding: 1.25rem;
}
}
</style>
<div class="sd-ux-container">
<div class="sd-ux-title">Style Definery — UX: Datenarchitektur-Entscheidungen</div>
<div class="sd-ux-principles">
<div class="sd-ux-principle-card">
<div class="sd-ux-icon">⚙️</div>
<div class="sd-ux-principle-label">Daten ≠ Layout</div>
<div class="sd-ux-principle-text">Produktdaten strikt von Layout-Entscheidungen getrennt</div>
</div>
<div class="sd-ux-principle-card">
<div class="sd-ux-icon">📦</div>
<div class="sd-ux-principle-label">Systematisch bündeln</div>
<div class="sd-ux-principle-text">Wiederkehrende Inhalte zentral verwaltet, nicht pro Produkt</div>
</div>
<div class="sd-ux-principle-card">
<div class="sd-ux-icon">🏯</div>
<div class="sd-ux-principle-label">Sonderfälle vermeiden</div>
<div class="sd-ux-principle-text">Bewusster Verzicht auf Einzellösungen zugunsten System-Konsistenz</div>
</div>
<div class="sd-ux-principle-card">
<div class="sd-ux-icon">🔄</div>
<div class="sd-ux-principle-label">Reale Prozesse</div>
<div class="sd-ux-principle-text">Navigation entlang echter Nutzungs- und Pflegeprozesse</div>
</div>
</div>
<div class="sd-ux-insight-box">
<div class="sd-ux-insight-label">Insight</div>
<div class="sd-ux-insight-text">Second-Hand-E-Commerce erfordert eine andere UX-Logik als klassische Shops</div>
</div>
</div>
<div data-tn style="display:none">Servicekonzept</div><style>
.sd-flow-container {
background-color: #FFFFFF;
padding: 40px;
border-radius: 8px;
border: 1px solid #E5E7EB;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
max-width: 100%;
}
.sd-flow-title {
font-size: 24px;
font-weight: 600;
color: #1F2937;
margin-bottom: 32px;
text-align: center;
}
.sd-flow-diagram {
display: flex;
flex-direction: column;
gap: 40px;
}
/* Row containers */
.sd-flow-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.sd-flow-row-1 {
flex-direction: row;
}
.sd-flow-row-2 {
flex-direction: row;
min-height: 120px;
}
.sd-flow-row-3 {
flex-direction: row;
}
/* Node styles */
.sd-flow-node {
padding: 16px 24px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
text-align: center;
white-space: nowrap;
position: relative;
z-index: 2;
}
.sd-flow-node-dark {
background-color: #1E293B;
color: #FFFFFF;
border: 1px solid #0F172A;
min-width: 140px;
}
.sd-flow-node-start,
.sd-flow-node-end {
background-color: #CBD5E1;
color: #1E293B;
border: 1px solid #94A3B8;
min-width: 100px;
}
.sd-flow-node-end {
background-color: #A7F3D0;
border: 1px solid #6EE7B7;
color: #047857;
}
/* Diamond (decision node) */
.sd-flow-diamond {
width: 100px;
height: 100px;
background-color: #FFFFFF;
border: 2px solid #334155;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.sd-flow-diamond-text {
transform: rotate(-45deg);
font-size: 12px;
font-weight: 600;
color: #1E293B;
text-align: center;
width: 80px;
line-height: 1.3;
}
/* Arrow styles */
.sd-flow-arrow {
color: #334155;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sd-flow-arrow-right::before {
content: '→';
}
.sd-flow-arrow-down::before {
content: '↓';
}
.sd-flow-arrow-left::before {
content: '←';
}
/* Arrow labels */
.sd-flow-arrow-label {
font-size: 12px;
color: #475569;
font-weight: 600;
position: absolute;
white-space: nowrap;
}
.sd-flow-label-yes {
bottom: -20px;
right: -10px;
}
.sd-flow-label-no {
top: -20px;
left: -20px;
}
/* Connector line for the discount code branch */
.sd-flow-discount-connector {
position: absolute;
height: 2px;
background-color: #334155;
z-index: 1;
}
.sd-flow-discount-label {
font-size: 12px;
color: #475569;
font-weight: 500;
position: absolute;
background-color: #FFFFFF;
padding: 4px 8px;
}
/* Vertical connector for down arrow */
.sd-flow-vertical-connector {
width: 2px;
height: 30px;
background-color: #334155;
margin: 0 auto;
}
/* Loop back container */
.sd-flow-loop-back {
position: absolute;
width: 300px;
height: 120px;
border: 2px solid #E5E7EB;
border-radius: 8px;
bottom: -140px;
left: 50%;
transform: translateX(-50%);
z-index: 0;
}
.sd-flow-loop-label {
position: absolute;
font-size: 11px;
color: #6B7280;
font-weight: 500;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.sd-flow-row {
gap: 16px;
flex-wrap: wrap;
}
.sd-flow-node {
font-size: 13px;
padding: 14px 20px;
min-width: 120px;
}
.sd-flow-diamond {
width: 90px;
height: 90px;
}
.sd-flow-diamond-text {
font-size: 11px;
}
}
@media (max-width: 768px) {
.sd-flow-container {
padding: 24px;
}
.sd-flow-title {
font-size: 20px;
margin-bottom: 24px;
}
.sd-flow-diagram {
gap: 48px;
}
.sd-flow-row {
flex-direction: column;
gap: 16px;
}
.sd-flow-arrow-right::before {
content: '↓';
}
.sd-flow-arrow {
transform: rotate(90deg);
}
.sd-flow-node {
font-size: 12px;
padding: 12px 18px;
width: 100%;
max-width: 200px;
}
.sd-flow-row-2 {
min-height: auto;
position: relative;
}
.sd-flow-loop-back {
position: static;
width: auto;
height: auto;
border: none;
margin-top: 24px;
transform: none;
}
.sd-flow-loop-label {
position: static;
transform: none;
margin-bottom: 8px;
display: block;
text-align: center;
}
}
/* Print styles */
@media print {
.sd-flow-container {
border: none;
padding: 0;
}
}
</style>
<div class="sd-flow-container">
<h2 class="sd-flow-title">Shopping Flow</h2>
<div class="sd-flow-diagram">
<!-- Row 1: Main browsing path -->
<div class="sd-flow-row sd-flow-row-1">
<div class="sd-flow-node sd-flow-node-start">Start</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-dark">Homepage</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-dark">Kategorie/<br>Suche</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-dark">Produkt-<br>übersichtseite</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-dark">Produkt-<br>detailseite</div>
</div>
<!-- Vertical connector -->
<div style="display: flex; justify-content: center;">
<div class="sd-flow-vertical-connector"></div>
</div>
<!-- Row 2: Cart and decision -->
<div class="sd-flow-row sd-flow-row-2" style="position: relative;">
<div class="sd-flow-node sd-flow-node-dark">Warenkorb</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-dark">Warenkorb<br>prüfen</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div style="position: relative;">
<div class="sd-flow-diamond">
<div class="sd-flow-diamond-text">Produkt gefällt?</div>
</div>
<div class="sd-flow-arrow-label sd-flow-label-yes">Ja</div>
<div class="sd-flow-arrow-label sd-flow-label-no">Nein</div>
</div>
<!-- Loop back indication -->
<div class="sd-flow-loop-back"></div>
<div class="sd-flow-loop-label">← Zurück zum Einkaufen</div>
</div>
<!-- Vertical connector down from decision -->
<div style="display: flex; justify-content: center;">
<div class="sd-flow-vertical-connector"></div>
</div>
<!-- Row 3: Checkout process -->
<div class="sd-flow-row sd-flow-row-3">
<div class="sd-flow-node sd-flow-node-dark">Login<br>(EMail/PW)</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-dark">Versand &<br>Zahlung<br>Registrieren</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-dark">Bestellung<br>vorbereiten</div>
<div class="sd-flow-arrow sd-flow-arrow-right"></div>
<div class="sd-flow-node sd-flow-node-end">Bestätigungs-<br>seite / E-Mail</div>
</div>
<!-- Additional note for discount code -->
<div style="text-align: center; margin-top: 16px;">
<span style="font-size: 12px; color: #6B7280; font-weight: 500;">💡 Rabattcode kann im Checkout angewendet werden</span>
</div>
</div>
</div>
<div data-tn style="display:none">Customer Journey</div><style>
.sd-hier-container {
background-color: #FFFFFF;
padding: 40px 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.sd-hier-heading {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 40px;
color: #1E293B;
}
.sd-hier-root-wrapper {
display: flex;
justify-content: center;
margin-bottom: 50px;
position: relative;
}
.sd-hier-root {
background-color: #CBD5E1;
color: #1E293B;
padding: 20px 30px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
min-width: 250px;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
border: 1px solid #E5E7EB;
}
.sd-hier-nav-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 40px;
}
.sd-hier-main-nav {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 25px;
padding: 0 20px;
}
.sd-hier-category {
position: relative;
}
.sd-hier-category-button {
background-color: #1E293B;
color: #FFFFFF;
padding: 16px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid #E5E7EB;
cursor: pointer;
transition: all 0.3s ease;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sd-hier-category-button:hover {
background-color: #0F172A;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sd-hier-category.active .sd-hier-category-button {
background-color: #0F172A;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sd-hier-subcategories {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 15px;
display: none;
flex-direction: column;
gap: 8px;
min-width: 160px;
z-index: 10;
}
.sd-hier-category.active .sd-hier-subcategories {
display: flex;
}
.sd-hier-connecting-line {
position: absolute;
top: -15px;
left: 50%;
width: 2px;
height: 15px;
background-color: #E5E7EB;
transform: translateX(-50%);
}
.sd-hier-subcategory {
background-color: #1E293B;
color: #FFFFFF;
padding: 10px 12px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-align: center;
white-space: nowrap;
border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.sd-hier-subcategory:hover {
background-color: #0F172A;
transform: translateY(-1px);
}
.sd-hier-utility-nav {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 100px;
}
.sd-hier-utility-button {
background-color: #1E293B;
color: #FFFFFF;
padding: 12px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid #E5E7EB;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sd-hier-utility-button:hover {
background-color: #0F172A;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sd-hier-divider {
height: 1px;
background-color: #E5E7EB;
margin: 40px 0;
}
.sd-hier-footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
padding: 0 20px;
}
.sd-hier-footer-section {
padding: 0 15px;
}
.sd-hier-footer-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #1E293B;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.sd-hier-footer-link {
font-size: 13px;
color: #475569;
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease;
display: block;
margin-bottom: 6px;
}
.sd-hier-footer-link:hover {
color: #1E293B;
}
@media (max-width: 1024px) {
.sd-hier-main-nav {
grid-template-columns: repeat(4, 1fr);
}
.sd-hier-nav-wrapper {
flex-direction: column;
gap: 30px;
}
.sd-hier-utility-nav {
flex-direction: row;
gap: 12px;
order: -1;
margin-bottom: 20px;
}
.sd-hier-utility-button {
flex: 1;
min-width: auto;
}
}
@media (max-width: 768px) {
.sd-hier-main-nav {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.sd-hier-category-button {
font-size: 11px;
padding: 12px 10px;
min-height: 50px;
}
.sd-hier-subcategories {
position: static;
transform: none;
margin-top: 10px;
margin-left: 0;
}
.sd-hier-category.active .sd-hier-subcategories {
display: flex;
}
.sd-hier-connecting-line {
display: none;
}
.sd-hier-footer {
grid-template-columns: 1fr;
}
}
</style>
<div class="sd-hier-container">
<h2 class="sd-hier-heading">Website Hierarchy: Style Definery</h2>
<div class="sd-hier-root-wrapper">
<div class="sd-hier-root">
STYLEDEFINERY.COM<br><span style="font-size: 13px; font-weight: 400;">Homepage</span>
</div>
</div>
<div class="sd-hier-nav-wrapper">
<div class="sd-hier-main-nav">
<!-- Category 1: KLEIDUNG -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">Kleidung</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
<div class="sd-hier-subcategory">Abendkleider</div>
<div class="sd-hier-subcategory">Blazer</div>
<div class="sd-hier-subcategory">Kleider</div>
<div class="sd-hier-subcategory">Tops</div>
<div class="sd-hier-subcategory">Strickwaren</div>
</div>
</div>
<!-- Category 2: SCHUHE -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">Schuhe</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
<div class="sd-hier-subcategory">Ankle Boots</div>
<div class="sd-hier-subcategory">Hoser</div>
<div class="sd-hier-subcategory">Mäntel</div>
<div class="sd-hier-subcategory">Röcke</div>
<div class="sd-hier-subcategory">Tops</div>
<div class="sd-hier-subcategory">Sandalen</div>
</div>
</div>
<!-- Category 3: TASCHEN -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">Taschen</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
<div class="sd-hier-subcategory">Clutches</div>
<div class="sd-hier-subcategory">Pumps</div>
<div class="sd-hier-subcategory">Sandalen</div>
<div class="sd-hier-subcategory">Handtaschen</div>
<div class="sd-hier-subcategory">Totes</div>
<div class="sd-hier-subcategory">Sandalen</div>
</div>
</div>
<!-- Category 4: ACCESSOIRES & SCHMUCK -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">Accessoires & Schmuck</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
<div class="sd-hier-subcategory">Gürtel</div>
<div class="sd-hier-subcategory">Armbänder</div>
<div class="sd-hier-subcategory">Ringe</div>
<div class="sd-hier-subcategory">Hermès</div>
<div class="sd-hier-subcategory">Food</div>
</div>
</div>
<!-- Category 5: NEW ARRIVALS / SALE -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">New Arrivals / Sale</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
</div>
</div>
<!-- Category 6: LIFESTYLE -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">Lifestyle</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
<div class="sd-hier-subcategory">Chanel</div>
<div class="sd-hier-subcategory">Gucci</div>
<div class="sd-hier-subcategory">Armbänder</div>
<div class="sd-hier-subcategory">Ringe</div>
<div class="sd-hier-subcategory">Hermès</div>
<div class="sd-hier-subcategory">Food</div>
</div>
</div>
<!-- Category 7: DESIGNER -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">Designer</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
<div class="sd-hier-subcategory">Gucci</div>
<div class="sd-hier-subcategory">Ringe</div>
<div class="sd-hier-subcategory">Withes</div>
<div class="sd-hier-subcategory">Katten</div>
<div class="sd-hier-subcategory">Alle Designer</div>
</div>
</div>
<!-- Category 8: MAGAZIN -->
<div class="sd-hier-category">
<div class="sd-hier-category-button">Magazin</div>
<div class="sd-hier-subcategories">
<div class="sd-hier-connecting-line"></div>
<div class="sd-hier-subcategory">Fashion Stories</div>
<div class="sd-hier-subcategory">Trends</div>
<div class="sd-hier-subcategory">Shop The Closet</div>
<div class="sd-hier-subcategory">Instagram Feed</div>
</div>
</div>
</div>
<!-- Utility Navigation -->
<div class="sd-hier-utility-nav">
<div class="sd-hier-utility-button">Account</div>
<div class="sd-hier-utility-button">Warenkorb</div>
</div>
</div>
<div class="sd-hier-divider"></div>
<!-- Footer Sections -->
<div class="sd-hier-footer">
<div class="sd-hier-footer-section">
<div class="sd-hier-footer-title">Service</div>
<div class="sd-hier-footer-link">Verkaufen Sie mit uns</div>
</div>
<div class="sd-hier-footer-section">
<div class="sd-hier-footer-title">Impressum</div>
<div class="sd-hier-footer-link">FAQ</div>
</div>
<div class="sd-hier-footer-section">
<div class="sd-hier-footer-title">Rechtliches</div>
<div class="sd-hier-footer-link">Datenschutz</div>
</div>
<div class="sd-hier-footer-section">
<div class="sd-hier-footer-title">Beratung</div>
<div class="sd-hier-footer-link">AGB</div>
<div class="sd-hier-footer-link">Widerrufsrecht</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.sd-hier-category-button').forEach(button => {
button.addEventListener('click', function() {
const category = this.closest('.sd-hier-category');
category.classList.toggle('active');
});
button.addEventListener('mouseenter', function() {
const category = this.closest('.sd-hier-category');
if (category.querySelector('.sd-hier-subcategories').children.length > 1) {
category.classList.add('active');
}
});
});
document.querySelector('.sd-hier-container').addEventListener('mouseleave', function() {
document.querySelectorAll('.sd-hier-category.active').forEach(cat => {
cat.classList.remove('active');
});
});
</script>
UI Design – Umsetzung der Konzepte
Das UI Design übersetzt diese strukturellen Entscheidungen konsequent ins Visuelle. Ich habe ein bewusst reduziertes, editorial geprägtes Interface entwickelt, das Produktbilder und Marken in den Vordergrund stellt und auch bei sehr unterschiedlichen Artikeln konsistent funktioniert. Alle Komponenten sind so gestaltet, dass sie flexibel bestückbar sind, ohne neue Layouts oder Sonderlogiken zu erfordern. Das Design unterstützt die technische Struktur sichtbar und bleibt responsiv und systemisch gedacht.
<style>
.sd-ds{width:100%;background:#FFFFFF;padding:32px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.sd-ds-title{font-size:18px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center}
.sd-ds-sub{font-size:13px;color:#6B7280;margin:0 0 28px;text-align:center}
.sd-ds-section{margin-bottom:28px}
.sd-ds-label{font-size:11px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px}
.sd-ds-colors{display:flex;gap:12px;flex-wrap:wrap}
.sd-ds-swatch{display:flex;flex-direction:column;align-items:center;gap:6px}
.sd-ds-color{width:56px;height:56px;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.sd-ds-hex{font-size:11px;font-weight:600;color:#374151;font-family:monospace}
.sd-ds-cname{font-size:10px;color:#9CA3AF}
.sd-ds-typo{display:flex;flex-direction:column;gap:8px}
.sd-ds-font{display:flex;align-items:baseline;gap:12px}
.sd-ds-font-sample{color:#1A1A1A}
.sd-ds-font-meta{font-size:11px;color:#9CA3AF}
.sd-ds-btns{display:flex;gap:10px;flex-wrap:wrap}
.sd-ds-btn{display:inline-block;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:default;transition:opacity .2s}
.sd-ds-btn:hover{opacity:0.85}
.sd-ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.sd-ds-space{background:#F3F4F6;border-radius:6px;text-align:center;padding:8px 4px;font-size:10px;color:#6B7280}
.sd-ds-space span{display:block;font-weight:700;color:#374151;font-size:12px}
@media(max-width:640px){.sd-ds-colors{gap:8px}.sd-ds-color{width:44px;height:44px}.sd-ds-grid{grid-template-columns:repeat(2,1fr)}}
</style>
<div class="sd-ds">
<p class="sd-ds-title">Design System — Style Definery</p>
<p class="sd-ds-sub">Visuelle Grundlagen und Komponentenbibliothek</p>
<div class="sd-ds-section">
<p class="sd-ds-label">Farbpalette</p>
<div class="sd-ds-colors"><div class="sd-ds-swatch"><div class="sd-ds-color" style="background:#1A1A1A"></div><span class="sd-ds-hex">#1A1A1A</span><span class="sd-ds-cname">Primary</span></div>
<div class="sd-ds-swatch"><div class="sd-ds-color" style="background:#B8860B"></div><span class="sd-ds-hex">#B8860B</span><span class="sd-ds-cname">Gold Accent</span></div>
<div class="sd-ds-swatch"><div class="sd-ds-color" style="background:#F5F0EB"></div><span class="sd-ds-hex">#F5F0EB</span><span class="sd-ds-cname">Warm Neutral</span></div>
<div class="sd-ds-swatch"><div class="sd-ds-color" style="background:#E8DDD3"></div><span class="sd-ds-hex">#E8DDD3</span><span class="sd-ds-cname">Surface</span></div>
<div class="sd-ds-swatch"><div class="sd-ds-color" style="background:#6B5B4E"></div><span class="sd-ds-hex">#6B5B4E</span><span class="sd-ds-cname">Text Muted</span></div>
<div class="sd-ds-swatch"><div class="sd-ds-color" style="background:#FFFFFF"></div><span class="sd-ds-hex">#FFFFFF</span><span class="sd-ds-cname">Background</span></div>
</div>
</div>
<div class="sd-ds-section">
<p class="sd-ds-label">Typografie</p>
<div class="sd-ds-typo">
<div class="sd-ds-font"><span class="sd-ds-font-sample" style="font-family:Cormorant;font-size:24px;font-weight:700">Stil definieren.</span><span class="sd-ds-font-meta">Cormorant · Heading · 700</span></div>
<div class="sd-ds-font"><span class="sd-ds-font-sample" style="font-family:Nunito Sans;font-size:15px">Personalisierte Modeberatung die deinen individuellen Stil hervorhebt und deinen Alltag vereinfacht.</span><span class="sd-ds-font-meta">Nunito Sans · Body · 400</span></div>
</div>
</div>
<div class="sd-ds-section">
<p class="sd-ds-label">Buttons</p>
<div class="sd-ds-btns"><span class="sd-ds-btn" style="background:#1A1A1A;color:#FFF">Style-Profil starten</span>
<span class="sd-ds-btn" style="background:#F5F0EB;color:#1A1A1A">Looks entdecken</span>
<span class="sd-ds-btn" style="background:transparent;color:#1A1A1A;border:1.5px solid #1A1A1A">Termin buchen</span>
</div>
</div>
<div class="sd-ds-section">
<p class="sd-ds-label">Spacing Scale</p>
<div class="sd-ds-grid">
<div class="sd-ds-space"><span>4px</span>xs</div>
<div class="sd-ds-space"><span>8px</span>sm</div>
<div class="sd-ds-space"><span>16px</span>md</div>
<div class="sd-ds-space"><span>24px</span>lg</div>
<div class="sd-ds-space"><span>32px</span>xl</div>
<div class="sd-ds-space"><span>48px</span>2xl</div>
<div class="sd-ds-space"><span>64px</span>3xl</div>
<div class="sd-ds-space"><span>96px</span>4xl</div>
</div>
</div>
</div>
Web & Development
Die technische Umsetzung erfolgte innerhalb von Shopify, jedoch stark angepasst. Durch den gezielten Einsatz von Metafeldern, individuellen Templates und klar definierten Datenstrukturen entstand ein wartbares, datengetriebenes System. CSV-basierte Prozesse ermöglichen die effiziente Pflege größerer Produktmengen, während Shopify POS und externe Marktplätze einen reibungslosen Omnichannel-Betrieb sicherstellen. Die Architektur ist bewusst so aufgebaut, dass Abhängigkeiten reduziert und Erweiterungen ohne grundlegende Umbauten möglich sind.
Ergebnis & Wirkung
Das Ergebnis ist ein klar strukturiertes Shopsystem, das komplexe Second-Hand-Daten sauber abbildet und redaktionell deutlich einfacher zu bedienen ist. Trotz hoher Produktvarianz bleibt die visuelle Darstellung konsistent, und Design sowie Technik greifen nahtlos ineinander. Das System bildet eine stabile Grundlage für den täglichen Betrieb und zukünftiges Wachstum.
<style>
.sd-erg-container {
max-width: 100%;
padding: 2rem 1.5rem;
background-color: #FFFFFF;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1F2937;
}
.sd-erg-title {
font-size: 1.375rem;
font-weight: 600;
margin-bottom: 2rem;
line-height: 1.4;
}
.sd-erg-capabilities {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.sd-erg-capability-card {
padding: 1.5rem;
background-color: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 1rem;
}
.sd-erg-capability-card:hover {
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.sd-erg-capability-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.sd-erg-capability-label {
font-weight: 600;
font-size: 1rem;
color: #374151;
flex: 1;
}
.sd-erg-badge {
display: inline-block;
padding: 0.35rem 0.75rem;
background-color: #DBEAFE;
color: #1E40AF;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
flex-shrink: 0;
}
.sd-erg-capability-text {
font-size: 0.95rem;
color: #6B7280;
line-height: 1.6;
}
.sd-erg-tags-wrapper {
padding-top: 1.5rem;
border-top: 1px solid #E5E7EB;
}
.sd-erg-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.sd-erg-tag {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #F3F4F6;
border: 1px solid #E5E7EB;
border-radius: 9999px;
font-size: 0.875rem;
color: #6B7280;
font-weight: 500;
transition: all 0.3s ease;
}
.sd-erg-tag:hover {
background-color: #E5E7EB;
color: #374151;
}
@media (max-width: 640px) {
.sd-erg-container {
padding: 1.5rem 1rem;
}
.sd-erg-title {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.sd-erg-capabilities {
grid-template-columns: 1fr;
gap: 1rem;
}
.sd-erg-capability-card {
padding: 1.25rem;
}
.sd-erg-capability-header {
flex-direction: column;
}
.sd-erg-badge {
align-self: flex-start;
}
}
</style>
<div class="sd-erg-container">
<div class="sd-erg-title">Style Definery — Ergebnis: System-Capabilities</div>
<div class="sd-erg-capabilities">
<div class="sd-erg-capability-card">
<div class="sd-erg-capability-header">
<div class="sd-erg-capability-label">Metafeld-Architektur</div>
<span class="sd-erg-badge">Shopify</span>
</div>
<div class="sd-erg-capability-text">Komplexe Second-Hand-Daten sauber abgebildet</div>
</div>
<div class="sd-erg-capability-card">
<div class="sd-erg-capability-header">
<div class="sd-erg-capability-label">CSV-Workflows</div>
<span class="sd-erg-badge">Batch</span>
</div>
<div class="sd-erg-capability-text">Effiziente Pflege größerer Produktmengen</div>
</div>
<div class="sd-erg-capability-card">
<div class="sd-erg-capability-header">
<div class="sd-erg-capability-label">Omnichannel</div>
<span class="sd-erg-badge">POS</span>
</div>
<div class="sd-erg-capability-text">Shopify POS + externe Marktplätze integriert</div>
</div>
<div class="sd-erg-capability-card">
<div class="sd-erg-capability-header">
<div class="sd-erg-capability-label">Editorial Design</div>
<span class="sd-erg-badge">UI</span>
</div>
<div class="sd-erg-capability-text">Konsistente Darstellung trotz hoher Produktvarianz</div>
</div>
</div>
<div class="sd-erg-tags-wrapper">
<div class="sd-erg-tags">
<span class="sd-erg-tag">Shopify</span>
<span class="sd-erg-tag">Metafelder</span>
<span class="sd-erg-tag">CSV</span>
<span class="sd-erg-tag">POS</span>
</div>
</div>
</div>
Fazit
Das Projekt hat deutlich gemacht, dass E-Commerce mit Einzelprodukten und Konsignationslogik grundlegend andere Anforderungen stellt als klassische Shops mit standardisierten Produkten und großen Lagerbeständen. In diesem Kontext entsteht gute UX nicht primär im Interface, sondern in der Datenstruktur, der klaren Trennung von Verantwortlichkeiten und der früh durchdachten Systemarchitektur. Besonders entscheidend war es, Pflegeprozesse, Auszahlungslogiken und Omnichannel-Anforderungen von Anfang an mitzudenken, um spätere Komplexität zu vermeiden. Styledefinery zeigt meine Arbeitsweise an der Schnittstelle von UX, UI und technischer Umsetzung, mit einem klaren Fokus auf strukturierte Systeme, Wartbarkeit und den Umgang mit nicht standardisierten, datenintensiven E-Commerce-Modellen.
/// Portfolio ///
weitere Projekte
A curated collection of my most impactful projects, showcasing my approach, creativity, and the results delivered for clients.
