{"id":3412,"date":"2024-05-13T17:02:02","date_gmt":"2024-05-14T00:02:02","guid":{"rendered":"https:\/\/www.scamper.com\/cv\/?page_id=3412"},"modified":"2025-09-19T11:53:05","modified_gmt":"2025-09-19T18:53:05","slug":"viz","status":"publish","type":"page","link":"https:\/\/www.scamper.com\/cv\/viz\/","title":{"rendered":"VIZ Visual Dashboard Builder"},"content":{"rendered":"
\n
\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
\n
\n

VIZ Visual Dashboard Builder<\/span><\/p>\n

Product design, UX\/UI <\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Role<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Product Designer<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
\n
\n

Team<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Product Team @ FogHorn<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
\n
\n

Duration<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Jul 2017-Sep 2023<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

VIZ was a data-driven visual dashboard construction tool for Industrial Internet of Things (IIoT) environments. VIZ dashboards allowed operations technology (OT) teams to visualize real-time data streams, and monitor the efficiency and health of their environments without the need to code.<\/span><\/p>\n

<\/span><\/p>\n

Starting with an open canvas, users built their dashboards using a series of dynamic cards to visualize the results of analytic expressions, display output of machine learning (ML) algorithms, validate sensors, or troubleshoot diagnostics of input sources.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n<\/div>\n
\n
\n
\n
\n

\u2139\ufe0f FogHorn Systems was a leading developer of industrial and commercial applications optimized for industrial edge environments with limited or no network connectivity. FogHorn was acquired by Johnson Controls in January 2022.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

VIZ dashboard, example layout<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Each card could be sized and positioned visually, to best accommodate the users’ respective data visualizations, such as line graphs, bar charts, gauges, maps, video feeds, and more.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Early dashboard spec annotations<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Working with my team\u2014from project managers to engineers\u2014I iterated on the designs of every element, using our design system where applicable, and augmenting as necessary as we invented new elements and components.<\/span><\/p>\n

<\/span><\/p>\n

The design required guidance on everything from layout and dynamics, to card controls and states, to color palettes and content rules. Annotations spelled out certain individual specifications, and helped engineers to maintain consistency as they implemented bespoke components.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Dynamic settings flow<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Cards were versatile, and offered users dynamic settings to accommodate their needs, as well as the specifications of data models. Where the needs and limitations were ambiguous, this iterative exercise proved valuable for honing our offering to better balance user needs vs. technical capabilities.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n
\n
\n
\"\"<\/a><\/div>\n<\/div>\n
\n
\"\"<\/a><\/div>\n<\/div>\n
\n
\"\"<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Dynamic settings flows<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

I designed flows to illustrate the user’s progression through myriad options for each unique card type.<\/span><\/p>\n

<\/span><\/p>\n

Similarly, I used grids and guidelines to illustrate to the engineering team how cards could be sized and positioned on the canvas, and how these properties might affect the content of each card type.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n
\n
\n
\"\"<\/a><\/div>\n<\/div>\n
\n
\"\"<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
\n

Content and layout spec exploration<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n