From paper to pixels
Hall Constructor Ticketing system, a robust digital ticketing system designed with high-contrast visuals in mind for outdoor use and to help foreman register trucks easily.
My role
UX Research, UX/UI Design, Prototyping and Testing
Client
Hall Constructor
Agency
Power Shifter Digital
Year
2023
Challenge
Hall Constructors, a leader in site preparation and excavation services, faced significant inefficiencies due to a paper-based ticketing system for truckload management. Foremen manually recorded truck data, which led to an increased risk of errors, lost tickets, and delays in reconciliation and invoicing. Previous attempts to digitize the process had failed due to poor user adoption and inadequate software design. The challenge was to create a reliable, user-friendly digital system that could function effectively in various outdoor conditions while being easily adopted by foremen accustomed to traditional methods.
Process
Research & Discovery
We began with in-depth user research, including interviews with key stakeholders. While initial direct access to foremen was limited, these interviews provided essential insights into the system requirements. We identified that any successful solution had to be straightforward, easy to use in outdoor environments, and functional even when users were wearing gloves.
Ideation & Prototyping
Based on the gathered insights, we started sketching ideas and creating wireframes focused on usability in challenging environments. We emphasized simplicity, ensuring that key actions could be completed with minimal input. Interactive wireframes were developed in Figma, allowing us to visualize the flow and functionality from the perspective of the foremen. The image provided illustrates a critical part of the solution: a clear "Job Overview" screen where foremen can easily track job numbers, job names, truck details, and key metrics like hours worked, loads, and equipment involved.
Design & Iteration
The UI design focused on high-contrast visuals and large buttons to accommodate use in bright outdoor settings and to be operable with gloves. The Job Overview screen, as shown in the image, provided a centralized dashboard that displayed relevant job details at a glance, with key features like "Cost Codes" and "Load Count Sheet" available directly from the job card. This design not only streamlined navigation but also minimized the time needed for foremen to find specific information.
User Testing & Feedback
We translated the designs into interactive Figma prototypes and conducted hands-on testing with foremen using iPads. This real-world testing provided critical feedback, allowing us to refine the system’s design for practicality and efficiency in field conditions. The feedback-driven approach ensured the solution addressed real user needs. The visual layout, designed for quick readability, ensured that foremen could access all critical job information from a single screen, even in challenging outdoor environments.
User flow for Foreman and Admin
Combined Sitemap for Foreman and Admin
Reflection
This project highlighted the importance of early user involvement, especially for non-traditional environments. Cross-functional collaboration and rapid real-world testing were key to success. It reinforced that design is about creating practical, seamless solutions for users. The Job Overview screen played a crucial role in driving adoption, and focusing on an intuitive experience minimized access barriers, boosting usability.
Solution & Outcome
The final solution was a robust digital ticketing system designed for outdoor use. Key features included high-contrast visuals and an intuitive flow to minimize steps. The Job Overview screen summarized each job, including metrics like trucks, hours, and loads, significantly improving workflow. We created a prototype in Figma, tested it with the foremen, and built the MVP. This approach allowed rapid iteration, incorporating direct feedback to ensure the solution aligned with users' needs in real-world conditions.