STAFL SYSTEMS Custom Interfaces
VISUAL DESIGN LANGUAGE, MOCKUPS & PROTOTYPING, FINAL ASSETS
DISCIPLINE(S): UX/UI Design, Interaction Design, Graphic Design
ROLE: Experience Design Lead
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
Testing different visual styles for system tabs
More from UX/UI Design
