Adrian Cortinas

WorkRippling · Time & Attendance

Timeclock app redesign

A kiosk-first redesign with badge/biometrics and a future-proof framework

Discipline
Product redesign · Tablet app
Company
Rippling
Product area
Time & Attendance
When
Oct 2024 → May 2025 (launch), ongoing iterations
New app: large targets, fast auth, unified patterns
New app: large targets, fast auth, unified patterns

Behind the work

Role

Lead Product Designer

(end-to-end) - Strategy, IA, flows, patterns, visuals, admin ux.

With

VP of Product (sponsor) • 2 Engineers • UX Researcher • PM joined post-v1.

Project snapshot

  1. Launch

    Jul 29, 2025

  2. Scale

    600k+

    clock-ins per month

  3. Product

    New hardware SKU

  4. Outcome

    $1.1m ARR

    in 6 mos

Overview

Rippling’s kiosk was a stretched phone UI that created shift-change lines and support pain. I led a ground-up tablet redesign: a kiosk-first layout, large hit targets, badge login (biometrics-ready), and admin controls to map devices and locations at scale. We shipped in Jul 2025, unified the Timeclock App and Device experiences, and unlocked a new hardware SKU.

The problem

The problem

  1. Phone UI on tablets → slow clock-ins

    Search → select → PIN → job with tiny targets; long shift-change queues proved we needed kiosk-first, single-tap actions.

  2. No fast auth; gaps

    Name+PIN only—no badge/biometrics for speed or anti-buddy-punching—fell short for hourly workforces.

  3. Years of UX drift → redesign, not patch

    “Just add badge clock-in” scope exposed ux gaps. The right fix was a ground-up redesign + layout system, not another incremental tweak.

Legacy Timeclock tablet experience
Legacy UI with mobile components on tablets,small targets, unclear hierarchy
FIG. 01Legacy UI with mobile components on tablets,small targets, unclear hierarchy

Solution highlights

Solution highlights

  1. Dual Distribution

    Bring your own device (BYOD) native app + dedicated Timeclock Device variant optimized for tap-to-clock.

  2. Kiosk-first layout system

    One-decision screens, large targets, consistent action/context/feedback regions.

  3. Fast authentication

    Badge now; biometric patterns (finger/face) designed day-one. Unique PIN also added to avoid name search. Prevent “buddy punching.”

  4. Roadmap-ready IA

    Slots for schedules, timecard edits, PTO, on-kiosk onboarding.

  5. Admin control & observability

    Tie devices to locations/entrances, configure auth methods, manage job dimensions.

Native Timeclock BYO-Device tablet clip
Native Timeclock app on BYO-Device tablet (Live in production)
Timeclock app for badge and biometrics sign in; Hardware device (marketing video)
FIG. 02Timeclock solution clips

Initial ask

Initial ask

Integrate badge and fingerprint reader into current kiosk; larger targets

Timeclock initial-ask legacy UI reference — top
Timeclock initial-ask legacy UI reference — center
FIG. 03Timeclock initial-ask legacy UI reference montage — left board · Timeclock initial-ask legacy UI reference montage — right board

Discovery

Discovery

Customer painpoints beyond new features; competitor tear-downs (ADP/UKG/Square-like patterns); evolving business goals

Research

Enterprise readiness to support large hourly workforces

Part of Rippling’s success depends on winning enterprise clients with large hourly workforces

The redesigned Kiosk, renamed as Timeclock, is a competitive advantage against ADP and UKG

Designed to be a fast, seamless and reliable time-tracking experience

~20%

Clock-ins and outs are managed via the Timeclock, and we anticipate this number will increase as we onboard additional customers with hourly employees, supported by our hardware and updated app

Pain points and missing features (per customer research)

Schedule visibility

Viewing schedules so employees know their shifts immediately upon clockin

Work context

Collecting context from schedules to inform work assignments

Faster clock-ins

Modernizing clock-in methods by removing cumbersome name searches

Future expansion

Building a foundation for future features, including timecard edits, schedule change requests, and onboarding support

Legacy Kiosk home-page research reference
Legacy Kiosk app - Home page
FIG. 04Legacy Kiosk app - Home page

Strategy/IA

Strategy/IA

Layout rubric and dual-app model (BYOD vs Device) to prevent drift

Timeclock strategy and IA composite diagram — centered
Timeclock strategy and IA composite diagram — lower-left
Timeclock layout rubric diagram
Timeclock dual-app model diagram
FIG. 05Timeclock strategy and IA composite diagrams · Timeclock layout rubric diagram · Timeclock dual-app model diagram · Timeclock future-ready IA diagram

Flows

Flows

Mapping ideal employee journeys

Timeclock ideal employee journey flow carousel
01
FIG. 06Timeclock ideal employee journey flow carousel

Prototype/Test

Prototype/Test

Internal dogfood; perf goals (< 3s to clock in/out)

SYNEL10 hardware device test video
SYNEL10 Hardware Device - test
FIG. 07SYNEL10 Hardware Device - test

Ship + iterate

Ship + iterate

Brand palette update + visual QA; post-launch polish; additional features

Timeclock Home page — left state
Timeclock Home page — right state
Timeclock Clock in — left state
Timeclock Clock in — right state
Timeclock Switch job selection — left state
Timeclock Switch job selection — right state
Timeclock Taking a break — left state
Timeclock Taking a break — right state
Timeclock View my shift report — left state
Timeclock View my shift report — right state
Timeclock View timesheet comments — left state
Timeclock View timesheet comments — right state
Timeclock Enter shift premiums — left state
Timeclock Enter shift premiums — right state
FIG. 08Home page · Clock in · Switch job selection · Taking a break · View my shift report · View timesheet comments · Enter shift premiums

What I learned

  1. A simple-looking app can hide a lot of complexity
  2. Raise the bar early: solve with a framework, not a feature patch.
  3. Designing for BYOD(evice) + dedicated hardware in parallel prevents product drift.
  4. Clear performance constraints (e.g., <3s to clock) sharpen design decisions.
“Special shoutout to Adrian… [he led] an entire app redesign and an extensible tablet design system that didn’t exist at Rippling. The result is something we can be proud of.”
— Garrett Spiegel, Director, Product Management