Background & Business Needs
Hourly collects time, task and location data from employees in real-time so employers can get accurate data from their employees and run payroll in minutes.
Business Request:
When the company set out to redesign its mobile time-tracking flow, the goal was to make the process effortless—even for employees working in the field, with gloves on, or in low-connectivity areas. The new clock-in/out experience had to be fast, reliable, and user-friendly across both Android and iOS.
Field Research & Design Challenges
Based on qualitative interviews and contextual research, we learned that most users work in hands-on, fast-paced environments such as construction sites or service-based field work. They’re not always tech-savvy, and rely on quick, clear interactions—often while wearing gloves, in bright sunlight, or on older Android devices.
A significant portion of the workforce prefers using the app in Spanish, so localization was not just a feature—it was a necessity. These insights informed both the interface design and technical constraints, ensuring the experience was accessible, responsive, and inclusive.
UX Solutions
in Action
Clock In flow
✅ Step 1 - A Focused Landing Experience
Upon opening the app, users land directly on an Overview screen where the most important action—Clock In—is clearly elevated using a green, high-contrast button.
This design choice prioritizes clarity and speed for employees who often open the app during shift transitions or while multitasking. By making the primary action visually dominant and immediately accessible, we reduce hesitation and improve time-logging accuracy.
📍Step 2 – Location Selection Made Effortless
The app presents a dynamic, scrollable list of job locations sorted by proximity, starting with the closest site first.
This proximity-based ordering streamlines the selection process for field workers who typically arrive at various job sites throughout the week. It minimizes decision fatigue and helps ensure employees clock in at the correct location without extra effort.
🛠️ Step 3 – Relevant Task Selection
Users are shown a curated list of tasks, limited to only those that are pre-assigned and relevant to the employee’s role or schedule.
This reduces cognitive load, eliminates unnecessary choices, and ensures time logs are associated with the correct work type. Where applicable, tasks are presented bilingually (e.g., English + Spanish) to support the multilingual workforce.
🎯 Step 4 – Real-Time Feedback & Clear Next Action
After clocking in, the Overview screen transitions into an active session state, displaying a live ticking timer in green to provide immediate visual confirmation that time tracking has successfully started.
Below the timer, the selected task and location are clearly shown, reinforcing context and helping prevent tracking mistakes. This is especially useful in environments where employees may switch job sites or roles throughout the day.
To support user confidence and task flow:
• The primary CTA now becomes “Clock Out”, using a bold red button to stand out and guide users toward the natural next step.
• Additional contextual actions such as “Lunch” or “Switch” allow employees to seamlessly update their status without ending their session.
This design ensures:
• Users instantly understand their clock-in was successful
• Context is always visible (task + location)
• The next action (Clock Out) is impossible to miss
Overall, this state supports clarity, continuity, and confidence—especially for workers under time pressure or in the field.
Clock Out Flow
✅ Step 1 – Active Clock State with Visual Feedback
When employees are clocked in, the timer ticks in real time with a green countdown, signaling an active session.
The selected task and location are clearly shown beneath the timer, giving users a constant sense of context. This helps users confirm that their work is being tracked accurately before ending the session.
⚠️ Step 2 – Clock Out Confirmation to Prevent Errors
Tapping the red “Clock Out” button triggers a slide-up confirmation modal from the bottom of the screen.
This extra step acts as a safety net to prevent accidental clock outs, a common pain point for workers in the field or in motion.
The confirmation modal is clearly labeled and provides **two strong choices—Cancel or Clock Out—**each with distinct visual contrast to support quick, confident decisions.
🧾 Step 3 – Reset & Summary Feedback
Once the user confirms clocking out, the confirmation modal dismisses, and the timer resets back to zero—providing clear feedback that the session has ended.
Additionally, the Total Hours display updates at the top of the screen, reassuring users that their time has been successfully logged.
This final step reaffirms that:
• The user is now “off the clock”
• Their work session has been saved
• They can confidently move to their next task or end their shift
