UI Design

Nimble Schedule (Ximble) Timesheet Feature

Designing Timesheet Feature

A company I worked for used the app, NimbleSchedule (today known as Ximble), for tracking our work hours; allowing us to clock-in and out from inside the workplace or on a route. While using the app, one feature I noticed present on the web version, but not on the mobile, was the use of Timesheets. This allowed us to choose two dates and calculate how many were worked in that timeframe.

Web UI
Timesheet on Nimble Schedule Web App
Web Timeclock UI
Useful feature for calculating salary, but could only be accessed via Web
Old Mobile UI
Old Mobile UI

I felt this was an easy fix and decided to mockup my own process and the design elements provided by both mobile and web pages.

Old Timeclock UI

Using the Schedules layout and the Calendar as a base, I had an idea for how to display the timesheet as well as color palette to work off of. The result was a feature that would be familiar to the current user and easy to use for a new one.

New Mobile UI
New Mobile UI

All Recent Work