Project Overview

CalShift is a shift tracking and workforce scheduling app designed to simplify how hourly workers manage shifts, hours, roles, and work records.

Designed in Figma, the product includes five core modules, a structured design system, and a streamlined onboarding experience that helps users log their first shift in under two minutes.

Give shift workers a simple, reliable way to manage their schedules, hours, earnings, and work records in one place.

Challenge

Shift based industries often rely on outdated or complex workforce tools that make everyday shift management harder than it needs to be.

CalShift was designed to create a faster, simpler, and more reliable experience for tracking shifts, breaks, earnings, and work records.

Balancing simplicity with essential functionality

Reducing friction in onboarding and shift logging

Creating consistent light and dark modes

Building trust around hours and earnings

Making complex workflows feel intuitive

Goal: Create a shift tracking experience that users can navigate in seconds while remaining reliable for everyday workforce needs.

I reviewed leading workforce platforms including Clockify, Deputy, When I Work, and Homebase to identify usability gaps, onboarding friction, and key shift tracking behaviours.

Key findings shaped the product around:

Faster onboarding and job setup

Quick access to Punch In / Clock Out

Simple manual shift entry

Real time earnings visibility

Strong light and dark mode experiences

Core user journeys were mapped before designing screens, keeping the experience focused on speed, clarity, and ease of use.

A scalable Figma design system was created with reusable components, typography, spacing, navigation, forms, timers, cards, and interaction states. Both light and dark modes were designed simultaneously across the core modules:

Onboarding

Dashboard

Add Job

Punch In / Clock Out

Manual Entry

Records & History

The product was designed with WCAG AA principles, optimised touch targets, and accessible contrast. The final Figma file was structured for efficient developer handoff with organised components, design tokens, documentation, and mapped user flows.

End to end iOS and Android UI

Full Figma component library

Light and dark mode

Developer ready handoff

WCAG AA accessibility audit