Research
We assembled the core functionalities and elements the system relied upon, and then looked into frameworks that could accommodate. After deciding on Material, we consulted teams of developers and settled on Vuetify due to its high degree of control and Material foundations.
Atomic Design
The product UI framework is designed based on the Atomic Design principles, with each component within the framework representing an atomic element. Elements can be combined and reused to create complex and cohesive UI designs, and by adhering to Atomic Design principles, the framework promotes consistency, efficiency, and maintainability in the development process.
Standardized Side Panels
The side panel UX reduces the need for page navigation, allowing users to access various features and functionalities without disrupting their workflow. Consolidating relevant information and actions within a single pane creates a simpler "single pane of glass" feel, with quicker and more seamless experience.
Demo Prototypes
Close attention was given to capturing custom behaviors and feature flows via detailed prototypes. I placed prototype links in relevant areas, offering users intuitive access to additional information or related features directly from the design file. This approach ensured that the design file communicated both the visual UI and the intended user experience through tangible examples.
Developer Handoff
The framework file includes extensive developer documentation, with contextual links to Material and Vuetify API resources. This documentation aims to streamline development, ensuring developers have the necessary information to utilize and customize the framework effectively. By providing these resources, the framework facilitates efficient implementation and consistency in UI development.
Some real pages built with Dispatch
Load Dispatch Viewer
The product homepage where dispatchers can view all of their trucks in complementary map and table views.
Asset Location Tracking
The product homepage where dispatchers can view all of their trucks in complementary map and table views.
Load Dispatch Listing
A page where dispatchers can get an overview of all jobs and their detailed stop status in a list.
Org Structure Editor
A tool for org admins to assign users and groups to different divisions and permission levels.
Media Manager
An associated product that allows org admins and trainers to send and monitor media on a driver's tablet.
Adoption
Adoption of the system required culturing teamwork and communication between design and engineering. We hold regular syncs between designers and engineers, and bring new innovations to organization meetings to give engineering visibility into where the product experience is headed, and allowing us to further advocate for human-centered design in our approaches.
Outcomes
Today Dispatch has been implemented in many areas of the product, and has saved developers months of work while achieving higher product standards than ever before.