October 24, 2019

Lean UX for the next generation fleet management startup - fleetx

Lean UX for the next generation fleet management startup - fleetx

After getting feedback from our many customers, We were able to find out how much they liked our product and how easy it was to use and navigate to any feature. Customer feedback was very positive on overall UX/UI design and ease of usability.

So how exactly that has been possible? and how a small team of frontend developers was able to do that.  And What are the technologies and libraries we are using to do that?

So let’s Find out.

Fleetx is an intelligent data platform which uses AI, machine learning, sensors, and predictive analytics to help fleet owners improve their efficiency, safety and make smart and better decisions in a cost-effective & flexible way

What are the technologies and libraries we are using to do that?

Our frontend stack includes  Reactjs as a Frontend Javascript framework/library.

With react js we use lot’s of other helping libraries like a redux store for state management, Lodash for utility functions, bootstrap 4 for CSS, react-google-maps/api for google maps, Formik for form management and many other small libraries.

How a small team of frontend developers was able to do that?

We started our frontend development with  core ui , which is pretty good to get started.

With the help of core UI  and other such libraries, we were to focus more on functionality and provide our customers with all the necessary functionalities within a very small time frame. And they loved it.

How we are keeping track of issues and analyzing them?

metabase dashboard

So how do we keep track and analyse tracking devices (Like OBD ) issues and anomalies?

After receiving data from devices we run few scripts at a particular interval and detect anomalies and push that data to big query. And from big query we analyse and check the frequency of that issue with a particular device on  metabase  dashboard .Once we find any severe issue and if it can’t be fixed by sending a remote signal to the device then we send a team of our technicians to fix it.

And customers love it more because we are able to find any issue before it causes any problem to our customer

Regular Check on Application’s Performace

We use some tools to keep an eye on our application’s performance like firebase performance SDK,  Lighthouse, etc.

Apart from that, we try to keep our bundle size as small as possible(so that even on weak network, application can work fine) by practicing code optimisation, code uglification, and code split methods like route wise code split, a separate bundle for vendor libraries and fleetx's own code so that we can make use of browser’s resource cache.

Logging and bug tracking

Some of our backend tasks are handled on the node server. So node logging is very important as any other server. For node server logging we use the combination of Winston, morgan, and sentry platform.

We send our errors and logs to the sentry platform using Winston-sentry transport.

So it becomes easy to track down any bug or error that happens at the node server.

And for frontend, we use sentry(raven) error tracking SDK  which gives us full insight into our application’s errors.

Report for everything

We provide our customers with Reports on everything in many formats like PDF, EXCEL, and CSV

Like reports on vehicle

vehicles page

Reports on vehicle history and many more...

history page

But this is just a small peek into the architecture of our application, we do a lot to keep our customers happy, even sometimes customizing our application based on client’s requirements ,meeting them on regular basis or having a call with them.