UI-Design, Web-Development

Türkonfigurator

Produkt-Showcase

Sedlmeyer Spezialtüren GmbH bietet individuell gefertigte Türen. Um dem Kunden vor Ort einen Überblick über das Produktportfolio zu geben, wurde ein Türkonfigurator entwickelt. Mit dessen Hilfe kann der Kunde sich seine spezialgefertigte Tür vorab zusammenstellen.
Projekt ansehen
Das Projekt war ein Auftrag von Pre-IT.

Briefing

Ziel war es eine Webanwendung zu entwickeln, die es dem Auftraggeber ermöglichte seinen Kunden die Konfigurationsmöglichkeiten für sein Angebot an Spezialtüren vorzuführen. Dies sollte hauptsächlich auf einem iPad geschehen, weshalb die Anwendung auf mobile Safari zugeschnitten war.

türkonfigurator mockup

Konzeption

Wir entschieden uns also für eine One Page Anwendung, in der separate Ebenen für die jeweiligen Einzelteile der Tür übereinandergelegt werden.

tk-ipad-sketching

Nach Festlegung der Grundfunktionen und etwas Brainstorming kristallisierte sich schnell eine Richtung für das UI-Layout heraus. Es sollte fünf Ebenen für die Einzelteile der Tür. Ebenso soll die Farbe der Fassade geändert werden können.

Nach einigen Iterationen orderte der Kunde weitere Features. Da der Wetterschenkel üblicherweise nur bei Außentüren Sinn macht, sollte der User die Option haben, zwischen einer Innen- und einer Außenansicht wechseln zu können. Mit einem jeweils passenden Hintergrund sollte dies auch für den User kommuniziert werden. Es sollten außerdem mehrere Variationen der Türe, wie Doppeltüren und Seitenteile, dargestellt werden können.

UI Mockups

Anhand der gescribbelten Entwürfe enstanden dann UI-Mockups, welche bereits den Look der umgesetzten App widerspiegeln. Es wurden iOS UI-Guidelines berücksichtigt, damit sich die Anwendung bei der Bedienung möglichst nativ anfühlt.

Aufgrund der Performance und des begrenzten Budget wurde aber auf aufwändige UI-Animationen, wie sie bei nativen iOS Apps üblich sind verzichtet.

tk-inner-outer-06

 

tk-content-image-icon-set-05

Umsetzung

Technisch wurde die App als Single Page Applikation entwickelt. Ein leerer Div-Container ist der Canvas für das Programm. Zum Einsatz kam das JS-Framework MooTools, das eine sehr gute Grundlage für die geplante objektorientierte Umsetzung bot.

tk-ipad-front-04

Die Assets wurden in einer MySQL-Datenbank referenziert. Beim Laden der Anwendung wird einmal der komplette Datensatz als JSON übergeben. Entsprechen der Größenordnung war dies die praktikabelste Lösung, da somit unnötige Serverkommunikation und somit Ladezeiten vermieden werden konnten.