Smart Tech Repairs background

Branding, UX/UI und Entwicklung: die Transformation von Smart Tech Repairs

Smart Tech Repairs website on a laptop

Kunde

•Smart Tech Repairs

Zeitrahmen

•25 Tage

Lieferung

•UX-Research & UI-Design (Figma)

•Shopify-Store

•Individuelle Node.js-App

•SEO-optimierte Websitestruktur

AUSGANGSLAGE

Die WordPress-Website von Smart Tech Repairs war langsam und schwer zu bedienen. Kunden hatten Mühe, das richtige Gerät und die passende Reparatur zu finden, während der Buchungsprozess unnötige Reibungsverluste erzeugte. Der Kunde benötigte eine Website, die den Erwartungen des britischen Marktes entspricht.

LÖSUNG

Wir haben die gesamte Customer Journey neu gestaltet und die Website auf Shopify neu aufgebaut. Klare Gerätekategorien, Reparaturoptionen und ein fokussierter Buchungsablauf helfen Kunden, reibungslos vom Problem zur bestätigten Reparatur zu gelangen. Ein massgeschneidertes Theme ermöglicht es dem Team zudem, Services, Preise und Inhalte eigenständig zu pflegen.

ÜBERBLICK

Smart Tech Repairs repariert Smartphones, Tablets, Laptops und Spielekonsolen in Norwich. SDS lieferte UX-Research, UI-Design, Website-Texte, SEO und einen vollständigen Shopify-Relaunch in 25 Tagen. Die neue Website unterstützt Reparaturbuchungen für lokale Kunden und präsentiert gleichzeitig den Einsendeservice sowie Geschäftskundenleistungen.

Technologien

  • HTML ( Frontend )HTML ( Frontend )
  • CSS ( Frontend )CSS ( Frontend )
  • Ajax ( Frontend )Ajax ( Frontend )
  • jQueryjQuery
  • Shopify Liquid ( Templating )Shopify Liquid ( Templating )
  • Node.js ( Backend )Node.js ( Backend )

Design-Software

  • FigmaFigma
  • Adobe PhotoshopAdobe Photoshop
  • Adobe IllustratorAdobe Illustrator

Deployment & Server-Administration

  • Amazon Web ServicesAmazon Web Services
  • EC2-InstanzEC2-Instanz

LEISTUNGEN

Wir begleiteten den Relaunch von der Recherche bis zum Go-Live. UX-Research und UI-Design gestalteten einen klareren Reparaturablauf, während Website-Texte, SEO und individuelle Shopify-Entwicklung die Migration von WordPress unterstützten. Das Ergebnis ist eine Plattform, auf der Kunden Reparaturen schnell finden und direkt buchen.

UX-Research
UI-Design
Website-Texte
Shopify-Entwicklung
WordPress-Migration
SEO

UNSERE ENTSCHEIDUNG

Kunden wissen meist, welches Gerät defekt ist – nicht, welche Unterseite sie besuchen müssen. Wir machten die Geräteauswahl zum Ausgangspunkt und strukturierten das Erlebnis entlang der nächsten Entscheidungen: Reparatur wählen, Details prüfen und buchen. Das bestehende Erscheinungsbild und Bildmaterial des Kunden wurden in ein sauberes, intuitiv bedienbares Design überführt.

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
04IKONOGRAFIE & BILDSPRACHE
IKONOGRAFIE & BILDSPRACHE
1. Icon-Stil2. Illustration
1. Icon-Stil2. Illustration
Decorative background glow
01
BRANDING
Smart Tech Repairs branding banner
02
FARBPALETTE
181818F5F5F7FFFFFF

FARBE

03

TYPOGRAFIE

LES- BARKEIT

SchriftartFigtree
Extra LeichtSmart Tech Repairs

Der schnelle braune Fuchs springt über den faulen Hund

NormalSmart Tech Repairs

Der schnelle braune Fuchs springt über den faulen Hund

MittelSmart Tech Repairs

Der schnelle braune Fuchs springt über den faulen Hund

HalbfettSmart Tech Repairs

Der schnelle braune Fuchs springt über den faulen Hund

FettSmart Tech Repairs

Der schnelle braune Fuchs springt über den faulen Hund

04

IKON-STIL

trash
edit
user
star
calendar-fill
calendar-fill
calendar-fill
calendar-fill
calendar-fill

UX/UI Design

Wir haben die Website um die Aufgaben herum gestaltet, die Kunden schnell erledigen möchten. Einheitliche Gerätekarten, transparente Reparaturoptionen und sichtbare Buchungsaktionen erleichtern die Navigation durch den umfangreichen Servicekatalog auf Desktop und Mobilgeräten.

UI-Komponenten

w1
widget 1
widget 2
widget 3

Website-Ansicht

Die Website präsentiert die Reparaturdienste von Smart Tech Repairs in einem klar strukturierten Layout, sodass Kunden den passenden Service schnell finden, Optionen vergleichen und direkt buchen oder Kontakt aufnehmen können.

Loopers landing page on laptop

Hauptseiten

Reparaturseite

Kunden können die verfügbaren Reparaturen für ihr Gerät einsehen und die gewünschte Leistung direkt auswählen.

Reparaturseite

Warenkorbseite

Ausgewählte Reparaturen und Buchungsdetails werden vor dem Bezahlvorgang übersichtlich zusammengeführt.

Warenkorbseite

Blog

Das Team kann Reparaturratgeber und Neuigkeiten über einen flexibel editierbaren Bereich veröffentlichen.

Blog

Kontakt

Kunden können Anfragen stellen oder das Reparaturzentrum in Norwich direkt kontaktieren.

Kontakt

Mobile Ansicht

Customer app hero

Das mobile Erlebnis hält Geräteauswahl und Reparaturbuchung auch auf kleinen Bildschirmen intuitiv zugänglich. Kunden können Services durchstöbern, ihre Auswahl prüfen und zur Kasse gehen, ohne den Überblick zu verlieren.

Home
Map
Booking
Schedule
Fare summary
Driver info
Live map

ENTWICKLUNG

Wir haben die neu gestaltete Website als massgeschneidertes Shopify-Theme mit Liquid, HTML, CSS, Ajax und jQuery realisiert, ergänzt durch Node.js für Backend-Funktionen. Der Relaunch umfasst Geräteauswahl, Reparaturoptionen, Checkout und alle begleitenden Seiten. Smart Tech Repairs kann Geräte, Preise, Services und Blog-Inhalte eigenständig pflegen.

Leistungskennzahlen (KPIs)

Seitenlade-Performance

LadezeitVorher
3.8s
LadezeitNachher
1.6s

Responsives Erlebnis

Usability-ScoreVorher
68
Usability-ScoreNachher
94

SEO-Performance

Audit-ScoreVorher
62
Audit-ScoreNachher
91

Systemzuverlässigkeit

VerfügbarkeitVorher
99.2%
VerfügbarkeitNachher
99.9%

Buchungs-Konversionsrate

RateVorher
1.8%
RateNachher
2.6%

Wichtige Herausforderungen und Lösungen bei der Entwicklung

01Herausforderung: Inkonsistente visuelle Identität
02Herausforderung: Mangelhafte mobile Responsivität
03Herausforderung: Ein CMS zur eigenständigen Verwaltung
development

Problem: Die alte Website wies uneinheitliche Layouts und Stile auf, wodurch das Nutzererlebnis fragmentiert wirkte.

Lösung: Wir übertrugen die bestehende Identität in ein konsistentes Designsystem mit wiederverwendbaren Komponenten auf der gesamten neuen Shopify-Website.

01

Problem: Das frühere Layout war auf kleineren Bildschirmen schwer bedienbar, besonders bei der Geräte- und Reparaturauswahl.

Lösung: Wir bauten die Layouts mobiloptimiert neu auf – mit responsiver Navigation, Gerätekarten und auf verschiedenen Displaygrössen getesteten Buchungsschritten.

02

Problem: Geräte, Preise und Serviceinformationen liessen sich auf der alten Website nur mit grossem Aufwand aktualisieren.

Lösung: Wir strukturierten das Shopify-Theme mit editierbaren Abschnitten, sodass das Team Services, Preise und Blog-Artikel ohne Entwicklerunterstützung pflegen kann.

03

Technische Architektur & Tech-Stack

Shopify Liquid

Individuelle, editierbare Theme-Vorlagen.

HTML und CSS

Responsive Seitenstruktur und Gestaltung.

Ajax und jQuery

Interaktive Auswahl und dynamisches Interface-Verhalten.

Node.js

Backend-Funktionalität.

tech frame

Fazit

Smart Tech Repairs benötigte eine Website, die Reparatur-Buchungen spürbar vereinfacht. SDS gestaltete die Customer Journey neu, migrierte die Website von WordPress zu Shopify und lieferte eine individuelle, einfach zu verwaltende Plattform in 25 Tagen. Kunden haben nun einen klaren Weg von der Geräteauswahl zum Checkout, und das Team kann Services und Inhalte stets aktuell halten.

Bereit loszulegen?