UX Philosophy Can Protect You from Bad Weather

The user experience (UX) is a critical piece of any software interaction. Some platforms are built with a great idea, but when it comes time to present the key features, less attention is placed on the UX and the entire result falls short. The UX, however, is one of the most important aspects of how a user interacts with and uses a program, app, platform, etc. And the key to this is translating the goal of the software with the resulting actions taken by the user.

Dashboards are part of many platforms, whether they are focused on monitoring, creating useful insights, or are even part of an entertainment-based game. In addition to being fun to look at, a dashboard’s goal is to reduce critical decision making time. This is where a focused UX is especially important, as dashboards can be a double edged sword. A dashboard provides a large amount of data in a small space. Done right, this can evoke the exact right action in a user. Done poorly, it can confuse a user and delay any type of action, but especially the correct action. Generally speaking, a dashboard has a single purpose, no matter what the dashboard is used for: To improve the metric we will call “Time to Correct Action”. In other words, we need to set up the dashboard in such a way that the user will see the dashboard, absorb the critical pieces of information very quickly, and understand the correct action they need to take. While dashboard creators can sometimes forget this, it’s important for UX specialists to know this, breathe it, and live it.

Let’s take weather, for example. Why do we like to know what the weather is and what it will be like? Perhaps so we can dress correctly for the day ahead, so we know what type of plans to make, and so we can remember to close the sunroof in our cars…

A good exercise for any UX engineer is to look at not just weather, but severe weather events, and create a dashboard that incites the exact correct action as quickly as possible. Remember, false positives and false negatives both have a significant cost, so both the weather insights and the action required need to be accurate. Meteorologists rely on averages for easier weather forecasts, but modern APIs allow anyone to pull up to date, hyperlocal weather data instantly. By using a weather API, we can pull data on critical weather events, and set it up so that a UX engineer can take and hone a dashboard that will generate the correct response from a user, depending on the type and severity of the weather alert.

Creating An Insights Dashboard for Real Time Weather Alerts

Introduction

This tutorial utilizes the events endpoints functionality that allows us to retrieve a number of different weather events based on whether they have an urgent alert status or fall into particular insight categories we want to track. Specifically, the tutorial creates a single page react web app which builds up the insight dashboard we will need.

import * as React from "react";
import Chart from "react-google-charts";
import axios from 'axios';

class App extends React.Component {

API Key

As this tutorial uses data from Tomorrow.io, you will need to sign up for the service and log in to get your API key.

static defaultProps = {
    // get your key from app.tomorrow.io/development/keys
    // ideally the request will be proxied by another server-side service, keeping the key secure
    apikey: "add your API key here",

Select the Location

To select the location, you can use a predefined locationID from a list, or you can input a latlong pair or even GeoJSON geometry inputs.

// pick the location, as a latlong pair array, GeoJSON geometry or predefined ID
location: "5d6472a671330c000899876e",

Decide Which Insights to Include

To determine what elements we want to monitor, we need to set up the particular types of insights we are concerned about. In this case we want to track winter storms, extreme wind, temperature extremes, and floods. These will populate the dashboard and allow us to take action more effectively.

// list the insights, can also include custom insights for monitored locations
insights: ["winter", "wind", "temperature", "floods"],
// set the safety buffer around the location, applicable only to insight categories only
buffer: 20
};

Request Key Events

Parameters in hand, we need to then trigger the request through the use of the GET/POST events endpoint. The output of this is a results JSON response that will pull any identified events from the area in question. This code will pull the event a single time, so it’s important to put in a timer to repeat the call as often as you need (for example, every 5-10 minutes).

componentDidMount = () => {
    const props = this.props;
    const {insights, location, apikey} = props;
    // request all events matching the insights for the above-mentioned location
    axios({
        method: "post",
        compress: true,
        // set the Events POST endpoint as the target URL
        url: <https://api.tomorrow.io/v4/events?apikey=${apikey},>
        data: {
        location,
        insights,
        },
    })
    .then((response) => {
        console.log(response);
        this.setState({events: response.data.data.events})
    })
    .catch((error) => {
        console.log(error);
    });

Render the Dashboard View

With the resulting data, we can utilize Google Charts to render the dashboard (some libraries you can use include Fullcalendar or the React Timeline Calendar).

render() {
// configure unique colors, per severity level
const colors = {
    "unknown": "#b6c0cc",
    "minor": "#ffff42",
    "moderate": "#ff7800",
    "severe": "#eb002c",
    "extreme": "#b80d0a"
};
let data = [
    // set the columns of the timeline chart, whereas Name is shown next to each bar and tooltip on hover
    [
        { type: "string", id: "title" },
        { type: "string", id: "Name" },
        { type: "string", role: "style" },
        { type: "string", role: "tooltip" },
        { type: "date", id: "Start" },
        { type: "date", id: "End" },
    ],
    // map all resolved events to the array structure mentioned above, in an orderly fashion
    ...this.state.events.map((event) => [
        event.eventValues.title,
        severity: ${event.severity} - certainty: ${event.certainty} - urgency: ${event.urgency},
        colors[event.severity],
        this.renderTooltip(event.eventValues),
        new Date(event.startTime),
        new Date(event.endTime),
    ]),
];
return (
    <div>
        {this.state.events.length > 0 && (
        <div
        style={{
        margin: "auto",
        padding: "5% 5%",
        display: "flex",
        flex: "auto",
        flexFlow: "row wrap",
        }}
        >
        <Chart
          width={"100%"}
          height={"100vh"}
          chartType="Timeline"
          loader={<div>Loading Events</div>}
          data={data}
          options={{
          tooltip: { isHtml: true },
          colors: Object.values(colors),
        }}
        rootProps={{ "data-testid": "7" }}
        />
        </div>
        )}
    </div>
    );
}

Final Thoughts

With the proper data and a known problem to solve, you can design a UX to more effectively improve the most important UX metric: Time to Correct Action. Applying this to extreme weather insights can help you act more quickly, which could result in saved property or even lives.