Redesign Onlineshop für schweizer Möbelhaus

Die webagentur.ch AG konnte die Ausschreibung für das Redesign der Website diga.ch für sich entscheiden. Neben einem neuen, flexibleren modularen Design wurde auch eine Schnittstelle zum verwendeten ERP sowie eine neue Inhaltsstruktur gewünscht. Von webagentur.ch AG wurde dies zum Anlass genommen, neue Funktionen wie Merkliste, Tabnavigation, Breadcrumbs und Produktanfrage wie auch einen neuen Aufbau der Produktseite im hauseigenen CMS zu programmieren.

Meine Rolle im Projekt:

Konzeption, Design, Koordination Programmierung

Tools / Techniken:

Sketch, HTML/CSS/JS

Art des Projekts:

Website

Zusammenarbeit:

Im Rahmen meiner Tätigkeit für webagentur.ch AG

Jahr:

Meine Mitarbeit bestand zuerst in einem Gestaltungsentwurf um den Kunden zu überzeugen. Aus dem Entwurf im Sketch entstanden mehrere Varianten als Prototype im CMS. Das Design wurde in Zusammenarbeit mit dem Kunden für alle relevanten Seitentypen adaptiert und vereinheitlicht. Daraus formte ich ein modulares System woraus alle Seitentypen gebildet werden konnten. Zusätzlich wurden einige Patterns wie Carousel, spezielle Hovereffekte und Zoomeffekte erstmalig für das firmeneigene CMS als Prototyp umgesetzt und danach adaptiert.

Im späteren Projektverlauf unterstützte ich den Kunden bei der Befüllung der zweisprachigen Website, kümmerte mich um die Browserkompatibiltät und wirkte als Schnittstelle zwischen den Programmierabteilungen, welche die ERP-Schnittstelle umsetzten.

Bildschirmfoto der Website diga.ch mit Megadropdown geöffnet
Ein zentrales Element der neuen Website wurde das Megadropdown

Die Umsetzung des Megadropdowns war eine technische Herausforderung. Für eine optimale Benutzbarkeit schliesst sich das Menü erst zeitverzögert und ist fehlertolerant gegenüber nicht beabsichtigen Mausbewegungen.

Bildschirmfoto der Website diga.ch mit Übersichtsseite der Rubrik Inspirationen mit Masonry Grid
Übersichtsseite der Rubrik Inspirationen mit Masonery Grid
Bildschirmfoto einer Rubik von diga.ch mit grossem Bild
Slider mit Stimmungsbild als Header

Das neue Design arbeitet mit grossen Bildern um einen emotionalen Einstieg ins jeweilige Thema zu eröffnen. Zudem gibt es diga die Möglichkeit die Produkte optimal zu präsentieren, was wiederum für den Onlineshop von zentraler Bedeutung ist. Für ein möglichst elegantes und hochwertiges Gefühl werden die Bilder wie auch Texte nacheinander überblendet.

Bildschirmfoto der Website diga.ch mit Carousel
Mittels Carousel kann der Kunde an verschiedenen Orten zum Inhalt passende Angebote platzieren

Viel Vergnügen beim Möbel einkaufen:
diga.ch