Responsive Powergap Shop

Projekt Hausschuh Shop

Hausschuh Shop - iPad links

Im Mai 2019 beauftragte Hausschuh.com FRASCHE.de mit einer Überprüfung ihrer Website. Grund hierfür war, Schwachstellen aufzuspüren, um den Powergap Responsive Shop performanter zu gestalten.

Dem Unternehmen war bewusst, dass an ihrem Shop einiges getan werden muss, um ihren Shop so zu präsentieren, dass Kunden Spaß beim Einkaufen haben, alle Hindernisse für ein einfaches Usability ausgeräumt werden und dass alle Seiten ihres Shops auf allen Endgeräten perfekt dargestellt werden.

Für die Investition eines auf ihren Ansprüchen zugeschnittenen Online-Shops erwartete die Geschäftsleitung eine deutliche Umsatzsteigerung, die Stand Oktober 2019 sogar übertroffen wurde.

Hausschuh.com hat schon vor Jahren auf einen Powergap Responsive Shop umgestellt, ohne sich darüber völlig im Klaren zu sein, dass ein Responsive Shop wesentlich tiefere HTML und CSS Kenntnisse voraussetzt.

Ein so komplexes Shopsystem, mit dem fast alles möglich ist, fordert einen Spezialisten, der die Wünsche der Shopbetreiber umsetzt. Dafür setzen die meisten Shopper eigenen Mitarbeiter ein, da sie selbst entweder nicht über das notwendige Knowhow verfügen oder primär die kaufmännischen Angelegenheiten ihres Unternehmens angehen müssen.

Auch Haussschuh.com hatte einen solchen Mitarbeiter, der aus dem Unternehmen im 2.Quartal 2019 ausschied. Hausschuh.com hat diese Stelle dann nicht mehr neu besetzt, sondern die Aufgaben komplett an FRASCHE.de outgesourct.

Das war zu Anfang nicht so geplant, hat sich aber dadurch ergeben, dass das Unternehmen mit den Leistungen und den Preisen von FRASCHE.de so zufrieden war, dass sie letztendlich den ganzen Shop komplett überarbeiten ließen.

Wie der Geschäftsführer von Hausschuh.com gerne bestätigen wird, hat sich diese Investition nicht nur amortisiert, sondern bietet ihm nun auch alle Möglichkeiten, neue Ideen auszutesten, um so für weitere Umsatzsteigerungen zu sorgen.

Responsive Shop Design

Perfektes Einkaufen mit jedem Gerät

Detail

Sortiment

Hausschuh Shop - Sortiment

Hauptsächlich für bezahlte Werbekampagnen wurde die Seite „Unser Sortiment“ erstellt. Sie soll dem Kunden einen Überblick für alle Produktarten des gesamten Sortiments verschaffen. Dies ist gerade bei bezahlter Werbung von größter Wichtigkeit, damit eine vernünftige Conversion Rate realisiert werden kann. Selbstverständlich wurde auch diese Seite sowohl für PCs und Tablets als auch für Handys optimiert.

Detail

Suchergebnis

Hausschuh Shop - Suchergebnis

Suchergebnisse sollen dem Kunden helfen, genau das zu finden, was er sucht. Nur die Shopbetreiber wissen, wie sie ihre Produkte so kategorisieren können, damit Kunden sich leichter in ihrem Angebot zurechtfinden. Um die Suchergebnisse dazustellen, bietet Powergap mit der Banner Funktion eine geniale Möglichkeit, die Ergebnisse bestmöglich zu präsentieren. Wie man diese Seiten interessant gestaltet und auf allen Endgeräten bestmöglich ausgibt, zeigen die Suchergebnisse, die für Hausschuh.com von FRASCHE.de erstellt wurden.

Detail

Artikel Detail

Hausschuh Shop - Artikeldetails

Hausschuh.com hat eine Vielzahl von Varianten. Neben der Größe gibt es auch Farben. Untergebracht wurden bis zu 7 Artikelansicht Bilder, die für jede Farbe vorhanden sind. Außerdem gibt es eine Beschreibung, Kundenbewertungen und Fragen, die man in der Artikeldetailansicht direkt an den Betreiber senden kann. Selbstverständlich sind auch Empfehlungen untergebraucht, Merkerliste eingebaut und auch die Artikel Vor-Zurück Funktion wurde eingebaut. Diese ermöglicht dem Kunden ein einfaches Blättern durch alle Artikel dieser Produktgruppe. Auch die Artikeldetail Ansicht ist voll Responsive und sieht auch auf dem Handy klar strukturiert aus.

Detail

HTML Include

Hausschuh Shop - Kontaktformular

Alle HTML-Include Seiten sind für alle Endgeräte optimiert. Ziel war die Sicherstellung, dass alle Elemente wie Tabellen, Texte, Aufzählungen, Bilder, Formulare, Banner usw. sauber angeordnet und einfach zu lesen sind.

Dafür wurden für die Tabellen spezielle Lesehilfen eingebaut, die sich in der Praxis besonders bewährt haben. Formulare wurden übersichtlich und klar gestaltet, damit der Kunde so einfach wie möglich Kontakt aufnehmen kann.

Banner

Banner sollen animieren! Nicht jedes Bild und jede Grafik erfüllt diese Anforderung. Deshalb wurden bei Hausschuh.com zunächst eigene Corporate Design Vorgaben entwickelt, an die sich alle Banner und alle Grafiken orientieren. Dadurch entstand ein einheitliches Design, dass den Aufbau weiterer Seiten wesentlich preiswerter macht. Zudem ist der Wiedererkennungseffekt auf allen Seiten gegeben, so dass auch einzelne Seiten mit Google Ads oder anderen Werbeplattformen effizienter beworben werden können.

Responsive Shop Design

Responsive & Tests

Die Liste der Reparaturen und Überarbeitungen war lang! Fast alle Funktionen waren nicht richtig responsive, wie die Ansichten des Shops auf echten Endgeräten gezeigt haben.

Responsive muss immer auf echten Endgeräten getestet werden, denn so präsentiert sich der Shop den Kunden wirklich. Alle erhältlichen Responsive Simulatoren liefern derzeit keine brauchbaren Ergebnisse, was Tests auf verschiedenen (echten) Handys und Tablets (Apple, Android…) unverzichtbar macht.

Responsive Technik

Desktop & Handy

PCs zeigen Internetseiten in Querformat (Landscape), Handys dagegen in Hochformat (Portrait).

Banner werden meist im Querformat gestaltet, was dazu führt, dass sie auf Handys stark verkleinert angezeigt werden.

Um dieses Problem zu umgehen, werden für Hausschuh.com große Banner immer in 2 Versionen (Hochformat & Querformat) erstellt, die automatisch ausgetauscht werden.

Hausschuh.com Starteite

Hausschuh.com

Startseite

Die Startseite ist der Einstieg zum Shop. Sie ist i.d.R. die erste Seite, die vom User gesehen wird und trägt maßgeblich zur Entscheidung bei, ob der Interessent sich weiter im Shop bewegt, oder den Online Shop schon an dieser Stelle wieder verlässt.

Deshalb muss sie für Interesse sorgen, darf nicht überladen wirken und soll alle relevanten Informationen bieten, die Kunden von einem modernen und vertraueswürdigen Shop erwarten.

Neben diesen Kriterien hat Hausschuh.com auch besonders Wert auf schnelle Ladezeiten gelegt.

Um ausreichend SEO-Texte zu liefern, Kunden aber nicht mit zu langen Texten unnötig zu belasten, ist die Funktion „Weiteren Text anzeigen“ eingebaut. Somit sind genügend Suchmaschinen-relevante SEO-Texte vorhanden, dennoch wirkt die Seite durch moderat angezeigtem Text nicht zu textlastig.

Alle wichtigen Themen sind auf der Startseite interessant aufbereitet, so dass User sich leicht zurechtfinden. Die Querformat-Bilder des Main-Sliders werden auf mobilen Endgeräten mit Hochformat-Bildern ausgetauscht, so dass sie auch auf Handys die wichtigsten Werbebotschaften optimal übermitteln.

Hausschuh Shop Details

Markenauswahl

Hausschuh.com war es wichtig, dass die Marken nicht alphabetisch sortiert werden, sondern so, wie es sich das Unternehmen wünscht. Da es durchaus vorkommen kann, dass die Anordnung der Marken zu einem späteren Zeitpunkt geändert werden, haben wir die Automatik ausgeschaltet und die Marken frei angeordnet. Dadurch ist das Umsortieren der Marken jederzeit ohne viel Aufwand möglich.

Für die Visualisierung der Auswahl wurde ein CSS erstellt, um die Auswahl durch unterlegte Schattierung von den restlichen Marken optisch abzuheben.

Hausschuh Shop Details

Anmelde- & Kaufprozess

Der Kunde will geführt werden! Es sollen ihm keine Steine in den Weg gelegt werden, damit er einen Kaufabschluss ohne Hindernisse bewerkstelligen kann.

Mit den umfangreichen Funktionen von Powergap und spezifischen Modifikationen an geeigneter Stelle ist es gelungen, den gesamten Vorgang so zu vereinfachen, dass die Absprungrate beim Anmelde- und Kassenprozess deutlich gesunken ist.

Auch der Kassenausgang und der SSL Bereich wurde komplett überarbeitet.

Hausschuh Shop - Markenauswahl
Hausschuh Shop - Anmelden

Sie suchen ebenfalls Fachkompetenz für Ihren Powergap Shop?

Projekt Hausschuh Mobile

Details

  • Kunde

    Woolfit GmbH

    Shop für Hausschuhe

  • Kompetenzen

    Tools / Programmierung / Know-how

    • Photoshop
    • Corel Draw
    • WordPress
    • HTML5
    • CSS

Andere Projekte:

 

© 2019 - 2024 FRASCHE.DE