Designing a new
B2B SaaS tool

Company / SkyVision (B2B SaaS)

Role / Solo designer working with a Product Manager, Backend/Frontend developers, and QA Analysts

Timeline / 2 weeks

Helping analysts find areas of the pipeline that need to be re-monitored

Meet the new flight visualization tool on SkyVision's web application. It helps analysts audit past drone flight paths so that they can alert the flight crew of any areas that need to be re-monitored. It simplifies the laborious audit process, giving analysts more time to spend on addressing problematic areas.

Map View page with new flight visualization feature.

Map View page with new flight visualization feature.

My approach as the solo designer

Understanding business & user goals

  • Collected feedback via user interviews to uncover pain points and insights with PM

  • Outlined use cases and user stories to develop feature requirements that addressed analysts' needs

  • Provided feedback to cross functional teams and key stakeholders throughout

Collaborative & iterative designs

  • Created an iterative series of low to high fidelity mock-ups which helped to materialize the vision and drove us to developing the ideal solution for our end users

  • Halfway through the journey, technical constraints surfaced and I worked with my developers to craft a feasible design solution that met user & business goals

Developer handoff

  • My designs were directly leveraged for backend and frontend development decision making.

  • Created detailed documentation and design guide templates while updating design library.

  • Successfully shipped tool and received positive feedback

Flight visualization feature with collapsed left side panel.

Flight visualization feature with collapsed left side panel.

What is SkyVision?

Oil pipelines are difficult to monitor regularly because they are located in remote areas. Some common pipeline issues that occur as a result are corrosion leaks and cracks. Such issues can result in serious ecological, human casualties, and production & financial loss.

SkyVision is a B2B SaaS tool that helps oil and gas companies save thousands of dollars by helping them monitor and keep their pipelines healthy using aerial imagery captured by drones.

In 2016, an oil spill polluted Amazon rivers used by indigenous group in Peru.

In 2016, an oil spill polluted Amazon rivers used by indigenous group in Peru.

The impact of missing areas

Areas along the oil pipeline that need to be re-monitored were being missed by the flight crew costing SkyVision's customers, oil companies, millions of dollars in remediation.

It was clear there was an issue with the current drone monitoring process.

Meet users where they are

In a 2 week sprint of rapid iteration and real-time feedback, I hit the ground running. The accelerated timeline necessitated strategic planning and asking the right questions.

I started by scheduling interview sessions with power users. I focused on answering:

  • How are analysts auditing flight paths today?

  • Where are they experiencing the most friction? Why?

  • Are they using any work-arounds to help them? If so, what are they?

User flow of the problematic multi-system process analysts were using.

User flow of the problematic multi-system process analysts were using.

How are analysts auditing drone flight paths today?

Mapping out their current process in a flow chart helped me determine what’s working, what’s not, and what areas need improvement.

I learned analysts used a disjointed process that involved downloading and uploading files into Google Earth. This multi-system process was time consuming and inefficient.

We discovered the laborious audit process was the root cause of human errors. And this is why so many areas were being missed.

Reframing challenges into opportunities

Our goal is to provide analysts the tools they need to audit drone flight paths directly within SkyVision.

The follow How Might We statements guided the remainder of my process:

  • HMW support analysts in determining which areas of their pipeline are due for re-monitoring so that they can alert the flight crew?

  • HMW eliminate the need for analysts to export data and upload it into Google Earth?

The challenge: make it simple

The 3 different ways drone flight paths could be presented on map.

The 3 different ways drone flight paths could be presented on map.

The easiest way for analysts to find missed areas is by visualizing the drone flight paths. I thought of 3 different ways to present them on a map.

I chose the third option of showing only the 'latest known' flight paths because my research showed this critical information was difficult to determine on Google Earth. In fact, this was the second more time consuming step. My solution was two fold:

Technical constraints

I couldn't wait to share my solution with my developers!

Unfortunately, I learned the developers discovered a major technical limitation with our mapping system: drone flight paths aren't associated with the oil pipeline overlay.

This impacted my design solution in the following ways:

The 3 different ways drone flight paths could be presented on map.

The 3 different ways drone flight paths could be presented on map.

Back to the drawing board

The new challenge was to simplify the flight paths in an intuitive way so analysts can easily find the missed areas.

I created two new how might we questions to guide my solution ideation:

  • HMW enable analysts to find the information they need from the flight path visualization?

  • HMW provide the right choices at the right time rather than presenting all the possible choices all the time.

Second attempt to solve the problem

I took a great deal of time and care designing the flight path visualization in a way that would be helpful and insightful. Repeated iterations of using real data helped me get closer to my analysts' goals.

Flight path date range modal designs.

Flight path date range modal designs.

Helping analysts find missed areas for pipelines with different monitoring cadences

I learned pipelines are monitored at different cadences. For instance, pipeline A is monitored every week and B is monitored once a month. Because of this, analysts downloaded files for custom date ranges.

The flight path date range modal allows analysts to narrow down flight paths by a pre-selected date range or a custom range. Date range options were thoughtfully selected based on each customer's oil pipeline monitoring cadences.

To the right you can see the three designs I came up with. I chose the second one because it takes up the least amount of space on the map.

Saving analysts time by reducing cognitive load

Analysts spend the most time distinguishing missed areas amongst the overlapping flight paths in Google Earth. I alleviated this pain point by:

  • In the same way Google docs only highlights the misspelled words, I made it easier for them to spot missed areas by emphasizing them. The legend highlights flight paths that are older than the common pipeline monitoring cadences.

  • Reduced cognitive load by making the colors more intuitive; recent flight paths are green and older ones due for monitoring are shades of red.

  • Made comparing flight paths easier by reducing the total number of flight path age categories from 8 to 6.

The final solution showing flight paths that occurred in the last month. Analysts can easily find the missed areas highlighted in orange.

The final solution showing flight paths that occurred in the last month. Analysts can easily find the missed areas highlighted in orange.

Redesigning the left side panel

As I tested out my flight visualization feature with real data, it was clear the left side panel needed to be redesigned.

Analysts couldn't easily view nor access the 3 different cards with the existing design. 3/3 power users frustratingly assumed they couldn't access details pertaining to flight paths during user testing because they couldn't find the flight cards.

Here's a quick preview of the major changes I made to create a seamless experience between the new flight visualization feature & left side panel:

After receiving negative feedback about long loading times, I redesigned loading indicators.

After receiving negative feedback about long loading times, I redesigned loading indicators.

Feedback

We received both positive and negative feedback since we launched the new flight visualization feature. Analysts were thrilled about the flight path filter and the color-coded paths!

Unfortunately, we received negative feedback related to long loading times between searches. I closely worked with the developers to understand how data is loaded and redesigned loading indicators.

This changes was successful as analysts found it easier to understand the the different search filters. Even though no performance improvements were made, 2/3 of analysts said the loading times were better!

The development team is working to improve performance.