Collaborative Development to launch Safety+

THE CHALLENGE:

In order to launch a new product without the available, specialized resources in-house, Drivewyze utilized the opportunity to augment their existing team with Fount’s resources. With a wide array of skill sets and applicable experience in transportation and enterprise services, Fount’s selected crew embedded with the existing team in order to understand the business needs, identify the roadmap gaps and provide technical leadership and implementation for the new client-facing web app, Drivewyze Hub.

THE CREW:

Logan Edwards – Full-Stack engineer with extensive web application development and client-side geospatial rendering.
Carter Wooten – Full-Stack engineer with specialization in client-side web application architecture and development.
Matt Brooks – UX/UI designer with broad experience with enterprise applications

ABOUT DRIVEWYZE

Drivewyze is an award-winning company, delivering innovative services for the commercial transportation sector to improve road safety and transportation efficiency. They are the leader in Weigh Station bypass, and have expanded into safety services, including their new product, Drivewyze Safety+.

INTRODUCING DRIVEWYZE SAFETY+

Based on a strong interest from both fleet safety managers and state transportation agencies, Drivewyze Safety+ was launched to make it easier to proactively prevent accidents. Safety+ combines customizable location-specific in-cab alerts with risk zone analytics, so fleets can proactively train drivers on the road, and quickly react to risky driving patterns.

Unique within the industry, Safety+ further provides means to create and manage custom geofences for data collection and analysis in an effort to drive safer driving as well as benchmarking tools against other fleets. These features provide a comprehensive, self-servicing capability for fleet users to manage their assets as well as providing the necessary data for driver coaching.

Drivewyze Hub is the first product to package Safety+ to end users.

Custom Safety Zones

In addition to predefined safety zones provided by Drivewyze, Safety+ provides the unique ability for a fleet to manage their own zones. This capability provides fleets with unparalleled ability to monitor and adapt driving behavior due to their unique traffic patterns and routes. In addition to Mapbox as the mapping provider, various WebGL-based tooling provided the means for a user to manage their geofences. Each geofence supports scaling and rotation transforms so the user can precisely indicate the areas of interest.

Safety Insights

Once a fleet is subscribed to Safety+, their default experience showcases key metrics – collated and organized in a means that is simple to digest and actionable. Various summary metrics are provided as well as specific events that are rendered as realtime breadcrumbs on a map. Visualization is key to understanding behaviors and applying the pertinent coaching to improve safe driving.

Fleet Management

Various fleet management tools are included for an administrator or driver to organize various aspects of the business. The self-service capabilities are comprehensive and reduce the burden on Drivewyze support for the same types of tasks.

To meet the needs of large fleets, Drivewyze supports hierarchical Groups, a means to organize vehicles and drivers for the purpose of collecting data and managing Safety+ notifications. Individual notification categories have flexible settings from global opt-in/out or excluding specific groups. Due to the dynamic nature of how customers leverage groups, Hub is built to capably manage thousands of items.

THE SOLUTION:

Fount’s crew augmented the existing Drivewyze team and immediately assumed the technical leadership for the company’s new web application. The team iterated quickly on a fresh design direction that compliments Drivewyze’s existing brand, while providing a fresh and distinctive look that is rare among B2B applications. The technical crew worked alongside Drivewyze’s core team in a collaborative, agile effort to provide feedback for existing and new APIs to support the product. In less than a year, Drivewyze Hub, is a performant, secure and modern fleet management tool serving customers.

Technical Tidbits

Various functional and non-functional requirements necessitated performant technical solutions including a fully responsive application, rendering complex DOM trees, client-side localization, and map interactions.

Performance, First

Taking the guesswork out of a stable foundational architecture, Next.js underpins the application. Although Next.js offers a variety of architectures including incremental static regeneration, the team opted for a fully static build, which maintains consistency with Drivewyze’s existing architecture and offers the inherent performance of serving static files.

The team opted to offload several UI-blocking tasks via service workers. Specific actions including client-side CSV report generation and filtering a form control with thousands of tree nodes may capture seconds of the JavaScript thread which leads to lockup of the UI and a subpar user experience. Service workers provide a clean API for offloading computationally-intensive algorithms while allowing the UI to respond to user input.

Hub is data-rich. Throughout the application, tabular data is displayed for both safety insights metrics and fleet assets. With a combination of server-side pagination and virtualized rendering, an infinite scrolling technique is applied to lazy-load data into view. Previously fetched data is cached, but not rendered until necessary. Combined, combing through a large set of data is effortless, intuitive and responsive to the user.

Mapping

A map rendering solution was needed with the requirement for the ability to view and interact with driver related safety event data. Mapbox and its related web tooling was ultimately chosen to fill this demand. With Mapbox, a seamless and interactable WebGL rendered map could be integrated into the application while also providing the ability to overlay the desired data points.

With the later introduction of custom zones, additional tooling had to be introduced to allow for drawing and editing these zones within the Mapbox WebGL map. The deck.gl framework and its accompanying package nebula.gl were able to roughly solve this problem. In the end, a custom nebula.gl “Fence Editing Mode” was architected and implemented by the team to allow for users to easily create and edit their custom zones. In addition, turf.js was utilized to provide on the fly geospatial calculations to ensure all zones fell within Drivewyze’s provided dimensional specifications.

Responsive and Modern

A wide range of users and device guided the early decision to support both mobile and desktop interfaces. While the primary use case of Hub is designed with desktop in mind, all actions are accessible on mobile platforms.

The above exhibit for viewing a vehicle is represented as displayed on desktop, tablet and mobile interfaces. In addition to responsive layouts, careful attention is paid to interaction, spacing and typography as well. On mobile platforms, a mouse pointer is typically not available, so careful consideration is applied to any user input – we assume a mouse pointer is not available and design the interaction around this limit. To enhance an “app-like” experience, element spacing and typography are further adjusted to match user expectations.

Summary

Hub is a true collaborative effort among members of multiple teams. Built and released from the ground up in under a year, Hub and Safety+ offer exciting new territory for Drivewyze as they expand their services to the North American market.

To learn more about Fount, visit our homepage or click to learn about our team, our work, or our services.

product design & development

Paused for business.

Fount pursues projects out of passion. Our team is focused on personal endeavours at this time.

© 2022 FOUNT