UX / UI – Konzept & Entscheidungen
Die UX-Konzeption begann mit der Definition klarer Userflows für unterschiedliche Zielgruppen und dem Aufbau einer nachvollziehbaren Informationshierarchie. Interaktive Auswahlmodule ermöglichen es Nutzer:innen, sich selbstgesteuert durch komplexe Inhalte zu navigieren. Interaktive Infografiken machen abstrakte Beratungsmethoden greifbar und erhöhen die Verweildauer. Alle Entscheidungen wurden darauf ausgerichtet, Komplexität zu reduzieren und Inhalte kontextbezogen auszuspielen.
<div data-tn style="display:none">Bedarfsanalyse</div><style>
.cc-aus-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: #FFFFFF;
padding: 2rem;
border-radius: 8px;
max-width: 100%;
color: #1F2937;
}
.cc-aus-header {
margin-bottom: 2rem;
text-align: center;
}
.cc-aus-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #111827;
}
.cc-aus-subtitle {
font-size: 0.95rem;
color: #6B7280;
}
.cc-aus-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.cc-aus-card {
background: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
padding: 1.5rem;
transition: all 0.3s ease;
cursor: default;
}
.cc-aus-card:hover {
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cc-aus-card-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: #111827;
}
.cc-aus-card-text {
font-size: 0.9rem;
line-height: 1.5;
color: #4B5563;
}
.cc-aus-flow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.cc-aus-arrow {
font-size: 1.5rem;
color: #9CA3AF;
font-weight: 300;
}
.cc-aus-result-box {
background: white;
border-left: 4px solid #3B82F6;
border: 1px solid #E5E7EB;
border-left: 4px solid #3B82F6;
border-radius: 4px;
padding: 1.5rem;
text-align: center;
}
.cc-aus-result-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6B7280;
margin-bottom: 0.5rem;
font-weight: 600;
}
.cc-aus-result-text {
font-size: 1.1rem;
font-weight: 600;
color: #111827;
}
@media (max-width: 640px) {
.cc-aus-container {
padding: 1.5rem;
}
.cc-aus-title {
font-size: 1.25rem;
}
.cc-aus-cards-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.cc-aus-flow {
flex-direction: column;
gap: 1.5rem;
}
.cc-aus-arrow {
transform: rotate(90deg);
}
}
</style>
<div class="cc-aus-container">
<div class="cc-aus-header">
<h2 class="cc-aus-title">Ausgangslage</h2>
<p class="cc-aus-subtitle">Komplexitäts-Herausforderung</p>
</div>
<div class="cc-aus-cards-grid">
<div class="cc-aus-card">
<h3 class="cc-aus-card-title">Inhaltliche Komplexität</h3>
<p class="cc-aus-card-text">Beratungsleistungen, Methoden und Zielgruppen müssen gleichzeitig abgebildet werden</p>
</div>
<div class="cc-aus-card">
<h3 class="cc-aus-card-title">Mehrere Nutzergruppen</h3>
<p class="cc-aus-card-text">Unterschiedliche Zielgruppen brauchen unterschiedliche Einstiegspunkte</p>
</div>
<div class="cc-aus-card">
<h3 class="cc-aus-card-title">Zukunftsfähigkeit</h3>
<p class="cc-aus-card-text">Architektur muss Erweiterbarkeit und Mehrsprachigkeit von Beginn an unterstützen</p>
</div>
</div>
<div class="cc-aus-flow">
<span style="flex: 1; text-align: right; font-size: 1.2rem; color: #D1D5DB;">●●●</span>
<span class="cc-aus-arrow">→</span>
<span style="flex: 1;"></span>
</div>
<div class="cc-aus-result-box">
<div class="cc-aus-result-label">Lösung</div>
<div class="cc-aus-result-text">Modulare Webflow-Architektur mit interaktiven Content-Modulen</div>
</div>
</div>
<div data-tn style="display:none">Plattformkonzept</div><style>
.cc-ux-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: #FFFFFF;
padding: 2rem;
border-radius: 8px;
max-width: 100%;
color: #1F2937;
}
.cc-ux-header {
margin-bottom: 2rem;
text-align: center;
}
.cc-ux-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #111827;
}
.cc-ux-subtitle {
font-size: 0.95rem;
color: #6B7280;
}
.cc-ux-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.cc-ux-card {
background: white;
border: 1px solid #E5E7EB;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
}
.cc-ux-card:hover {
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cc-ux-card-mockup {
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
height: 160px;
display: flex;
align-items: center;
justify-content: center;
color: #9CA3AF;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
padding: 1rem;
position: relative;
overflow: hidden;
}
.cc-ux-mockup-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.cc-ux-card-content {
padding: 1.5rem;
}
.cc-ux-card-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #111827;
}
.cc-ux-card-text {
font-size: 0.9rem;
line-height: 1.5;
color: #4B5563;
}
.cc-ux-insight {
background: white;
border-left: 4px solid #10B981;
border: 1px solid #E5E7EB;
border-left: 4px solid #10B981;
border-radius: 4px;
padding: 1.5rem;
text-align: center;
margin-top: 1.5rem;
}
.cc-ux-insight-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6B7280;
margin-bottom: 0.5rem;
font-weight: 600;
}
.cc-ux-insight-text {
font-size: 1.1rem;
font-weight: 600;
color: #111827;
}
.cc-ux-dots-pattern {
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
opacity: 0.3;
}
@media (max-width: 640px) {
.cc-ux-container {
padding: 1.5rem;
}
.cc-ux-title {
font-size: 1.25rem;
}
.cc-ux-cards-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.cc-ux-card-mockup {
height: 140px;
}
}
</style>
<div class="cc-ux-container">
<div class="cc-ux-header">
<h2 class="cc-ux-title">UX-Konzept</h2>
<p class="cc-ux-subtitle">Interaktive Navigationslogik</p>
</div>
<div class="cc-ux-cards-grid">
<div class="cc-ux-card">
<div class="cc-ux-card-mockup">
<div style="text-align: center;">
<div class="cc-ux-mockup-icon">⚙</div>
<div>Filter & Auswahl</div>
</div>
<span class="cc-ux-dots-pattern">···</span>
</div>
<div class="cc-ux-card-content">
<h3 class="cc-ux-card-title">Auswahlmodule</h3>
<p class="cc-ux-card-text">Nutzer:innen navigieren selbstgesteuert durch komplexe Inhalte</p>
</div>
</div>
<div class="cc-ux-card">
<div class="cc-ux-card-mockup">
<div style="text-align: center;">
<div class="cc-ux-mockup-icon">📊</div>
<div>Visuelle Daten</div>
</div>
<span class="cc-ux-dots-pattern">···</span>
</div>
<div class="cc-ux-card-content">
<h3 class="cc-ux-card-title">Interaktive Infografiken</h3>
<p class="cc-ux-card-text">Abstrakte Methoden werden greifbar, Verweildauer steigt</p>
</div>
</div>
<div class="cc-ux-card">
<div class="cc-ux-card-mockup">
<div style="text-align: center;">
<div class="cc-ux-mockup-icon">🎯</div>
<div>Zielgruppe</div>
</div>
<span class="cc-ux-dots-pattern">···</span>
</div>
<div class="cc-ux-card-content">
<h3 class="cc-ux-card-title">Kontextbezogene Inhalte</h3>
<p class="cc-ux-card-text">Inhalte werden zielgruppenspezifisch ausgespielt</p>
</div>
</div>
</div>
<div class="cc-ux-insight">
<div class="cc-ux-insight-label">Kernprinzip</div>
<div class="cc-ux-insight-text">Komplexität reduzieren, nicht verstecken</div>
</div>
</div>
<div data-tn style="display:none">Stakeholder Matrix</div><style>
.cc-mx{width:100%;background:#FFFFFF;padding:28px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.cc-mx-title{font-size:17px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center}
.cc-mx-sub{font-size:13px;color:#6B7280;margin:0 0 24px;text-align:center}
.cc-mx-chart{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1}
.cc-mx-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100%;border:1px solid #E5E7EB;border-radius:12px;overflow:hidden}
.cc-mx-q{padding:12px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:600;color:#6B7280;transition:background .2s}
.cc-mx-q:hover{background:rgba(0,0,0,0.03)}
.cc-mx-q:nth-child(1){background:#FEF2F2;color:#991B1B;border-right:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB}
.cc-mx-q:nth-child(2){background:#ECFDF5;color:#065F46;border-bottom:1px solid #E5E7EB}
.cc-mx-q:nth-child(3){background:#F9FAFB;color:#6B7280;border-right:1px solid #E5E7EB}
.cc-mx-q:nth-child(4){background:#FFFBEB;color:#92400E}
.cc-mx-axes{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:#9CA3AF;font-weight:600}
.cc-mx-yaxis{position:absolute;left:-8px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:#9CA3AF;font-weight:600;writing-mode:vertical-rl;transform:rotate(180deg);padding:12px 0}
</style>
<div class="cc-mx">
<p class="cc-mx-title">Stakeholder Mapping</p>
<p class="cc-mx-sub">Einfluss- und Interessensanalyse der Zielgruppen</p>
<div style="position:relative;max-width:480px;margin:0 auto">
<div class="cc-mx-chart">
<div class="cc-mx-grid">
<div class="cc-mx-q">Manage Closely<br><small>Hoher Einfluss, hohes Interesse</small></div>
<div class="cc-mx-q">Keep Satisfied<br><small>Hoher Einfluss, geringes Interesse</small></div>
<div class="cc-mx-q">Keep Informed<br><small>Geringer Einfluss, hohes Interesse</small></div>
<div class="cc-mx-q">Monitor<br><small>Geringer Einfluss, geringes Interesse</small></div>
</div>
</div>
<div class="cc-mx-axes"><span>← Hohes Interesse</span><span>Geringes Interesse →</span></div>
</div>
</div>
