Trackshields Platform

Discover a range of telematic solutions designed to meet the specific requirements of various industries.

MY ROLE
UX Designer - Interaction Design, Visual Design, Usability Testing, Rapid Prototyping
DELIVERABLES
Component LibrariesUser ResearchHigh Fidelity Designs
TEAM
Project ManagerSenior UX DesignerDeveloper
Tools
FigmaPhotoshopIllustratorSlack

Platform Transformation

Evolving Trackshields from Desktop Software to a Multi-Platform Experience

Trackshields was originally designed as a desktop-only system, limiting accessibility and slowing operational responsiveness for teams working across multiple environments. I was tasked with transforming the platform into a multi-platform experience while restructuring the user experience, user flows, interface system, and overall functionality. The redesign focused on modernizing the product architecture and ensuring that users could monitor fleets, access insights, and respond to alerts seamlessly across desktop, tablet, and mobile devices. This overhaul required rethinking how data is structured, displayed, and interacted with to support real-time decision-making regardless of screen size or context of use.

Trackshields platform overview

The Challenge

Modernizing a Legacy Desktop Experience

The original desktop system contained dense data views, rigid navigation patterns, and workflows optimized for large screens. As operational teams became more mobile, the platform needed to evolve to support on-the-go decision-making and real-time accessibility.

Key challenges included:
  • Adapting complex dashboards for smaller screens
  • Simplifying workflows for faster interaction
  • Ensuring consistency across devices
  • Reducing cognitive overload in data-heavy views
  • Modernizing interface patterns and usability
Trackshields challenge mockup

My Responsibilities

UX Restructure & Cross-Platform Design

I led the platform redesign, focusing on usability, scalability, and cross-device consistency.

My responsibilities included:
  • Restructuring the user experience and navigation logic
  • Redesigning user flows for faster task completion
  • Creating a responsive, multi-platform interface system
  • Simplifying dashboards and data visualization
  • Overhauling core functionality for clarity and efficiency
  • Designing reusable components for scalability

UX Restructuring Approach

Rebuilding the Experience from the Ground Up

Rather than simply adapting the desktop interface, the redesign reimagined the experience to support multi-context usage.

Key improvements included:
Workflow Simplification

Reduced steps required to track vehicles, access alerts, and generate reports.

Navigation Restructure

Reorganized system modules for faster access to critical functions.

Cross-Platform Consistency

Created unified interaction patterns across desktop, tablet, and mobile.

Prioritized Information Hierarchy

Ensured the most critical operational insights appear first.

UX restructuring approach

Multi-Platform Design Strategy

Designing for Desktop, Tablet, and Mobile Environments

The new platform experience was designed to adapt seamlessly across devices while preserving clarity and functionality.

Desktop Experience

Full dashboard visibility for command-center monitoring and analytics.

Tablet Experience

Optimized layouts for field supervisors and mobile operations.

Mobile Experience

Quick-access tracking, alerts, and status updates for on-the-go decision-making.

This approach ensures users can interact with the platform efficiently in any operational context.

The Objective

Create a clean, scalable, and insight-driven mobile experience

The design solution needed to:
  • Centralize estate data into one structured platform
  • Provide real-time visibility into financial and operational metrics
  • Reduce friction in daily management tasks
  • Ensure usability for non-technical users
  • Build a scalable foundation for future feature expansion

Clarity, hierarchy, and system thinking became the guiding principles of the product.

Trackshields objective

My Role

Lead Product Designer — End-to-End Execution

I led the product design process from concept to high-fidelity prototype, including:

  • Research & competitive analysis
  • Workflow mapping & user journey architecture
  • Information architecture design
  • Wireframing & interaction design
  • UI system development
  • High-fidelity design execution
  • Interactive prototyping

My responsibility was to ensure the product balanced operational depth with intuitive usability.

Research & Discovery

Understanding Users & Operational Needs

Property managers do not need more features, they need structured clarity. Speed, visibility, and simplified data presentation were critical.

Key Insight
  • Fleet managers need instant status visibility, not deep navigation
  • Alerts and exceptions are more valuable than static data views
  • Reporting must translate into cost savings and efficiency insights
  • Mobile accessibility is essential for field teams

These insights informed a design approach focused on clarity, prioritization, and real-time responsiveness.

Research and discovery

Information Architecture

Structuring Data for Fast Decision-Making

The platform architecture was designed to surface the most critical operational insights first, reducing cognitive load and improving response time.

Primary system modules:
  • Live tracking dashboard
  • Fleet & asset overview
  • Alerts & security notifications
  • Reports & performance analytics
  • User & device management

This structure ensures users can move from overview to action in seconds.

Information architecture

UX Strategy

Designing for Speed, Clarity, and Control

The UX strategy focused on turning complex telematics data into clear, actionable insights.

Key design principles:
  • Prioritize real-time visibility
  • Surface alerts and exceptions first
  • Reduce dashboard clutter
  • Design for quick scanning and decision-making
  • Ensure accessibility across devices
UX strategy

Wireframing & Interaction Design

Simplifying Complex Workflows

Wireframes focused on structuring high-volume data into digestible views while ensuring fast navigation.

Key improvements included:
  • Real-time map with live vehicle positioning
  • Status indicators for movement, idle time, and alerts
  • Quick filters for fleet segmentation
  • Streamlined navigation between tracking and reports
Mobile wireframe 01
Mobile wireframe 02
Desktop wireframe

UI Design & Visual System

Creating a Clean, Data-Driven Interface

The visual design system emphasizes clarity, hierarchy, and readability to support real-time monitoring environments.

Design highlights:
  • High-contrast status indicators for quick scanning
  • Clear typographic hierarchy for data prioritization
  • Map-centric layout for spatial awareness
  • Consistent component system for scalability
  • Responsive design for desktop and mobile use
iPad mockup
UI design image 1
UI design image 2
UI design image 3
UI design image 4

Key Features

Core Platform Capabilities

Real-Time GPS Tracking

Live vehicle and asset location tracking enables complete operational visibility.

Fleet Monitoring Dashboard

Centralized overview of fleet status, routes, and performance.

Asset Security & Alerts

Geofencing alerts and security notifications help prevent theft and misuse.

Performance Reporting

Data insights support fuel efficiency, driver behavior monitoring, and cost optimization.

User-Friendly Interface

Intuitive navigation ensures users can access insights without technical complexity.

Usability Improvements

Design Enhancements That Improve Efficiency

  • Reduced time to locate vehicles and assets
  • Faster response to route deviations and alerts
  • Improved monitoring through visual status cues
  • Simplified reporting access for performance review

Results & Impact

Business & Operational Impact

The redesigned platform improves operational visibility and supports faster, data-driven decision-making.

Estimated impact:
35%

Faster fleet monitoring and response time

28%

Improvement in route efficiency insights

40%

Reduction in time spent locating assets

90%+

Usability success rate during validation testing

Design Challenges & Solutions

Overcoming Complexity in Data-Heavy Interfaces

Challenge: Overwhelming data density. Solution: Prioritized real-time alerts and simplified dashboards.

Challenge: Technical complexity for non-technical users. Solution: Designed intuitive navigation and clear status indicators.

Challenge: Monitoring multiple assets simultaneously. Solution: Introduced filtering, grouping, and map clustering.

What I Learned

Key Takeaways

Designing for telematics systems requires balancing real-time data complexity with clarity and speed. This project reinforced the importance of prioritizing actionable insights over raw data and designing interfaces that support fast decision-making in operational environments.

Future Improvements

Next Opportunities

  • AI-driven predictive maintenance insights
  • Advanced route optimization suggestions
  • Mobile app enhancements for field teams
  • Custom analytics dashboards per industry
Responsive device mockup
iPhone mockup
Final mockup

Final Reflection

Designing for Operational Intelligence

The Trackshields platform demonstrates how thoughtful UX design can transform complex telematics data into an intuitive, powerful operational tool. By prioritizing clarity, usability, and real-time insights, the platform empowers businesses to protect assets, optimize operations, and make smarter decisions.

Tools & Software

Committed to staying current with the latest design trends and technologies and continuously learn new tools to grow in my field.

FigmaInterface Design Tool
SlackProductivity Tool
CorelDraw
CorelDrawDesign Tool
Microsoft 365
Microsoft 365Productivity Tool
NotionProductivity Tool
Moho
MohoAnimation Tool
Adobe CCMulti-Design Tool
Google WorkspaceProductivity Tool

Trusted by Teams & Brands

A selection of companies I've worked with, contributing to products, brands, and experiences that drive impact and results.

Genzaar
Brand You Creative Agency
Estate Manager
N-Power
Client logo
Client logo
Client logo
Genzaar
Brand You Creative Agency
Estate Manager
N-Power
Client logo
Client logo
Client logo