22. January 2013

UI Design

Sedlmayr Türkonfigurator

Produkt-Showcase

Projekt ansehen
Das Projekt war ein Auftrag von Pre-IT.

My Role

  • Project Management
  • UI Design
  • Frontend Development

This project was comissioned by Pre-IT for Sedlmeyr Spezialtüren GmbH.

The Client

Sedlmeyer Spezialtüren GmbH offers configurable doors for indoors and outdoors.

Briefing

To showcase their offerings of custom made door variations to the customer on-site, he wanted an app that they could use on an iPad. The customer could use the app to configure their custom door directly. Since it would have run on an iPad, we customized it for mobile Safari and the corresponding display resolutions. But we wanted to stay flexible enough, to customize it for other platforms at a later time.

Implementation

It was most versatile to build the app as a one page web front end, that get its data from a remote database. The door visualization consisted of multiple stacked layers, that were replaced by what elements the user would select.

After committing the basic features, it was quickly clear how the app layout would look like. The customizable layers were the environment, the direction of the door handled, the door layout, side parts. Apart from that there were also the door’s materials for the different parts of the door. To make the layout clearer, the materials were categorized.

Finally the user should set the color of the facade, to see if the door colors would match their custom door.

User Interface Design

I saw it a good idea to make the app feel close to a native app experience, so the designs were made close to the iOS Human Interface Guidelines and resembled common user interface elements.

This is the initial state of the app.
From the assets in the sidebar the user’s clients can configure their custom door.
An app icon set made sure, that the user could find the app on their home screen immediately.

Implementation

The app was developed as a single page application, that retrieved the assets from a database. The user interface was built with the Javascript framework MooTools, AJAX, PHP, MySql and ran on an Apache web server.