Helping Technicians Punch in Time
The Project
Company
Operix
Operix
Role
Lead UX/UI Designer
Lead UX/UI Designer
Users
Supervisors on a job site and construction workers who need to check assignment details and clock in.
Supervisors on a job site and construction workers who need to check assignment details and clock in.
Goal
Empower users to quickly access assignment details and clock in with confidence by redesigning the Job Assignment pages and punch action experience to be more intuitive, accessible, and visually consistent across all devices.
Empower users to quickly access assignment details and clock in with confidence by redesigning the Job Assignment pages and punch action experience to be more intuitive, accessible, and visually consistent across all devices.
Problems
Outdated UI: Previous Job Assignment pages used an outdated UI that had many inconsistencies and accessibility issues.
Poor Information Hierarchy: The hierarchy of information wasn’t organized clearly or logically displayed.
Poor Information Hierarchy: The hierarchy of information wasn’t organized clearly or logically displayed.
Hidden Functionality: Punch action buttons had a dual function for detailed punches that wasn’t readily apparent.
Small Tap Targets: On mobile, buttons were sometimes too small and close together for our users, who tend to need larger tap targets.
Challenges
Limited User Testing: Limited time and resources to conduct thorough iterative testing directly with users.
The image shows the previous version of punch actions on tablet and mobile before the redesign.
Process
Leveraging Existing Research: Relied on user feedback relayed by Customer Support and information obtained from previous interviews.
Leveraging Existing Research: Relied on user feedback relayed by Customer Support and information obtained from previous interviews.
Iterative Feedback Loop: Iterated based on feedback from Customer Support and Subject Matter Experts within Operix.
Sketch to High-Fidelity: Followed an iterative process from sketches up to high-fidelity mockups.
Accessible Component Design: Implemented new UI components and styles into mockups designed to be accessible, easy to use, and give an updated look and feel to the product.
Responsive Across Devices: Created high-fidelity mockups and ensured that designs worked across multiple sizes and devices, from small mobile screens to large desktop monitors.
Some of the changes made: buttons were made larger to increase click accuracy, different green was used to be more visually accessible, and Details were put into one button instead of separate ones to clean up the page and action overload.
Responsive Design Across Devices
Screens for Detailed Punch Actions
Floating Action Buttons
Tablet Design
Desktop Design
