Apagon ANS

A modern mobile notification system.

 

Apagon Alert Notification System (ANS) is a web app for sending notifications and visualizing power outages.

Project Specs:

Duration: 6 months

Development Stage: In Development

Tools:

  • Adobe XD

  • HTML, CSS

  • Javascript, React

Deliverables

SaaS Reactive Website

Roles

User Interface (UI) Designer

Interaction (IxD) Designer

Overview

Apagón ANS interacts with the Apagon iOS and Android apps, operated by Apagon LLC. We constructed the web app version quickly to have the ability to send emergency notifications to all users. The new notification system provides better situational awareness of power outage trends through better mapping and visualization design.

Problems

Apagon LLC had quickly deployed an Alert Notification System to respond to the need to send emergency notifications during the hurricane season of 2019. After a couple of years of fulfilling its role as a general tool to send messages, the Apagon LLC team decided that it was time to update the design to address some performance and user error problems.

1. The original map layer was not optimized for performance and often had a time delay.

2. Operators of the ANS often commit mistakes when drafting a notification.

3. The ANS filtering capacity was limited to lasso selections. Temporal filters had to be typed out as a query on the browser.

Solution

The new ANS system provides clear and intuitive ways to perform complex queries. It also gives visual context to critical information when performing a query. I simplified the map layer to optimize for performance.

1. A new dynamic horizontal main graph visualizes the percentage of users' power status. The dynamic chart also serves as a filter.

2. A dynamic series of smaller horizontal graphs that sort temporally to show which region's power status

3. An Autocomplete search bar to filter specific regions

4. A new date-time temporal filter with a calendar UI.

5. A simplified map with fewer layers designed for optimal rendering.

 

Research

 

Findings:

  1. We needed to simplify the old system. Excessive map layers and styling were interfering with the interactivity and performance of the app.

    2. Amazon's temporal and categorization filter inspired us. Our goal was to perform complex queries on temporal information with an equally simple UI.

The research that we did for the new Apagon ANS was minimal. Being users of the old system, we had identified the problems ourselves throughout the years of use. Amazon's complex filtering system was an inspiration.

Internal analysis of the SaaS tool showed performance issues with detail map layers.

Visualizing a grid intricate distribution system did not add any value at the moment of sending a notification to the users.

Apagon LLC’s team was inspirred by Amazon’s complex filter system.

The complex temporal and color filtering served as a good template for our team.

Design

I designed Apagón ANS thinking about how to minimize custom code, leveraging existing components from the Material UI library. Custom components are intended to vary an already existing Material UI element, for example, the dynamic power status graphs. Template messages minimize user errors caused by typing the header and content of the notification message.

Apagon ANS - Old System

Apagon ANS - New System

I designed the call-to-action buttons using Material UI. I designed the components to be stateful, revealing information depending on the context. I also created a unique horizontal bar graph that visualized information and filtered the reports on the map.

 

Regional filters provide contextual information in the brackets after the name. The number shows how many users have reported in that region.

 

Date-Time filters come with default set filters for 4-hours and 8-hours. I designed the component also to allow the user to choose custom filters.

 

I simplified the message templates and used large buttons to clarify the four options for messaging. A step counter at the top of the UI provides situational awareness.

 

I wanted the message to be previewed in Apagon ANS and on a smartphone preview screen. The previews provided contextual information for the length of the message.

 

I designed the last step of the template messaging system to preview the target audience receiving the notification.

 

Summary

 

The Apagon ANS is in the early stages of development. The SaaS solutions help operators at Apagon LLC reduce cognitive load by providing a more intuitive UI and for sending consistent notification messages.

Lessons

1. I learned that using existing components reduces friction when coding the design. Since I am the one also coding the SaaS, using existing Material UI helped me better understand the relationship between designing something on Adobe XD and the actual code implementation.

2. I learned that interactivity could lead to a simple, discoverable design. A simple design can also lead to better performance. A map with too many layers might look intriguing, but it does not improve the task of sending a notification to a selected number of users.