Ignition Gateway

Ignition Gateway

My Role

Product Design, Front-End Code, Style Guide

Year

2016

Live Link

https://inductiveautomation.com/downloads/ignition

(trial software can be installed and launched in your browser at localhost:8080)

 

The Ignition Gateway is a web-based application which allows users to configure and view the status of their running Ignition software. This project was specifically a complete redesign of the existing Gateway. Our goal was to greatly improve the product's usability by increasing it's usability. It was heavy on component based design and data visualization with the outcome being a dashboard interface, infinitely extensible as the data grows and changes. 

_thumb-770_thumb-770

Primary Challenge

My primary challenge with the project was figuring out how to translate the vast amount of dynamic data of Ignition into a digital space that balances aesthetic and interaction while communicating clearly what the user needed to know.

This challenge was addressed by prioritizing the display of the most important data and designing reusable components within a consistent, flexible UI system.

SIMPLIFYING THE COMPLEX

This complex application called for an extensive planning phase per-feature. I produced extensive flow and design documentation to get everyone on the same page and clarify the deliverables.

Final UI Design for related data table

COMPONENT-BASED DESIGN SYSTEM

In approaching this complex and extensive web application, I relied heavily on a design system to bring order to everything. I designed and coded a Sass-based web styleguide which exposed the markup developers needed to create each element on their respective pages.

Birds-eye view of my component library in Sketch

[unex_ce_button id="content_6et1bnxvz,column_content_vk8u7pm7q" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#007dbf" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#007dbf" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#1b7cbb" button_border_hover_color="#1b7cbb" button_link="https://d.pr/18AqQ" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW FULL STYLE GUIDE[/ce_button]

DESIGN FOR VARYING DATA STATES

As the actual layout and content of the app's pages was dictated by the user's source data, this project forced me to design multiple states of each UI component. From buttons to gauges to banners, each element had to be extremely flexible and thought out. 

Below you'll find final shots of the application's user interface. 

stat-sys-overviewstat-sys-overview