Using analytics to provide a data-driven solution for a government agency website that manages the accounts, payments and questions from drivers on the largest group of toll roads in southern California.
From supporting a custom content management system (CMS) built in PHP to designing and developing a responsive website in Drupal, my analysis of the web analytics helped to provide data-driven design decisions throughout the website's evolutions. I worked with both my company's development team and the marketing team at the TCA to design a website that would be mobile-friendly and future-proof. Our success led us to redesign the internal, online Customer Relationship Management (CRM) platform for the call center of the Toll Roads.
In the summer of 2014, the toll booths closed, and lot of news and information about electronic tolling needed to be conveyed to the public. By reviewing the user analytics during this transition, I found the pain points and popular pages on the website.
The focus group discussions highlighted many of the same issues uncovered from my site audit, but the attendees also gave more specific details on what they liked about the website.
The content of the Toll Roads website includes managing FasTrak accounts and customer service for all drivers on the toll roads as well as all the content from the Transportation Corridor Agencies (TCA), which includes multiple initiatives, investor information, and meetings and agendas. As new ways to pay tolls were introduced, this created more content and more ways for users to become lost and confused.
At the time, the site content had been grouped into categories which used naming conventions that were more marketing terms that were not easily recognizable. I updated the site map to have simple groupings based on accounts, paying tolls, alerts, and help at the top with a 3-tier dropdown navigation to accommodate sections with lots of content.
The account area of the website was managed and built by another vendor so I also restructured the account management navigation and content including the sign up form, a complex, 5-step process, and the online toll payment form, one of the most most used forms since the toll booths were removed.
Reviewing and improving the workflows of the account sign up and toll payment forms helped to reduce confusion about paying tolls and reduced calls and wait times to the call center. Adding an online support center with FAQs and a contact form reduces calls, but also pinpointed topics that most frustrated website visitors. The account management pages were also simplified with clearly marked key steps on making changes.
In addition to tracking site visitors' behaviors in Google Analytics, I also used heatmaps for on-page clicks in CrazyEgg, and A/B testing for navigation terms and designs in Usability Hub. Combining the results together persuaded the client to improve their website design.
Most of the design challenges in the beginning were to manage the diversely branded payment options without cluttering the design. The various logos were used as graphics or icons within a layout that clearly had a single branded look and feel.
When reviewing the analytics, I noticed that many site visitors were coming from both the San Francisco Bay Area and the Los Angeles Area, which had toll roads managed by different organizations. Since changing the URL was not a possibility, I recommended updating the logo and/or website name to includes "of Orange County."
The user interface design of the Toll Roads website focused on navigation and multi-step forms. The account management area had multiple listings of complex content dealing with transponders, vehicle information, and various transactions.
Working with the marketing team, I was able to create some graphic designs for a few of their campaigns, including the Rewards program.
After the designs were approved, I created an HTML/CSS prototype in Bootstrap as a basis for the page templates in Drupal. This helped refine the responsiveness of the site, as well as a design foundation for additional pages post-launch. The prototype was provided to the vendor who developed and managed the secured account area of the website, which allowed a consistent design across the site for a seamless experience.
In the Drupal CMS, we made sure that all images had an alternative text, and all designs were checked so that the text had the proper color contrast for readability. We added skip links so that users can jump to the main content, and we made sure that the site was navigable via the keyboard.
Since the Toll Roads had multiple ad campaigns, we implemented Google Tag Manager (GTM) so that they can add and remove campaign tags on their own without touching the code. I also created events, directly in the GTM interface, to track on-page clicks in order to better explore user behavior on the site.
Every quarter, I would present the latest analytics and show how the new designs improved user retention during the account creation funnel.
