Making Work Frictionless: Redesigning Crootive’s Employee App with Claude

Most company employee portals feel like dated back-office software that staff actively avoid using. With a lean 4-person team, I paired quick UX journey mapping with Claude to rapidly prototype and test a consumer-grade mobile experience and cutting daily clock-in times to under 3 seconds and boosting daily self-service adoption to 92%.

Role

Lead Product Designer (UX/UI, Systems Planning, Interactive Prototyping)

Team

4-person multidisciplinary team (1 Designer, 2 Engineers, 1 Product/Ops)

Timeline

8 weeks (Concept to Live Product)

Platform

iOS & Android (Mobile Web & Native Wrapper)

Overview

Before the redesign, Crootive’s mobile experience was a frequent source of morning frustration. Staff regularly dealt with failed GPS check-ins, buried leave balance numbers, and confusing multi-step forms just to view their monthly payslips. As a result, employees bypassed the app entirely and messaged HR directly on WhatsApp for routine questions.

With a lean team and zero time for slow, back-and-forth design handoffs, we took a code-assisted approach. I mapped out clear mobile journeys in Figma, then immediately used Claude to spin up interactive mobile web prototypes. Testing these working prototypes directly on physical phones allowed us to dial in thumb-zone ergonomic spacing, instant location verification, and offline fallbacks before writing a single line of production code.

The Challenge

Shadowing employees during morning arrivals and reviewing support logs highlighted three core issues:

Morning Clock-In Friction: Employees queued at the office door waiting for sluggish GPS checks to pass, often triggering false "out-of-range" errors.
Lack of Transparency: Leave quotas and payroll deductions were hidden behind deep menus, forcing HR managers to field dozens of repetitive balance inquiries every week.
Cluttered, Desktop-Style UI: Small tap targets, dense data tables, and cluttered inputs made using the app with one hand frustrating for on-the-go shift workers.

`<3s`

Clock-In Speed

Down from 45 seconds of loading and GPS checks

`-70%`

HR Support Inquiries

Reduced repetitive leave and payslip messages on chat

`92%`

Daily Active Adoption

Employees using the app daily without manager reminders

Design Process

01. Mapping the "Thumb-Zone" Flows (Figma): I broke down the app into three daily actions: clocking in, requesting time off, and checking pay. In Figma, I mapped out clean user journeys focused on single-thumb reachability, large tap targets, and minimal navigation depth.

02. Rapid Interactive Prototyping (Claude): Instead of creating dozens of static mobile mockups, I used Claude to quickly scaffold responsive, touch-friendly HTML/CSS prototypes. This allowed us to test real touch interactions, transition speeds, and form validation right on our phones within hours.

03. Field-Testing Real-World Edge Cases: We loaded the prototype with messy real-world conditions: weak cellular data in office elevators, delayed location services, and shift workers trying to clock in while walking. This testing directly informed our graceful fallback states, offline caching, and instant tactile haptics.

04. Direct-to-Engine Handoff: Because our Claude-assisted prototypes were already built with clean layout structures and mobile interaction patterns, our engineers turned the prototype code directly into the production mobile views, cutting build time by nearly half.

Key Features

01. One-Tap Geofenced Clock-In

A prominent, thumb-friendly arrival card that automatically validates the user's location in the background. Staff can tap once to clock in, see immediate visual feedback, and carry on with their day in seconds.

02. Transparent Leave & Pay Hub

A calm, visual summary card showing exact remaining vacation days, approved time off, and itemized net pay breakdowns so employees never have to guess what will appear on their next paycheck.

03. Embedded Mobile AI Assistant

A built-in conversational helper accessible directly from the navigation bar. Staff can ask simple questions like "How many sick days do I have left?" or "Download my July payslip" and get instant, accurate answers without contacting HR.

"Our team used to complain about the mobile check-in every single week. Since the update, clocking in is instantaneous, and I rarely get messages asking for leave balance updates."

Mohsin-ul-Haq

Operations Manager & Pilot Client Lead

Conclusion

Enterprise mobile requires consumer standards: Employees expect internal work apps to feel just as fast and intuitive as consumer apps like Uber or Spotify.

Test on physical devices early: Spacing, micro-typography, and button reach feel completely different on a desktop monitor compared to a smartphone in one hand.

Prototyping with AI unblocks lean teams: Using Claude to generate interactive mobile prototypes helped our 4-person team validate usability and hand off production-ready layouts in a fraction of the time.

Back