Designing an innovative web tool

A client in the automotive space came to our agency with an industry-changing product. We designed a feature-rich tool for their customers, and I took lead on the user interface.

First, I explored a few different options to find the right look and feel.

Design exploration Design exploration Design exploration

I landed on an interface that uses clean layouts, moderately skeuomorphic details and bright interactive colors.

Interface Interface

The fleet-mapping tool was an interesting challenge: I had to make a living, utilitarian map—with lots of controls and content—look pretty and uncluttered.

Map

I used Google's Styled Maps Wizard to manually choose colors for various standard map features.

Map wizard

Then, I recorded the winning colors in a JSON file to hand over to the map developers.

Mapping colors

The final deliverable had over a hundred screens. The client was happy with the results.

Screenshot Screenshot Screenshot Screenshot Screenshot