Morpace Banner

Developing a Platform to aid managers by leveraging Data

Explaining the ‘WHY’ behind the data

Know the Client

The Client has established an infrastructure for accessing, storing, transforming, and visualizing telematics data from the business’ fleet of Class 8 tractors. The client provides infrastructure and suite of solutions that combine Internet of Things (IoT) data collected directly from the customer’s devices with market research insights to provide the ongoing contextual understanding of user behavior, product usage, and duty cycles.

The Story Behind

“If you can’t measure it, you can’t improve it.” Managing a fleet is a business of narrow margin, given the vying nature of the market, the resources available and the fact that fleet professionals are overloaded with data it is indeed a tough row to hoe. The real risk here is falling behind your competitors by not leveraging the business data, Fleet individuals need to harness the data for efficient business impact, to increase revenue and reduce cost. The Client aims to put data to work – by integrating the data source into a user-friendly format and contextualizing by understanding the business and explaining the why behind the data to provide actionable data-driven insights that will transform the industry.

Problem Statement

With the availability of easy connectivity in every corner, most of our daily tasks are done over handheld devices. Handheld devices need easy to use interface at a lightning-fast pace and that was precisely the issue the client was facing. With the infrastructure framed by bringing telematics data and producing output, the major hindrance was the lack of a responsive and customizable platform. The client wanted to provide reports and critical data accessible on handheld devices in a responsive and customizable way, which was not possible through their existing web platform.

About DataDialouge Pulse

DataDialogue Pulse gives the fleet professional a convenient tool to focus on improving fleet efficiency and asset utilization.  The app prioritizes issues and lists vehicles needing immediate attention for critical lead measures in near real-time. In the same interface, it also visualizes time-trended Key Performance Indicators (KPIs).

Technological Stack

  • React Native
  • React Redux
  • React Navigation
  • React Native Elements – UI Library
  • React Native Maps – Google Map Integration
  • Victory Charts
  • React Native Data Table

WHAT WE DID

iOS and Android Application

Our Learnings

  • Building an app in React Native
  • Using React Redux framework to get information about crash and handling errors
  • Applying scroll on a horizontal bar chart
  • Optimizing UI for latest smartphones
  • Tweaking libraries to enhance user experience and adding custom-made charts
  • Implementing nested scroll in React Native

Proposed Solution

A mobile app was planned to be built in accordance with iOS and Android marketplaces, which will provide fleet managers with access to critical data. The mobile app can be utilized for engaging and consulting fleet managers within commercial vehicle fleet organizations, providing guidance around action needed, productivity, risk mitigation, and efficiency. We planned a mobile web page deployment to mobile app overlay to save on cost and time for building the interface for multiple platforms.

Challenges Faced

          1. Deploying Application in React Native

React Native helps in composing a rich mobile UI from declarative components. Compared to developing an app in Swift, creating an app in React Native was more challenging. Unlike Swift the availability of Third-Party Libraries in React Native was limited. Moreover Swift has less open issues in libraries compared to React. With the availability of more developers working on Swift, solutions can be easily found when asked in the community. Despite all this, we were persistent enough to use React Native due to the reusability and efficiency it provides. Unlike other “hybrid” mobile app solutions, React Native does not use WebView components. Also, React Native brings the efficiency and portability of web development to the smartphone.

          2. Integrating/Changing Third-Party Library

The app required multiple charts and reports to aid fleet managers in managing the business. We used various libraries to equip the app with a superlative user interface and outstanding user experience. The stock library did not fulfill some of the features that were required, so we had to make changes in the library itself. One such instance was providing data in a Gauge Graph to display KPI summary. Using indigenous library was not delivering the desired results, so we created our own custom Gauge Graph.

          3. Nested Scroll

Another major challenge was embedding the nested scroll within the app. The app consists of a colossal amount of data from every truck of every fleet. To make sure that we followed the best practices and presented the data understandably and comprehensively, we embedded scrolling view inside another scrolling view. This was a difficult task to accomplish since the system is unable to decide which view to scroll. But it was achieved by ensuring that the application is built in a structured way and that we achieve a separation of concerns.

          4. UI/UX Handling

One of the major components of the whole application was its UI/UX. It has to be user-friendly and easy to use for the fleet managers. Major reports and data are displayed on the application to enable managers to take precise and accurate decisions. We faced a significant issue in devising and adapting the app to the iPhone X UI. Due to the presence of the notch on top of iPhone X, the side column in the app kept docking away. With few tweaks in the library, the issue was resolved.

          5. Adjusting Table According to the Selection

The data from the trucks are stored in the form of tables in the app. The app also has map integration to display the position on the vehicles. When a user selects any truck on the map, the table automatically scrolls, and data for that truck is displayed and same in the case when a user selects an entry from the table, the details automatically pops on the map and zoom level is also automatically adjusted.

Features

          1. List and Map-View

The application provides users with list and map-view of vehicles prioritized by Daily Opportunity Profit. Users can track the position and performance of a specific asset to make sure that no resources are wasted.

          2. Detailed KPI Reports

The application provides a detailed KPI report with fleet averages, fleet benchmarks, time trending, and per unit views. This aids in devising a strategy which improves fleet efficiency and productivity.

          3. Multiple Types of Reports

The app is equipped with multiple types of reports to make sure that fleet managers get detailed information about any specific vehicle. Few reports incorporated within the app are:

Thinking of your next app? Drop us a line at contact@mindbowser.com