- Visual Design
- Design System
KeepTruckin is a start-up based in California; backed by Google Ventures. It aims towards improving the efficiency of the trucking industry through its technology products. They offer electronic logbooks for drivers, management tools for fleet managers.
My journey with KeepTruckin started in 2015 when I was hired to help redesign their Fleet Management System—a web app. I worked closely with their design lead—Khushnood Qadir—for both projects. I had to make myself available onsite and remotely, and it was a great learning experience for me.
The Fleet Management System is live now and receiving lots of positive feedback by its main users (fleet managers).
Web App - 2015
Using the Web App, fleet managers can track the location of their drivers and vehicles, they can also check the logs of drivers and suggest edits.
The hardest part was coming up with a simple and elegant visual language that didn’t affect the predefined UX and also helped in designing heavy data tables, charts, and forms creatively. Visually, the interface lacked many details.
The colors were dull, the navigation was cluttered with unnecessary collapsible structures, there wasn’t enough visual distinction among sections and tables which was creating problems while scanning the information, plus the icons were blurred and inconsistent.
A screens from the previous to help you explain the problems
After doing an extensive research, and armed with all the necessary information from the client’s side, I started off with the Driver Profile—one of the core pages.
Navigation on the left side was simplified by dropping the collapsible structure. The breadcrumb and top navigation were rethought and placed inline to save more space for the main body. A fresh icon set was created to match with the visual language.
Initially, two color schemes were introduced i.e. white and dark. The dark color scheme was picked because it had a better color contrast and vibes from the previous app.
White cards with a slightly darker background and appropriate negative space were used for better visual distinction between the sections.
Tables were rethought by following a specific margin pattern. So that, when the screen size is resized, it only affects the data area while keeping the same margins.
A couple of more screens, showing all the building blocks in work.
This phase was done in Photoshop where I created a detailed style guide containing all the possible reusable components. It was a strenuous task to maintain consistency with such a large scale project in Photoshop. This was the point where I decided that I’ll switch to Sketch for my upcoming projects 🙌
Mobile App - 2017
After our successful collaboration on Web App, I was asked to help KeepTruckin with the redesign of their mobile app. This app lets drivers log their hours, save important documents, and includes alarms for when drivers reach their HOS limit and breaks.
Although the UX of the previous Mobile App was very well defined, visually, it had the same issues as the last app web. It lacked the contrast, there wasn’t enough visual distinction between the sections, the icons were blurry and inconsistent, and the use of negative space was random without any thought-out pattern.
My job involved enhancing and implementing the newly explored visual language—which was done for the Web App—on the Mobile App while solving the problems mentioned above. The tough part was to preserve the consistency across 200+ screens.
A couple of screens from the previous mobile app
I started with the screens that drivers spend most of their time on. Moved on to deriving all the colors and the visual style from Web App; then I created a fresh set of icons and defined the text styles.
A slightly darker color for the background and white for the information cards with the right amount of negative space were used to bring the visual distinction between the contents.
If done well, negative space can help separate the sections, reduce the noise, create a relation between elements, and make the design look elegant. I’m using 8px multiplication, throughout the app with the exception of 12px.
Pretty much all of the elements that were likely to be changed were symbolized, which helps with not only changing the information easily through overrides but also making the design changes universal when made in symbols.
You don’t have to change it one by one, just make a change on a certain element and this change will be replicated on similar elements everywhere in the design.
A quick example, explaining how you can quickly change the color of the entire app just by changing the color in its symbol. That’s very handy. Isn’t it?