Background

KeepTruckin builds fleet management products for the US trucking industry: GPS tracking, dashcams for road safety, tools for legal compliance, and more. Drivers use a mobile app, while their managers use a web dashboard.

I collaborated with multiple roles to shape the product experience and drive alignments. It included ideating, sketching & building functional prototypes for customer-facing products and new features across web & mobile apps. Most of my work falls under Design System, Developers, and Compliance.

Youtube: Motive Compliance ↗︎

Press: Compliance Announcement ↗︎

Visit Motive ↗︎ 

My Role

Platforms

Web App
iOS and Android Apps

Year

2017-2019

Building a Debut Design System

Too many assets: 
We had 1,000’s of design files with little structure to naming conventions and organization.

A non-modular approach: 
All our components were baked into fullscreen mockups.

Confusion over the latest and greatest UI: 
Which mockup is latest? What button style should I be using? What font size choices do I have? There was no answer.

Overly complex documentation; 
a 20-page long read before a designer was allowed to touch a Sketch file.

Key Drivers

A single source of truth and reference for our product design language.

Bridge Design and Engineering so they speak a common language for our product.

Create a harmonious family of products regardless of platform, tech stack or device.

Showcase some of the awesome products we build. To be admired and a thought leader in the product design space.

Evaluating and redefining organization, naming conventions, and a scalable structure.

Creating a systematic approach to layout, colors, type, basic elements.

For Designers

A toolkit of components/lego blocks (made in Sketch & Abstract) so designers can create mockups quickly without losing consistency. Initiated and setup its foundations, suggested and upgraded our toolset (sunsetting use of Photoshop) which helped to keep one source of truth and boosted productivity.
We made our next-level move later to Figma as it equipped us with even faster collaboration capabilities.

Introduction of concise video tutorials which proved to be an effective resource by saving designers time.

Sprayshop

A tool to promote visual consistency across our products, unify designers and front-end engineers, as well as speed up workflow.

I spearheaded the establishment of Sprayshop as part of the Design System from inception to code the very first version of the on the web. 

Company-wide

Downloadable assets and an up-to-date reference without having to dig around the product.

For Engineers

Shared language; on the same page as designers so we can communicate with clarity.

Outcome

Getting more design control, advocating for the users, design sprints, and critiques. Better choice of tools focusing on agile development, prompt delivery & improved handoff.

Features

Overview of Process

• Discovery; Understanding the domain, problem, business, and user requirements
• Understanding customers through research and align with their needs.
• Ideation; Brainstorm, sketch, and prototype.
• Design in high-fidelity, conduct usability testing, get feedback, and iterate.
• Handoff and design review after development.

Smart Dashcam

The Smart Dashcam captures the unanticipated events. The video evidence helps to protect innocent drivers and help fleet owners track see and correct their driver behavior.

I designed the web app experience for the initial integration of a dual-facing dashcam that allows to easily switch and observe driver behavior for any driving event.

Email Redesign

We optimized the design of our notifications emails for mobile, as this is how many users will receive them. Less fancy, more functional—a single column layout, simplified typography, and elegant spacing.

 Karsten Rowe

Head of Design – KeepTruckin

"Haseeb is a strong IC and craftsman. Always looking for opportunities to grow and improve the design process. Together we set up the foundations of the KeepTruckin design system called SprayShop, which helped both designers and engineers build better products more efficiently."

Documents 2.0 + IFTA

Our product didn’t offer an automated flow of IFTA fuel receipts ported to documents. We needed to significantly improve our documents feature to level up with competitors.

Ideas to Action

Outcomes