Background
After surviving months of snow and ice, we can finally prepare for green grass, fresh air, and…traffic cones? We spend winter driving with white knuckles and summer following detours around construction.
This is precisely why the North Dakota Department of Transportation’s (NDDOT) Travel Map website is viewed up to 400,000 times a day during weather events. The website’s popularity led the NDDOT to develop a mobile Travel Map application to make this information even more accessible to the public.
The Project
In 2012, the NDDOT hired HEI to develop their ND Roads application, a mobile travel conditions application. With this application, the public can access a wide variety of helpful information from any location. Information is readily available to make traveling safe and easy, even when people are not able to access a desktop computer. HEI teamed with
The Nerdery to conduct a project definition phase for the development of a mobile travel map application. A User Experience team was formed to aid in the project definition phase, outlining project goals and gathering information from stakeholders.
We considered the wide variety of people who would be interested in this technology, from general travelers and commuters to drivers of commercial vehicles and farmers. We conducted interviews to gather input from each of these groups, and their ideas were incorporated into the design. Many features and pages were created as part of the mobile travel map, including a map view, common routes, favorites screen, and messages screen. A well-designed home screen made it easy for people to quickly find the information they need, including road conditions, road closures, cameras, and weather.
HEI used a mobile web application development approach to remove the complexity of writing programming code for each native mobile platform. This was an innovative way to keep initial development and future maintenance costs low. The final mobile application uses a mix of programming frameworks, including Esri-Javascript API, JQuery Mobile, and HEI’s very own wq library (
http://wq.io/).
The app’s performance and design have been well received and it recently received the
2014 TransComms Skills Award in the website and design division. The app also ranked highly among other mobile traveling apps in a
report from the University of Minnesota Center for Transportation Studies.
However, users noticed a difference in experience between the mobile application and desktop Travel Map. In 2019, the NDDOT tasked HEI with rebuilding the application to modernize, enhance, and merge select pieces from the Travel Map and ND Roads into a single mobile-friendly user interface (UI) so the traveling public has the same (or near the same) experience on the desktop and mobile device.
The Rebuild
This project was broken up into seven milestones:
Milestone 1 – Project Definition
For the first milestone, our programmers and project manager used wireframes and prototypes to envision screens and navigation. The NDDOT reviewed the wireframes and provided feedback for programming the prototype.
Milestone 2 – User Interface (UI) Rebuild Prototype
After receiving feedback from NDDOT staff in Milestone 1, HEI's team created a new web application with minimal screens to evaluate the look, feel, and navigation before building out all UI screens. The initial UI rebuild included the responsive layout for desktop, tablet, and phone screen sizes. As part of this rebuild prototype, the table of contents and map popup would be initially designed but not yet implemented for all map layers.
This milestone’s goal was to prototype core rebuild functionality while minimizing costs to evaluate whether the project should move to the full rebuild. The application was rebuilt using React/Redux and Material UI JavaScript libraries along with MapBox GL API.
Milestone 3 – Deploy Code on Azure, Testing, and Revisions
HEI worked with the North Dakota State Information Technology Department (NDIT) and NDDOT staff to set up a Microsoft Azure account to deploy the work from the initial rebuild onto the cloud and evaluate the use of Azure’s services.
Milestones 4 AND 5 – Map and UI Rebuilds
Our team rebuilt the remainder of the map's functionality and the UI screens. This included a search feature for cameras and adding in additional map layers.
Milestone 6 – Testing, Revisions, and Deployment
HEI's team tested, revised, and deployed the new version of the application.
Milestone 7 – Native App Rebuild
Our team rebuilt the native applications using React Native leveraging the code developed in milestones 2-5.
The rebuild was completed on July 9, 2020.
With the mobile application, the public can access a wide variety of helpful information from any location. Information is readily available to make traveling safe and easy, even when people are not able to access a desktop computer. Taking complex GIS data and making it approachable and available to the general public is a rewarding way to use new technology.
Download the app:
https://www.dot.nd.gov/public/mobile-apps.htm
Download the mobile app for Android or IOS.
View the brochure.
