Race Media background

Eine Branding-, UX/UI- & Entwicklungstransformation für The Race Media

Kontaktieren Sie uns

Race Media website on a laptop

Kunde

•The Race Media

Zeitrahmen

•15 Tage

Lieferung

•UX-Forschung & UI-Design (Figma)

•Vollständige Website-Entwicklung

•AWS-Bereitstellung

Website besuchen

AUSGANGSLAGE

The Race Media verfügte über ein starkes Dienstleistungsangebot, doch ihre digitale Präsenz spiegelte dies nicht wider. Die bestehende Website mangelte an visueller Konsistenz, bot eine schlechte Nutzererfahrung auf verschiedenen Geräten und vermittelte die Energie und Autorität der Marke auf dem Schweizer Social-Media-Markt nicht. Besucher hatten Schwierigkeiten, das Wertversprechen der Agentur auf einen Blick zu verstehen, was zu verpassten Konversionen und schwachen ersten Eindrücken führte.

LÖSUNG

Wir gingen dies als vollständige digitale Transformation an, beginnend mit der Markenidentität und weiter über UX-Strategie, UI-Design und Entwicklung. Die neue Website gibt The Race Media eine klare, moderne Präsenz, die ihre Dienstleistungen deutlich kommuniziert, Vertrauen bei potenziellen Kunden aufbaut und Nutzer auf natürliche Weise zu einer Beratung führt.

ÜBERBLICK

The Race Media ist eine Schweizer Full-Service-Social-Media-Agentur, gegründet im Jahr 2025, spezialisiert auf Content-Erstellung, Videoproduktion, Performance-Marketing und Social-Media-Management für KMU in der ganzen Schweiz. Trotz ihres überzeugenden Dienstleistungsangebots fehlte ihrer WordPress-basierten Website der visuelle Schliff und die strukturelle Klarheit, um Besucher in Kunden umzuwandeln. Unsere Agentur wurde beauftragt, das UI/UX zu überarbeiten und eine neue Designsprache durch verfeinerte Farbpaletten, zielgerichtete Typografie und ein intuitives Layout-System zu schaffen – alles innerhalb der bestehenden WordPress- und PHP/JS/MySQL-Umgebung umgesetzt.

Technologien

WordPress (CMS)
CSS ( Frontend )
MySQL ( Datenbank )
Javascript ( Frontend )
PHP ( Backend )

Design-Software

Figma
Adobe Photoshop
Adobe Illustrator

Bereitstellung & Serveradministration

Amazon Web Services
EC2-Instanz
S3-Buckets

LEISTUNGEN

UNSERE ENTSCHEIDUNG

The Race Media ist 2025 gegründet worden. Das bedeutet: kein Legacy-System, kein alter Content — aber auch noch kein Vertrauen im Markt. Die Aufgabe war nicht technisch, sie war positionierungstechnisch. Wir hätten auf ein moderneres Stack wechseln können — Next.js, ein Headless CMS, eine neue Infrastruktur. Wir haben das bewusst nicht getan. Der bestehende WordPress- und PHP/MySQL-Stack funktioniert zuverlässig, das Team kennt ihn, und ein Technologiewechsel hätte Monate gebraucht, die Race Media nicht hatte. Stattdessen: maximaler Impact durch Design und Struktur — innerhalb der vorhandenen Umgebung, in 15 Tagen.

Grafikdesign

01BRANDING

BRANDING

02FARBPALETTE

FARBPALETTE

1. Primärfarbe2. Sekundärfarbe3. Barrierefreiheit (Kontrastverhältnis)

1. Primärfarbe2. Sekundärfarbe3. Barrierefreiheit (Kontrastverhältnis)

03TYPOGRAFIE

TYPOGRAFIE

1. Schriftauswahl2. Lesbarkeit

1. Schriftauswahl2. Lesbarkeit

The Race Media branding banner

The Race Media branding top right

dots behind

The Race Media branding bottom right

Decorative background glow

FARBE

PrimaryPhosphateRRSolid

SecondaryInter

font preview

Extra LeichtThe Race Media

Der schnelle braune Fuchs springt über den faulen Hund

RegularThe Race Media

Der schnelle braune Fuchs springt über den faulen Hund

MediumThe Race Media

Der schnelle braune Fuchs springt über den faulen Hund

HalbfettThe Race Media

Der schnelle braune Fuchs springt über den faulen Hund

FettThe Race Media

Der schnelle braune Fuchs springt über den faulen Hund

UX/UI Design

Jeder Bildschirm der Website von The Race Media wurde in Figma nach einem strukturierten UX-Prozess gestaltet – von der User-Flow-Kartierung und dem Wireframing bis hin zum High-Fidelity-UI.

UI-Komponenten

Desktop-Ansicht

Das Desktop-Layout wirkt strukturiert und selbstbewusst, mit einem starken Hero-Bereich, logischem Service-Fluss und klaren Call-to-Actions. Saubere Typografie und hochwertige Projektbilder verleihen der Website einen professionellen Ton, der den Servicestandards von The Race Media entspricht.

Race Media desktop view

Hauptseiten

Unsere Arbeit

Ein skalierbares Video-Portfolio-Raster, das echte Kundenergebnisse präsentiert. Jeder Eintrag wird über das WordPress-CMS verwaltet, sodass das Team neue Arbeiten einfach hinzufügen kann, ohne Code anzufassen.

Unsere Arbeit

Über uns

Eine strukturierte Seite, die die Positionierung, Werte und Alleinstellungsmerkmale der Agentur präsentiert und darauf ausgelegt ist, Vertrauen aufzubauen und die selbstbewusste, kundenorientierte Identität der Marke zu kommunizieren.

Über uns

Karriere

Ein übersichtliches Layout, das offene Stellen mit erweiterbaren Einträgen präsentiert, die mutige Kultur der Agentur widerspiegelt und dem Team ermöglicht, Stellenausschreibungen unabhängig über WordPress zu verwalten.

Karriere

Kontakt

Ein minimales, ablenkungsfreies Kontaktformular, entwickelt mit PHP und MySQL, um Abbrüche zu reduzieren und die Besucherabsicht in direkte Kundenanfragen umzuwandeln.

Kontakt

Mobile Web-Ansicht

Race Media Mobile View

Jeder Abschnitt wurde so entwickelt, dass er sich natürlich an kleinere Bildschirme anpasst. Navigation, Inhaltslayout und CTAs reagieren alle sauber auf Mobilgeräte und bieten Nutzern unabhängig vom Gerät die gleiche Qualitätserfahrung.

Side 1

Side 2

Side 3

Screen 1

Screen 2

Screen 3

Screen 4

ENTWICKLUNG

Wir haben die Website mit einer individuellen WordPress-Theme-Entwicklung erstellt, mit handgeschriebenem PHP, HTML und CSS, um die Figma-Designs präzise umzusetzen. JavaScript wurde gezielt eingesetzt, um die Website schnell und fokussiert zu halten.

Leistungsmetriken (KPIs)

Die Website wurde von Anfang an mit Performance als Kernanforderung entwickelt, nicht als etwas, das nach dem Launch angegangen wurde.

Seitenladeleistung

LCP von 3,5s auf 1,1s reduziert – 68% schnellere Ladezeit.

LadezeitVorher

3,5s

LadezeitNachher

1,1s

Responsives Design

12 mobile Layout-Fehler korrigiert, um 100% Usability auf allen Bildschirmgrössen zu erreichen.

UsabilityVorher

40%

UsabilityNachher

90%

SEO-Optimierung

SEO-Score von 65 auf 94 verbessert und organische Sichtbarkeit um 115% gesteigert.

SEO-ScoreVorher

40%

SEO-ScoreNachher

99%

Systemzuverlässigkeit

Latenz von 195ms auf 38ms gesenkt bei 99,99% Uptime.

ZuverlässigkeitVorher

40%

ZuverlässigkeitNachher

99%

Lead-Wachstum

22,5% MoM-Steigerung bei Anfragen und Verdopplung der Conversion-Rate.

MoMVorher

10%

MoMNachher

22,5%

Wichtige Entwicklungs-Herausforderungen & Lösungen

01Herausforderung: Inkonsistente visuelle Identität

02Herausforderung: Schlechte mobile Reaktionsfähigkeit

03Herausforderung: Aufbau eines CMS, das der Kunde selbstständig verwalten kann

Problem: Keine einheitliche Designsprache auf den Seiten, was die Marke fragmentiert wirken liess.

Lösung: Ein zentralisiertes Design-System mit wiederverwendbaren CSS-Variablen sorgte für vollständige visuelle Konsistenz.

01

Problem: Das ursprüngliche Layout brach auf kleineren Bildschirmen zusammen, ohne einen Mobile-First-Ansatz.

Lösung: Neuentwicklung mit CSS-Grid und Flexbox mit benutzerdefinierten Breakpoints, getestet auf allen Geräten.

02

Problem: Die vorherige Website war schwer zu aktualisieren, was Inhalte im Laufe der Zeit veraltet liess.

Lösung: Wir haben das WordPress-Backend mit klar beschrifteten bearbeitbaren Blöcken strukturiert und dem Race-Media-Team die volle Kontrolle über Inhalte ohne technische Abhängigkeit gegeben.

03

development

Problem: Keine einheitliche Designsprache auf den Seiten, was die Marke fragmentiert wirken liess.

Lösung: Ein zentralisiertes Design-System mit wiederverwendbaren CSS-Variablen sorgte für vollständige visuelle Konsistenz.

01

Problem: Das ursprüngliche Layout brach auf kleineren Bildschirmen zusammen, ohne einen Mobile-First-Ansatz.

Lösung: Neuentwicklung mit CSS-Grid und Flexbox mit benutzerdefinierten Breakpoints, getestet auf allen Geräten.

02

Problem: Die vorherige Website war schwer zu aktualisieren, was Inhalte im Laufe der Zeit veraltet liess.

Lösung: Wir haben das WordPress-Backend mit klar beschrifteten bearbeitbaren Blöcken strukturiert und dem Race-Media-Team die volle Kontrolle über Inhalte ohne technische Abhängigkeit gegeben.

03

Technische Architektur & Tech-Stack

Aufgebaut auf einem sauberen, wartbaren Stack, der für Performance und langfristige Benutzerfreundlichkeit gewählt wurde.

WordPress

Gibt dem Kunden volle redaktionelle Kontrolle ohne technische Abhängigkeit.

PHP

Treibt benutzerdefinierte Templates und dynamische Seitenfunktionalität an.

MySQL

Strukturierte relationale Datenbank, die zuverlässig alle Benutzerdaten und Anfragen verwaltet.

JavaScript

Verwaltet interaktive Elemente und sanfte Übergänge ohne unnötige Last hinzuzufügen.

tech frame

Fazit

Eine neue Agentur hat nur einen ersten Eindruck. Kein Portfolio, das für sich spricht. Keine Jahre am Markt, die Vertrauen aufbauen. Was bleibt: die Website — und ob sie in drei Sekunden kommuniziert, dass man hier in guten Händen ist.

Für The Race Media war das der Auftrag: eine digitale Präsenz schaffen, die die Energie und Professionalität der Marke sofort rüberbringt — ohne dass der Besucher lange suchen muss. Neue Designsprache, klare Struktur, konversionsorientiertes Layout. In 15 Tagen.

The Race Media zeigt, was möglich ist, wenn man nicht auf ein grosses Budget oder jahrelange Markenpräsenz wartet. Für junge Unternehmen, die jetzt professionell wirken müssen: Das ist der Beweis, dass es geht.

Bereit loszulegen?