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.