How do you make a smartphone replace a full-featured vehicle diagnostics tool?

A global manufacturer of automotive diagnostic tools hired DXY Solutions to translate their existing line of hardware into an iOS and Android application, to be used with a Bluetooth device connected to the user’s vehicle. Alongside the client, I developed new features to take advantage of the smartphone’s capabilities, laid out the workflow of the application, created wireframes, and documented the necessary assets to “skin” or re-brand the apps, enabling the various clients of our client to market and sell versions of the app under their own branding.

The above flowchart was the driver for each client meeting. We used it to test features and workflow, to evaluate usability, and to provide a framework from which the development team could begin to create the app’s underlying structure. After it was fully fleshed out, we broke out each screen into one of six formal types. This enabled us to design for the most complex foreseeable scenarios.

We also broke each screen out into a set of UI elements. We documented the appearance, behavior, and placement of each element as it appeared on each of the six types.

Finally, we were able to pare the app’s assets down to a minimal set of bars, icons, gradients and colors which could be switched out and replaced with any set at the discretion of the graphic design department of a third-party client, without altering the underlying functionality of our app.

Materials, media and techniques: Adobe Creative Suite, Android, hand drawing, iOS