# UX/CRO-AUDIT sprachakademie-beispiel.at — TECHNISCHES KONZEPT

**Datum:** 23.07.2026  
**Website:** https://sprachakademie-beispiel.at  
**Ziel:** Konversion um +30–50 % in 12 Wochen steigern  
**Aktuelle Bewertung:** 54/100

---

## PHASE 1: DRINGEND (Woche 1–2)

### Abschnitt 1: Sozialen Beweis ergänzen (Bewertungen)

**Aufgabe:**
1. 5–7 Bewertungen von Studierenden per E-Mail erbitten
2. Foto der Teilnehmerin/des Teilnehmers einholen (Einverständnis erforderlich)
3. Auf der Startseite oberhalb von „Preis anfragen" ergänzen
4. Jede Bewertung: 2–3 Sätze + Sterne (★★★★★) + Foto + Name

**Beispiel-Markup:**
```html
<div class="testimonial">
  <div class="stars">★★★★★</div>
  <p>„Hervorragende Lehrmethode. Nach 4 Wochen konnte ich bereits auf Deutsch sprechen. Sehr zu empfehlen!"</p>
  <div class="author">
    <img src="foto.jpg" alt="Teilnehmerin">
    <p><strong>Teilnehmerin</strong> — Kurs A1</p>
  </div>
</div>
```

**Prüfung:** Auf der Startseite sind ohne Scrollen 5–7 Bewertungen sichtbar. Fotos sind geladen und sichtbar.

**Dauer:** 3–5 Tage (Bewertungen sammeln)

---

### Abschnitt 2: Preise auf der Startseite zeigen

**Aufgabe:**
Preistabelle oberhalb oder neben dem Anfrageformular ergänzen.

**Tabelle (Beispiel):**
```
Niveau     | Intensiv (4 Wochen) | Regulär (10 Wochen)
A1–A2      | €450                | €500
B1–B2      | €500                | €600
C1–C2      | €550                | €650

+ „Erste Stunde kostenlos" bei jeder Zeile
```

**Wo einfügen:** Oberhalb des Formulars „Preis anfragen" (oder daneben).

**Prüfung:** Tabelle ist beim Laden sichtbar. Auf Mobilgeräten: horizontales Scrollen oder responsives Layout.

**Dauer:** 2–3 Tage

---

### Abschnitt 3: Mobile Version korrigieren

**Aufgabe 1:** Adresse und Telefon → anklickbare Links auf Mobilgeräten

```html
<!-- VORHER -->
<p>Adresse: [Straße, Hausnummer], Wien</p>

<!-- NACHHER -->
<a href="https://maps.google.com/maps?q=[Adresse]">
  [Straße, Hausnummer], Wien
</a>
```

**Aufgabe 2:** Button „Preis anfragen" → volle Breite auf Mobilgeräten

```css
@media (max-width: 768px) {
  .cta-button {
    width: 100%;
    display: block;
    margin: 20px 0;
  }
}
```

**Aufgabe 3:** Formular auf iPhone 6/7/SE testen

- Das E-Mail-Feld soll die @-Tastatur aufrufen
- Alle Buttons müssen anklickbar sein (mindestens 48×48 px)
- kein horizontales Scrollen

**Prüfung:** Auf dem iPhone öffnen. Formular vollständig ausfüllen. Absenden.

**Dauer:** 3–5 Tage

---

### Abschnitt 4: Block „So funktioniert es" ergänzen

**Aufgabe:** Visueller 5-Schritte-Trichter über dem Hauptformular.

**Beispiel (SVG oder Bild):**
```
Schritt 1: Niveau wählen (A1–C2)
  ↓
Schritt 2: Format wählen (Gruppe/Einzel/Intensiv)
  ↓
Schritt 3: Zeit wählen (morgens/abends/Wochenende)
  ↓
Schritt 4: Erste Stunde buchen (kostenlos)
  ↓
Schritt 5: Bezahlen und starten!
```

**Wo einfügen:** oberhalb des Formulars „Preis anfragen"

**Prüfung:** Block ist auf der Startseite sichtbar, an Mobilgeräte angepasst.

**Dauer:** 2 Tage

---

## PHASE 2: GESCHWINDIGKEIT (Woche 3–4)

### Abschnitt 5: Bilder in WebP konvertieren

**Aufgabe:** Alle JPG → WebP (mit JPG-Fallback für ältere Browser)

```html
<picture>
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung">
</picture>
```

**Prüfung:**
```bash
curl -I https://sprachakademie-beispiel.at/bild.webp
# Antwort: 200 OK, Typ: image/webp
```

**Dauer:** 3–4 Tage

---

### Abschnitt 6: Lazy-Load für Bilder aktivieren

**Aufgabe:** Alle Bilder unterhalb des sichtbaren Bereichs → loading="lazy"

```html
<img src="bild.jpg" alt="Beschreibung" loading="lazy">
```

**Prüfung:** DevTools → Netzwerk → nach Bildern filtern, prüfen, dass Bilder unterhalb des Folds beim Scrollen laden.

**Dauer:** 1–2 Tage

---

### Abschnitt 7: JS und CSS minifizieren

**Aufgabe:** Alle .js- und .css-Dateien minifizieren (Kommentare und Leerzeichen entfernen)

**Werkzeuge:** Webpack, UglifyJS oder ein WordPress-Plugin.

**Prüfung:**
```bash
curl https://sprachakademie-beispiel.at/style.css | wc -c
# vorher: 50 KB → nachher: 15 KB (70 % kleiner)
```

**Dauer:** 2–3 Tage

---

### Abschnitt 8: Browser-Caching einrichten

**Aufgabe:** Cache-Control-Header für 30 Tage setzen

**In .htaccess (Apache):**
```
<FilesMatch "\.(jpg|jpeg|png|gif|webp|css|js)$">
  Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
```

**Prüfung:**
```bash
curl -I https://sprachakademie-beispiel.at/style.css | grep Cache-Control
# Antwort: Cache-Control: max-age=2592000, public
```

**Dauer:** 1 Tag

---

## PHASE 3: VERTRAUEN UND TIEFE (Woche 5–8)

### Abschnitt 9: Erfolgsgeschichten ergänzen (3–4 Storys)

**Aufgabe:** Auf einer eigenen Seite oder der Startseite — Geschichten von Studierenden

**Struktur einer Story:**
- Name + Foto (Einverständnis erforderlich)
- Ausgangsniveau (z. B. A1)
- Ergebnis (ÖSD-B1-Prüfung bestanden)
- Geschichte in 3–5 Sätzen (Problem → Lösung → Ergebnis)

**Beispiel:**
```
„Ein Teilnehmer kam beruflich nach Österreich, ohne ein Wort Deutsch zu können.
Er lernte 10 Wochen an der Akademie auf Niveau B1.
Ergebnis: bestand die ÖSD-Prüfung mit 85 Punkten — und bekam eine Stelle in einem österreichischen Unternehmen.
Heute spricht er sicher und liest sogar deutsche Zeitungen!"
```

**Prüfung:** Storys sind auf der Website sichtbar, Fotos geladen.

**Dauer:** 1–2 Wochen (Informationssammlung bei Studierenden)

---

### Abschnitt 10: FAQ erstellen (20+ Fragen)

**Aufgabe:** Seite /faq/ mit häufig gestellten Fragen

**Beispielfragen:**
- Wie lange dauert es, bis man Deutsch kann?
- Kann man online lernen?
- Welches Ergebnis ist nach 4 Wochen realistisch?
- Gibt es eine Probestunde?
- Können Stunden verschoben werden?
- Wie wird bezahlt?
- Welche Garantien gibt es?

**Format:** Q&A, jede Frage öffnet sich per Klick (Akkordeon)

**Prüfung:** Alle 20+ Fragen sind sichtbar, per Klick öffnet sich die Antwort.

**Dauer:** 3–5 Tage

---

### Abschnitt 11: Garantien ergänzen

**Aufgabe:** Auf der Startseite oder in der FAQ — Rückerstattungsbedingungen

**Beispieltext:**
```
„100 % Geld-zurück-Garantie für die ersten 2 Wochen.
Wenn der Kurs nicht passt, erstatten wir den vollen Betrag.
Ohne Wenn und Aber."
```

**Wo einfügen:** oberhalb oder unterhalb der Preistabelle.

**Prüfung:** Text ist auf der Startseite sichtbar.

**Dauer:** 1 Tag

---

### Abschnitt 12: Zertifikate und Auszeichnungen ergänzen

**Aufgabe:** Logos von ÖSD, Telc, Goethe-Institut (sofern vorhanden)

**Wo einfügen:** im Footer oder oberhalb der Preistabelle

**Prüfung:** Logos sind sichtbar und verlinken zu den offiziellen Websites.

**Dauer:** 1 Tag

---

## PHASE 4: MESSUNG UND OPTIMIERUNG (Woche 9–12, laufend)

### Abschnitt 13: Konversions-Tracking einrichten

**Aufgabe:** In Google Analytics Events erfassen

```javascript
// Klick auf CTA
gtag('event', 'click_cta', {
  'event_category': 'engagement',
  'event_label': 'main_form'
});

// Formular abgesendet
gtag('event', 'form_submit', {
  'event_category': 'conversion',
  'event_label': 'main_form'
});
```

**Prüfung:** In GA sind die Events „click_cta" und „form_submit" in Echtzeit sichtbar.

**Dauer:** 2–3 Tage

---

### Abschnitt 14: A/B-Tests

**Aufgabe:** CTA auf Konversion testen

**Variante A (aktuell):** „Preis anfragen"
**Variante B:** „Kostenlose Probestunde starten"
**Variante C:** „In 30 Sekunden anmelden"

**Durchführung:**
- Google Optimize oder VWO
- 50/50-Traffic-Verteilung
- Mindestdauer: 2 Wochen

**Prüfung:** In der Analytics sind Konversionen für jede Variante sichtbar.

**Dauer:** 2–3 Wochen Testlaufzeit

---

## ABSCHLUSSPRÜFUNG

✓ Auf der Startseite sichtbar: Preise, 5+ Bewertungen, Trichter, CTA  
✓ Mobile Version ohne Probleme (Kontakte anklickbar)  
✓ Ladezeit 0,3–0,5 Sek. (vorher 0,8)  
✓ Analytics erfasst Events  
✓ Monatlicher Konversionsbericht liegt vor

**Erwartetes Ergebnis nach 12 Wochen:** +30–50 % Anfragen über die Website