I built a tanker truck tester app.
I built a tanker truck tester app.
Embedded Files
Key achievements
Key achievements
Expanded the clients' brand to digital products by establishing a design system in 4 months.
Boosted buy-in rates at a tradeshow debut.
Delivered workflows, a click-through prototype, a design system, and Design QA.
Fuel truck technicians need a mobile app that works as hard as they do.
Fuel truck technicians need a mobile app that works as hard as they do.
Problem
Problem
Technicians use a handheld unit to test fuel tanker safety systems, but the device displayed only basic error messages without detailed test results. This limitation made it harder to diagnose issues and perform safety checks efficiently.
Solution
Solution
We developed a mobile app that connects via Bluetooth to the testing device, allowing technicians to access detailed safety data on their phones or tablets. This enhanced their ability to prevent accidents and improve data-sharing efficiency.
In-context learning.
In-context learning.
Gaining an early understanding of tanker safety testing complexities and the limitations of the existing device was vital. We visited the client’s site, where I observed technicians using the device in a simulated environment. The data produced was far greater than what could be viewed on the truck tester's simple interface. Our operators need to see much more information than what the device can display. Seeing the frustration firsthand gave us insight into how to improve the system.
Building a foundation for flexibility.
Building a foundation for flexibility.
The challenge was creating a 0-to-1 design system flexible enough to support future app expansion while delivering a highly usable solution today. Considering the importance of displaying data from a Bluetooth connection, we looked at standard patterns in iOS products, specifically the navigation and bluetooth settings. We took inspiration from virtual dashboards like Fitbit to display important data from the truck testing device.
Establishing a design system.
Establishing a design system.
I focused on creating modular components, and flexible templates that adhered to our client's established brand identity. This allows the app and all digital experiences within the product line to scale more easily in the future by using well-documented components and patterns that are both adaptable and user-friendly.
Color palette
Color palette
Iconography
Iconography
Typography
Typography
Text
Text
Navigation
Navigation
List items pattern
List items pattern
Layout & spacing
Layout & spacing
Quality beyond the hand-off.
Quality beyond the hand-off.
Early on, we took the initiative to improve the design development handoff, refining the process for clearer communication and smoother implementation. During one of our design QA sessions, we learned that developers misinterpreted key details, such as exporting icon buttons with incorrect touch target sizes, drastically reducing usability. This revealed a need for clearer documentation and helped us refine our design system to ensure better collaboration and stronger usability standards.
A future-ready solution.
A future-ready solution.
The app's premiere at a tradeshow saw a noticeable increase in buy-in rate and interest in our client's line of products. The brand-focused design enforced the company’s identity and created a scalable foundation for future digital products. Technicians praised the ease of navigation, and management recognized the app’s potential to expand into other service areas.
Check out my other projects.
Check out my other projects.
Page updated
Google Sites
Report abuse