Custom PDF Reports for Traffic Optimization

Interaction Design • Information Architecture

On this project I created custom PDF reports for Traffic Engineers and city leaders to optimize their city traffic with Google AI using their current infrastructure. A design solution for Green Light’s mvp product that makes implementing the tool into current workflows less disruptive and easier to adapt. Thus making the product scalable across varying level of traffic infrastructure around the world. My team’s collective work and collaboration on this project won us the Google Research Tech Impact Award for its innovative technology and collaboration.

3 months

User Need

Traffic Engineer’s workflow needs printed reports.

Understanding the user and opportunity

Through research the team discovered that the need to print reports was still important to Green Light’s success because…

1

Communication and approvals

Less tech enabled cities rely on paper and print outs for communications and approvals.

2

Product adoption

It allows cities to adopt Green Light into their current workflow with minimal change needed.

My Design Process

When myself and two other designers inherited this project we were tasked with taking PDF reports the Green Light team were using to send recommendations and transforming them into an online portal for Traffic Engineers to receive, review, implement and provide feedback on recommendations.

Many many pages of recommendations

Where the magic happened

Green Light’s online portal!

Once important pages and elements were set in stone I began to create the custom designed reports for each important page.

To create the template I identified the meta data that was needed for every page no matter what.

Creating the template

Once I had the template set I moved on to creating the information architecture for the rest of the important pages.

Where traffic engineers can view a list of action items if there are open recommendation reports.

Recommendations

I influenced a design change!

As I was creating the recommendations page I noticed that the table where the action items are housed didn’t read like a continuous set of instructions. I proposed a new design solution that was then agreed upon by the rest of the team and implemented in the final dashboard design. 

Old design

My solution

Where traffic engineers can view supportive data to understand the rationale behind the recommendations.

Observations

Where traffic engineers can dive deeper into impact analysis to understand detailed changes to the overall traffic for the intersection. 

Impact Optimization

Documentation and handoff

Defining print principles

As I was creating the PDF reports I noticed that there were repeating elements that could be universally applied for all page generation. I decided to create to principles to support future designers and engineers if they needed to produce more reports after I was gone.

1

Information Integrity

Customization is necessary to fit information in a print view. However, it is essential to keep the integrity of the information consistent. Cut off information can lead to incorrect changes.

2

Expose interactive information

The web platform is interactive therefore it’s important to expose interactive information in a static design for print. Information hidden behind tab sections should have a dedicated print view page.

Information integrity example

Expose interactive information example

For handoff I packaged all of my work into the Print Design Principles document that house the guiding principles, template, individual page setup and style guide. This documentation will support the Green Light team, future designers and engineers if they need to construct new pages.

As the team worked through this engagement we noticed we spent a fair amount of time learning the different terms and phrases used. So, I created and delivered the common traffic terminologies artifact to help future designers onboard and start confidently solving problems quicker.

Success so far

Green Light is now live in 70 intersections in 12 cities globally. Check out this recent blog post from the Green Light team and learn about the success project Green Light is having.