Context
Web Clock is a daily touchpoint for frontline workers like registered nurses who need to clock in and out of shifts quickly — often on the go and under time pressure. As the sole designer on this project, I was tasked with redesigning the experience for both mobile and desktop.
What made this project unique was the creative constraint: I deliberately designed outside Redwood conventions first to explore the best possible experience, then reverse-engineered solutions back into the component framework. The designs earned design leadership approval before the project was paused due to technical constraints — and are planned for future implementation within the HCM product suite.
"I wireframed creatively outside Redwood conventions first, then reverse-engineered solutions back into the component framework — earning design leadership approval before the project was paused due to technical constraints."
User Story
"As a Registered Nurse, I need to quickly clock in and out of my work shifts so that I can spend more time caring for my patients."
The nurse's primary goal is speed and clarity. Every second spent navigating a confusing interface is a second away from patient care. The design needed to make the most critical action — clocking in or out — immediately accessible, with just enough context to feel confident doing it.
Competitive Analysis
Before designing, I mapped the competitive landscape to understand how other workforce management apps approach the clock in/out experience. Three patterns emerged that directly informed my design decisions.
Emphasis on geofencing
Every app showed a map view within the clock in/out feature to confirm the employee is at the jobsite. This raised the question: is the map valuable to users, or should it stay hidden in the backend?
Simple clock in/out button
Most apps used a single one-tap button. Camelo introduced a swipe interaction. This opened an opportunity to explore micro-interactions that make the experience feel more intentional and satisfying.
Shift, hours & activity display
Apps varied in what they surfaced — some showed the shift schedule, others showed a timeline of active vs break time. User research was needed to determine what's most valuable to show.
Designing Outside the System
My process started with a deliberate choice: ignore the Redwood component library and design the best possible experience first. Too often, designers constrain themselves to what's available in a design system before understanding what users actually need. I wanted to find the ideal solution first, then figure out how to build it.
I mapped three states of the experience — before clocking in, during the shift, and after the shift ends — and designed each one freely, prioritizing clarity, speed, and context for the user.
"Design the best experience first. Then figure out how to build it — not the other way around."
Before clocking in
View map
During shift
After shift ends
These wireframes weren't directly buildable — they relied on patterns and interactions that didn't exist in the Redwood component library yet. Rather than compromise the experience or start over, I brought the designs to the Redwood design team and worked with them to understand what was possible. That collaboration became the bridge between ideal and buildable.
Finding the Components to Fit the Design
With feedback from the Redwood team, I went back through my wireframes and identified which design patterns could be achieved with existing components — and which required creative workarounds.
One of the biggest challenges was finding a component to display time in a way that felt meaningful — something that could clearly communicate how long until a shift starts, or how long someone has been clocked in. That component simply didn't exist in the Redwood library yet. I worked with what was available and pushed for a display treatment that kept the time prominent and scannable — because for a nurse mid-shift, glancing at that number needs to be instant.
I chose the welcome banner template specifically because it's engaging — it gives users a moment of context and warmth before jumping into tasks. For a frontline worker starting a 12-hour shift, "Good Morning Meg" matters. It makes the product feel human, not just functional. The banner also let me differentiate the three shift states (morning, midday, evening) naturally.
Before clocking in
During shift
After shift ends
Outcome
The designs were approved by VP and PM leadership and are planned for implementation in the HCM product suite. While paused due to technical constraints, the work established a clear design direction and a reusable framework for the clock in/out experience.
ApproachDesigned outside Redwood constraints first, then reverse-engineered back into the framework
CollaborationPartnered with Redwood design team to resolve component gaps and find buildable solutions
ApprovalDesigns approved by VP and PM team — pending implementation due to technical constraints