Product Design + User Experience
aim.png

American Innovations

 
 
 

American Innovations

A mobile app that helps field technicians survey and maintain gas pipelines.

Role: Interaction / UX Designer

Team: Solo

Client: American Innovations

Tools: Sketch App, InVision, Flinto

Free Apple iPhone 8 App Screen Mockup PSD.png
 
 

Project Overview

American Innovations (Ai) provides hardware and software services to support compliant energy infrastructure. One of Ai’s product is the Allegro, a field data pc. Field technicians use the Allegro to conduct inspections at test sites along gas pipelines.

The Allegro is a capable machine, but Ai wants a more modern solution. They want to update their software for mobile platforms. I joined the team to help them design the app for the new The challenge is to define the expanded feature set for a much more capable product. I worked closely with Ai to parse through legacy features as well as add new features that match the ambitions of a new product and space.

 
 
Ai products and services

Ai products and services

The Allegro

The Allegro

UG-FieldTrip1.jpg
 
 

 
 
 

Understanding the System

I first approached this project by creating an inventory of the Ai ecosystem. It gave me a general understanding of technical terms and existing use cases. Going forward, this helped me classify content as distinct objects. This was the first step in imagining the new design.

 
 
 
 

Defining the Scope

One of the biggest challenges was updating the feature set for a new platform. I worked closely with Ai to parse through legacy features as well as add new ones that match the ambitions of a new product and space.

Because this project was a refresh, I was fortunate enough to start with a defined set of user goals and needs. Regular walkthroughs of the design with Ai helped clarify functional requirements, better understand the pipeline inspection process, and communicate the direction I was taking the design at each step of the way.

 
 
Field technician conducting an inspection

Field technician conducting an inspection

Ai Brainstorming session

Ai Brainstorming session

 
 
 

 
 

Core Experiences

  1. A sites screen that allows field technicians to easily navigate between different locations.

  2. A survey screen that allows field technicians to perform inspections and maintenance at each site.

 
 

 
 
 

Information Architecture

I deconstructed the current software on the Allegro back to its information architecture and found that the home screen (sites screen) carries all navigation. All other screens are completely isolated from one another. This made navigation from that point heavy, confusing, and congested.

I mirrored the field technician workflow when creating the new structure for the design. The flow structure is a task-based structure where the users move consecutively through the design like they would through their field assignments.

 
old structure

old structure

new flow structure

new flow structure

 
 
 
 
 

Motion Design

The two main spaces of content are sites and survey. Field technician will complete a survey at each site until their assignment is complete. I purposefully tried to build contrast in how the design looks and functions in these to spaces. The contrast helps separate how the user will expect to use the design in each space.

Below is a motion test I presented very early on in the process to communicate the direction of the design to Ai. Motion allowed me to fit many features into the same space so I didn’t have to disturb the flow of the design. I was able to include features like mapping, searching, adding sites, and options without leaving the context of the main space.

 
sketch1.jpg
1st motion test.gif
 
 
 

Sites Screen

The sites screen is the main hub for an assignment. Every site in the assignment is represented on the map and listed on the site card. Progress to finding the right ‘Calls to action’ and language for each of the features that are included in the sites screen were hammered out by a fluid iteration process.

 

Sites Iterations

1.png
2.png
3.png
 
 
 

The final sites screen is the culmination of several small ui tweaks and content changes. We parred back from many of the color and icon choices to provide a cleaner navigation experience.

 
Site Screen_Quick View Copy.png
a22222.gif
Site Screen_List scroll.png
 
 
 

Survey Screen

Landing on a Survey Screen was a content challenge. There are many different types of surveys that field technicians need to be able to complete so that meant there were many different entry fields that were needed as well. With guidance from Ai, I was able to meet those requirements through deliberate iterations for each field entry type.

 
 

Survey Iterations

4.png
5.png
6.png
 
 
 

The Survey screen also has a strong interface relationship with the sites screen. I wanted to use motion to emphasize this. The Final survey screen really takes advantage of this relationship. The user should have the impression that they are drilling into the survey and back out again to navigate to the next site.

 
Testpoint6.png
1_7cMEZZQ9YBH657wFHF24KQ.gif
Event 3.png
 
 
 

Style Guide

Overall style choices follow established Ai branding.

 
style guide.png
 
 

 
 

Reflection

American Innovations was the first big client I was able to work with and it was probably the most instructive. Through mistake and trial, I learned how to better communicate myself as designer. I also found it really enjoyable to workshop my designs with the American Innovations staff on a weekly basis. We were able to find a momentum that carried the design to its final stages rather quickly.