Motive Dashcam

Time

2019

Role

UI/UX Design

Sector & Platform

Transportation, Web

Motive (formerly KeepTruckin) is a Silicon Valley-based fleet management and driver safety platform, valued at $2.85 billion.

My work involved integrating dashcam insights into the platform, optimizing user experience for fleet managers, and redesigning the checkout process.

Objectives

Enable fleet managers in efficiently monitoring, understanding & taking action on safety violations & accidents.

Design a user interface that allows fleet managers to quickly assess driving event data. This includes dashcam videos, event intensity, location, and other key information that can help fleet manager take action.

Results

Saved fleet managers hours each month by streamlining the assessment of dashcam data, intelligently combining multiple data types into a single, actionable component.

Redesigned the checkout experience, leading to $100K in annual revenue savings.

"A year ago, our drivers didn’t want cameras in their trucks because they thought they were too intrusive. After seeing the KeepTruckin Smart Dashcam at work, they now realize a camera can save their backsides when it comes to incidents or accidents."


– John Haverstick, Safety Manager, Expediting Freight

My Responsibilities

  • Userflows

  • Wireframes

  • Prototype

  • High Fidelity

  • Design & Dev QA

I approached the dashcam integration in the following way:

  • Mapped out scenarios where dashcam insights would provide the most value to users.

  • Collaborated closely with the product owner and engineers to understand the dashcam's intricacies and data streams.

  • Focused on understanding the responsibilities and mindset of KeepTruckin users, iterating until we delivered a solution that allowed users to get answers to their key questions without delay.

  • Invested significant time in quality testing during the development stage, ensuring the feature was not only functional but also highly usableTo this day I am product of the release & quality of this feature as it took months of effort and it turned out to be very usable and one of a kind:

"The How"

Before driving events didn't much detail on the even except the location etc:


So I went with the most straight forward approach: placing relevant dashcam footage inside the page and designing widgets to accommodate rest of the data.



However design needed to accommodate the fact that fleet managers work under tight deadlines, needing to make quick but well-considered decisions without rushing into poor choices. As evident from the quotes above, time is of ultimate essence for our user.

Iteration


As part of the iterations, I talked to back-end engineers to learn what type of data we want to show the users. My computer science background helped me understand their architecture better. I learnt that our ELD (short for Electronic logging device, a plug & play device on vehicles which sends us vehicle data) is transmitting following array to our system:


[24,22,20,5,0,0,0]


These numbers represent speed of the vehicle every second of the event. The ELD uses timestamps of this speed data to find the matching dashcam footage, cuts it, adds buffer video before and after (so there is context around the clip e.g what happened before a sudden brake etc.) and sends it on our users’s system.


You can see that timestamps is something that’s common in both types of data. I utilised this commonality to merge both dashcam video & intensity graph into one cohesive component.


The red part indicates a sudden change in speed, so the fleet manager can skip to the highlighted section without watching the entire video. By reviewing speed graphs over time, they can develop an intuition about whether a certain video is worth watching.


One step further


I proposed another improvement where fleet managers can view dashcam footage without opening the details page. By hovering over the red parts of the video, they can quickly decide if further review is needed and view multiple videos on the same page easily.Since the dashboard is mainly used on desktops, relying on hover functionality is effective. Every iteration focused on how design can minimise the time and effort users has to spend on getting the data they need.

Stack I use every day

Figma

Obsidian

Slack

Things 3

I specialise in

✦ Product Design

✦ Design Systems

✦ Data Intensive Apps

✦ Mobile Apps

✦ Web Apps

I'm available for new opportunities

Stack I use every day

Figma

Obsidian

Slack

Things 3

I specialise in

✦ Product Design

✦ Design Systems

✦ Data Intensive Apps

✦ Mobile Apps

✦ Web Apps

I'm available for new opportunities

Stack I use every day

Figma

Obsidian

Slack

Things 3

I specialise in

✦ Product Design

✦ Design Systems

✦ Data Intensive Apps

✦ Mobile Apps

✦ Web Apps

I'm available for new opportunities