The design challenge had a dual objective: first, to provide people with a tool to help them better predict traffic by utilizing data the administration is already gathering; second, to provide an easy to use tool for the employees of the International Bridge Administration to gather analytical data on bridge traffic and wait times.

Audience
Sault Ste. Marie, Canada is considered a twin city to a similarly-named Sault Ste. Marie in the United States. The two cities are connected only by way of the International Bridge. The majority of the population (approximately 75,000 or 80%) reside in Sault Ste. Marie, Ontario. The solution needed to cater to US and Canadian bridge users, and employees who enter data for the International Bridge Administration.

Design Process
Analytics data coming from saultbridge.com told us that a large percentage of users were accessing the site from their mobile devices; the bounce rate confirmed that these users were coming to the site to primarily check the bridge cameras. We worked with the International Bridge Administration to see how the data they were already collecting from the bridge’s traffic could be visualized and presented with a tool that would benefit people crossing the bridge as well as the bridge’s employees.

Design Issues
In Northern Ontario, data plans can be expensive and increase when crossing into another country. The application needed to be lightweight in terms of data usage, intuitive for an aging population and fully responsive. Because the International Bridge Administration uses state-controlled computer systems, the web application needed to be backwards compatible to Internet Explorer 8. Furthermore, the project needed to be completed within a very tight timeline - a month and a half for the first iteration and two months for the second.

An iterative design process was chosen for this project to allow for a continuous cycle of feedback and improvements. The first iteration of the project sought to get all of the functionality into the application within the tight timeframe, while the second aimed to improve on the initial design based on feedback gathered from the public and the International Bridge Administration.
 

Concept
The solution was a lightweight, easy to read and fully responsive web application that allows users to view current and forecasted wait time(s); the number of lanes open at customs; live camera footage of the bridge; and the position of the line on the bridge for northbound and southbound lanes. Many of the colours are conditional (changing from green to yellow to red depending on wait time or line length) to give direct visual feedback regarding the state of the bridge.

Even the look and orientation of the bridge graphic was carefully considered. Looking at the international bridge’s profile, it’s actually quite flat. However, when you are crossing the bridge you notice the humps, the arches and the waterways you’re passing over. These features were exaggerated to give the viewer of the app visual points of reference to which they could compare the lines.

The downtown core and waterfront of each city views the bridge from the east, and the majority of each city resides to the east of the bridge. For this reason, we decided to use the easterly face of the bridge's profile as it is most recognizable from this angle for both cities.
 

Profile drawing of the actual International Bridge used with the permission of the International Bridge Administration.

From the admin area of the application, the International Bridge Administration is not only able to enter and extract data from the system whenever they wish, but Twitter integration allows them to easily Tweet conditions on the bridge (including current wait times) as they are happening to their followers.

The second iteration focused on feedback collected by the International Bridge Administration from those crossing the bridge and using the mobile web app to predict traffic. The original 2-page design was consolidated into a new 1-page format allowing for wait times at both borders to be viewed quickly. The overall look of the application was revised to match the branding currently seen on the International Bridge Administration’s main site, while maintaining the lightweight nature of the original. Other upgrades included improvements to the responsiveness of the site, a revised bridge graphic and line indicators, an improved forecasting table, as well as the ability to view a snapshot of yesterday’s and tomorrow's wait times.

Result
Since the launch of the first iteration of the wait time app, the International Bridge Administration has reported a 36.2% decrease in CBP wait times, surpassing their goal for the year of 30%.

The web application has been very well received by those who enter data for the International Bridge Administration. The Shift Supervisors find the new system easy to use, and the Chief Financial Officer is very pleased with the fact that the data can be easily exported into a CSV file whenever necessary.

“Our goal to decrease International Bridge wait times by 30% was a tall order. Thanks to the hard work and dedication of the Fuzednotions team, our goal was surpassed. During the design and development process, Fuzednotions worked jointly with us to address each of our concerns. Any obstacles encountered, we promptly dealt with in a collaborative work environment. We consider each member of the Fuzednotions team to be a member of the Bridge team. We look forward to continuing our relationship with Fuzednotions in the coming years.” - Phillip M. Becker, PE., General Manager, International Bridge Administration

Designer Takeaways

1. Bugs will happen in systems with this much data. Be sure to include time for testing and bug squashing into your quote and timeline.
2. When working with systems that are fed data 24/7, make sure you and your team are ready to work late and within a specific window of time. High risk changes are best done late at night to avoid downtime at peak hours. In a worst case scenario, you may find yourself still working at 5am.
3. As a designer, know your code. With projects like this you may be working with a developer, but being able to properly look for bugs, troubleshoot and identify where in the code things are happening will help your developer fix the issues faster.

Client Takeaways

1. Let the design team know about your current workflow and data collection. This will allow us to better design the application around you and your staff, rather than have them adapt to a new workflow dictated by the application.
2. Be prepared to work collaboratively with your design team. This is especially important for projects with tight deadlines. Smaller feedback loops between client and design team minimize the risk of cost overruns, significant redesigns or even missed deadlines.
3. Keep the dialogue open even after the project is “finished.” An iterative design process does not result in a static final product, but rather an ever-evolving product driven by ideas and innovation. Listening to feedback (both internally and externally) will help us better shape the future of the application. You may find that the customer feedback is taking the design to places that you and the designer did not anticipate at first. Never stop asking, “How can we make this better?” You’re not going to insult your design team by doing this. On the contrary, this is the stuff we live for.

If you are looking for a qualified firm for your next design project, contact RGD to connect you with experienced professionals

Interested in submitting a case study to appear on the RGD website? Email