UX / UI – Konzept & Entscheidungen
Die Konzeption startete mit einer umfangreichen Research-Phase: Zielgruppenanalyse, Entwicklung von Personas und Einsatz des Value Proposition Canvas, um die tatsächlichen Bedürfnisse von Haustierbesitzer:innen zu identifizieren. Umfragen und Interviews lieferten qualitative Einblicke in Nutzungsgewohnheiten und Schmerzpunkte. Daraus wurden User Flows und Sitemaps abgeleitet, die den Funktionsumfang klar strukturieren: Terminplanung, Behandlungshistorie, Erinnerungen und Sprechstunden als vier zentrale Bereiche, die ohne verschachtelte Navigation erreichbar bleiben.
<div data-tn style="display:none">Nutzeranalyse</div><style>
.vetxl-aus-container {
max-width: 100%;
width: 100%;
background-color: #FFFFFF;
padding: 40px 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.vetxl-aus-title {
text-align: center;
font-weight: 700;
font-size: 17px;
color: #1A1A1A;
margin: 0 0 4px 0;
}
.vetxl-aus-subtitle {
text-align: center;
font-weight: 400;
font-size: 13px;
color: #6B7280;
margin: 0 0 28px 0;
}
.vetxl-aus-legend {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.vetxl-aus-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.vetxl-aus-legend-box {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
}
.vetxl-aus-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
max-width: 840px;
margin: 0 auto;
}
.vetxl-aus-card {
background-color: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.2s ease;
}
.vetxl-aus-card:hover {
background-color: #FFFFFF;
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.vetxl-aus-card-num {
font-weight: 700;
font-size: 32px;
line-height: 1.2;
margin: 0 0 4px 0;
}
.vetxl-aus-card-label {
font-weight: 600;
font-size: 12px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 8px 0;
}
.vetxl-aus-card-desc {
font-size: 12px;
color: #6B7280;
line-height: 1.5;
margin: 0;
}
.vetxl-aus-bar {
display: flex;
height: 36px;
border-radius: 8px;
overflow: hidden;
margin-top: 24px;
border: 1px solid #E5E7EB;
}
.vetxl-aus-bar-seg {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 11px;
font-weight: 600;
padding: 0 12px;
white-space: nowrap;
}
</style>
<div class="vetxl-aus-container">
<h3 class="vetxl-aus-title">Ursachen der Reisenachfrage nach Ländern</h3>
<p class="vetxl-aus-subtitle">Verteilung nach Destinationen bei Werbetreibenden (n=48)</p>
<div class="vetxl-aus-legend">
<div class="vetxl-aus-legend-item">
<span class="vetxl-aus-legend-box" style="background-color: #FF6B35;"></span>
<span>Kulturelle Attraktionen</span>
</div>
<div class="vetxl-aus-legend-item">
<span class="vetxl-aus-legend-box" style="background-color: #004E89;"></span>
<span>Naturlandschaft</span>
</div>
<div class="vetxl-aus-legend-item">
<span class="vetxl-aus-legend-box" style="background-color: #F7C948;"></span>
<span>Entspannung/Wellness</span>
</div>
<div class="vetxl-aus-legend-item">
<span class="vetxl-aus-legend-box" style="background-color: #2EC4B6;"></span>
<span>Events/Nightlife</span>
</div>
</div>
<div class="vetxl-aus-grid">
<div class="vetxl-aus-card">
<div style="display: flex; align-items: center; justify-content: center;">
<span class="vetxl-aus-card-num" style="color: #FF6B35;">23</span>
</div>
<p class="vetxl-aus-card-label">Thailand</p>
<p class="vetxl-aus-card-desc">Strände, Tempel, Nachtleben</p>
</div>
<div class="vetxl-aus-card">
<div style="display: flex; align-items: center; justify-content: center;">
<span class="vetxl-aus-card-num" style="color: #004E89;">19</span>
</div>
<p class="vetxl-aus-card-label">Island</p>
<p class="vetxl-aus-card-desc">Naturlandschaft, Wandern</p>
</div>
<div class="vetxl-aus-card">
<div style="display: flex; align-items: center; justify-content: center;">
<span class="vetxl-aus-card-num" style="color: #F7C948;">17</span>
</div>
<p class="vetxl-aus-card-label">Indonesien</p>
<p class="vetxl-aus-card-desc">Strände, Meditation, Kultur</p>
</div>
<div class="vetxl-aus-card">
<div style="display: flex; align-items: center; justify-content: center;">
<span class="vetxl-aus-card-num" style="color: #2EC4B6;">12</span>
</div>
<p class="vetxl-aus-card-label">Japan</p>
<p class="vetxl-aus-card-desc">Kultur, Architektur, Food</p>
</div>
</div>
<div class="vetxl-aus-bar">
<div class="vetxl-aus-bar-seg" style="flex: 5; background-color: #FF6B35;">Kultur 48%</div>
<div class="vetxl-aus-bar-seg" style="flex: 3; background-color: #004E89;">Natur 29%</div>
<div class="vetxl-aus-bar-seg" style="flex: 2; background-color: #F7C948;">Wellness 23%</div>
</div>
</div>
<div data-tn style="display:none">Wettbewerber-Analyse</div><style>
.travel-comp-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 32px auto;
}
.travel-comp-title {
font-size: 17px;
font-weight: 700;
color: #1A1A1A;
margin: 0 0 4px 0;
text-align: center;
}
.travel-comp-subtitle {
font-size: 13px;
color: #6B7280;
margin: 0 0 24px 0;
text-align: center;
}
.travel-comp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.travel-comp-card {
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 20px;
background: #FFFFFF;
transition: all 0.2s ease;
}
.travel-comp-card:hover {
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.travel-comp-card-title {
font-weight: 600;
font-size: 14px;
color: #1A1A1A;
margin: 0 0 12px 0;
}
.travel-comp-card-feature {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: #6B7280;
margin: 8px 0;
line-height: 1.5;
}
.travel-comp-card-feature-icon {
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.travel-comp-insight {
background: #EEF2FF;
border: 1px solid #C7D2FE;
border-radius: 10px;
padding: 16px;
margin-top: 20px;
font-size: 13px;
color: #4338CA;
line-height: 1.6;
}
.travel-comp-insight strong {
color: #4338CA;
font-weight: 700;
}
@media (max-width: 640px) {
.travel-comp-grid {
grid-template-columns: 1fr;
}
}
</style>
<div class="travel-comp-container">
<h3 class="travel-comp-title">Wettbewerber-Analyse — Reiseplanung</h3>
<p class="travel-comp-subtitle">Marktübersicht digitaler Reiseplanungs-Tools</p>
<div class="travel-comp-grid">
<div class="travel-comp-card">
<p class="travel-comp-card-title">Google Trips (eingestellt)</p>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Einfache Sammlungen & Übersicht</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Integration mit Google Maps</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✗</span>
<span>Keine Community oder Echtzeitkooperation</span>
</div>
</div>
<div class="travel-comp-card">
<p class="travel-comp-card-title">TripAdvisor</p>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Orte sammeln & bewerten</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Community-Rezensionen</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✗</span>
<span>Keine Budgetplanung oder Finanztools</span>
</div>
</div>
<div class="travel-comp-card">
<p class="travel-comp-card-title">Wanderlist</p>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Schöne visuelle Inspiration</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Sammlung nach Ort & Interesse</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✗</span>
<span>Keine Planung oder Kooperation</span>
</div>
</div>
<div class="travel-comp-card">
<p class="travel-comp-card-title">Airbnb Wishlists</p>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Unterkunftsplanung integriert</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✓</span>
<span>Preis-Sichtbarkeit</span>
</div>
<div class="travel-comp-card-feature">
<span class="travel-comp-card-feature-icon">✗</span>
<span>Begrenzt auf Unterkünfte, keine Aktivitäten</span>
</div>
</div>
</div>
<div class="travel-comp-insight">
<strong>Kern-Insight:</strong> Kein Tool kombiniert Inspiration, Planung, Budgetverfolgung und Kooperation in einem System. Reisende nutzen 4-6 Tools parallel (Pinterest, Google Docs, Airbnb, TripAdvisor, Splitwise, WhatsApp).
</div>
</div>
<div data-tn style="display:none">Zielgruppen-Portrait</div><style>
.persona-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 32px auto;
}
.persona-title {
font-size: 17px;
font-weight: 700;
color: #1A1A1A;
margin: 0 0 4px 0;
text-align: center;
}
.persona-subtitle {
font-size: 13px;
color: #6B7280;
margin: 0 0 24px 0;
text-align: center;
}
.persona-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.persona-card {
background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
border: 1px solid #DDD6FE;
border-radius: 12px;
padding: 20px;
text-align: center;
}
.persona-card-icon {
font-size: 32px;
margin-bottom: 12px;
}
.persona-card-title {
font-weight: 700;
font-size: 14px;
color: #4338CA;
margin: 0 0 8px 0;
}
.persona-card-desc {
font-size: 12px;
color: #6B7280;
margin: 0 0 12px 0;
line-height: 1.5;
}
.persona-card-traits {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
color: #6B7280;
}
.persona-card-trait {
display: flex;
align-items: center;
gap: 6px;
}
.persona-card-trait-icon {
font-size: 12px;
}
</style>
<div class="persona-container">
<h3 class="persona-title">Zielgruppen-Portrait</h3>
<p class="persona-subtitle">Primäre Nutzersegmente (Research mit n=52)</p>
<div class="persona-grid">
<div class="persona-card">
<div class="persona-card-icon">✈️</div>
<div class="persona-card-title">Abenteuer-Reisende</div>
<div class="persona-card-desc">Budget-orientiert, spontan, suchen Inspiration</div>
<div class="persona-card-traits">
<div class="persona-card-trait"><span class="persona-card-trait-icon">🎯</span><span>Offline-Erlebnisse</span></div>
<div class="persona-card-trait"><span class="persona-card-trait-icon">📱</span><span>Mobile-First</span></div>
<div class="persona-card-trait"><span class="persona-card-trait-icon">👥</span><span>Gruppendynamik</span></div>
</div>
</div>
<div class="persona-card">
<div class="persona-card-icon">💼</div>
<div class="persona-card-title">Geschäftsreisende</div>
<div class="persona-card-desc">Effizienz-getrieben, wenig Zeit, viel Preis-Bewusstsein</div>
<div class="persona-card-traits">
<div class="persona-card-trait"><span class="persona-card-trait-icon">⏱</span><span>Schnelle Planung</span></div>
<div class="persona-card-trait"><span class="persona-card-trait-icon">📊</span><span>Kostenmanagement</span></div>
<div class="persona-card-trait"><span class="persona-card-trait-icon">🔄</span><span>Wiederholte Orte</span></div>
</div>
</div>
<div class="persona-card">
<div class="persona-card-icon">👨👩👧👦</div>
<div class="persona-card-title">Familien-Planer</div>
<div class="persona-card-desc">Sicherheitsorientiert, planungsintensiv, kinderfreundlich</div>
<div class="persona-card-traits">
<div class="persona-card-trait"><span class="persona-card-trait-icon">🗓</span><span>Vorabplanung</span></div>
<div class="persona-card-trait"><span class="persona-card-trait-icon">🤝</span><span>Kooperation</span></div>
<div class="persona-card-trait"><span class="persona-card-trait-icon">⭐</span><span>Geprüfte Orte</span></div>
</div>
</div>
</div>
</div>
