Our team was tasked with modernizing the legacy time card interface, focusing on core user workflows. We transformed a dated system into an intuitive platform where managers could easily review hours, make corrections, handle approvals, and apply overrides. Below is a comparison showing how we evolved the interface from its original state to our new Angular-based design system, significantly improving both functionality and visual clarity.
Two key questions drove our redesign: How could we make the existing system more usable, and how could we help managers review time cards more efficiently?
The challenge was finding a universal solution that would work across different industries and company sizes. Rather than jumping into layout options, we first needed to understand what information was truly essential for users completing their core tasks.
I led multiple working sessions with our team to rethink how time card data should be organized. Working closely with our product owner, service representative, and business analyst, we initially assumed users needed constant access to all data. Through subsequent usability testing, we validated whether this assumption held true and refined our approach based on real user feedback.
Our biggest challenge was improving the experience while working within strict technical constraints. Although my initial proposal required substantial backend changes, I successfully advocated for these modifications by demonstrating how they would significantly improve accessibility.Early discussions centered around showing all information at once, but our research revealed users preferred a cleaner approach. We pivoted to focus on what mattered most: making information easy to find and scan. This data-driven decision helped us transform a complex interface into one that prioritized user efficiency.
After numerous revisions we were able to deliver a simplified experience that was preferred by both our current users and target users as well.
