STAFL SYSTEMS Custom Interfaces

•

Role: Experience Design Lead

Output: Visual Design Language, Mockups & Prototyping, Final Assets

Skills & Tools: Sketching, Illustrator, Photoshop, CrankUI

Stafl Systems is a San Francisco-based firm specializing in building fully customized touchscreen interface packages and other electric vehicle-related services. I am responsible for guiding front-end-related tasks from early stage conceptualization and storyboarding through to completed product, working closely with in-house developers to achieve pixel-perfect results.

ABOVE LEFT: A standard layout setup for an electric car. The Touchscreen System makes use of a library of available apps that can be added, removed and reorganized as the user sees fit — icons for which are visible along the left side of the screen. ABOVE MIDDLE: Dragging the top company icon downwards reveals a notification drawer with a range of settings and app shortcuts.

From Stafl Systems' website: 'A versatile touchscreen display system, providing an interface for displaying real-time data...Stafl Systems touchscreen displays are suitable for vehicles, stationary storage, industrial equipment and more. Coupled with a high-performance graphics engine, our capacitive multi-touch displays enable a wide variety of interactive user interfaces with beautiful, responsive visuals.'

ABOVE LEFT & MIDDLE: Apps tailored to enable maximum performance. ABOVE RIGHT: 'Integrated with the Stafl Systems family of Battery Management and Embedded Control products, our touchscreen displays provide real-time battery pack performance and system data.'

The modularity of the Touchscreen System allows for equally effective information output on a variety of display sizes

Visual Identity Variants

Preliminary Research

Custom Touchscreen Interface design begins with a round of research on the current state of graphical UIs in the automotive and related fields, grouping different visual approaches together by their shared visual and functional traits.

A "Kobayashi Chart", upon which the images above are superimposed, can provide a (somewhat generalized) guideline of descriptive words with which to assign different visual and functional approaches to any design-related project.

Ideation & Development

ABOVE & BELOW: A full set of screens, exploring an early color palette eventually deemed a little too cold and dropped for a warmer approach

With visual real estate at a premium on the smaller standard automotive touchscreen, methods to effectively convey things like HVAC settings requires a fair amount of iteration