Company: WurkNow, Inc
Role: UX/UI Designer
Tools: Figma, Design System, Prototyping
Collaboration: Product Owner
Project Overview
The Payroll product was an internal HR platform used for managing employee compensation and reporting. The existing product had strong functionality but lacked design consistency, visual hierarchy, and scalability.My goal was to completely redesign the interface using Figma, establish a modern design system, and improve the overall user experience — while preserving the product’s core functionality.
Problem
The original Payroll product suffered from:
- No consistent branding or visual identity
- Cluttered layout and poor readability
- Inefficient use of space and hierarchy
- No scalable design system for future growth
This created usability issues and a disconnected visual experience that did not reflect the brand’s professionalism.
Design Goals
- Introduce a modern and clean design aligned with brand guidelines.
- Develop a scalable design system to support new features.
- Improve readability, usability, and user navigation.
Keep existing functionality to ensure user familiarity.
Research & Analysis
I began by analyzing the existing product structure, workflows, and pain points. Through discussions with the Product Owner and team members, I identified the areas where users experienced the most friction.
I focused on understanding how HR and payroll teams used the product daily to ensure that the new design would enhance their efficiency, not disrupt it.
Design Process
1. Audit & Wireframing
Mapped existing screens, defined key user flows, and created low-fidelity wireframes to restructure the layout.
2. UI Exploration
Explored new theme colors, typography, and layout grids. The goal was to create a fresh, professional aesthetic while maintaining readability.
3. Design System Creation
Built a Figma design system with reusable components — buttons, tables, modals, and input fields — to ensure visual consistency and scalability.
4. Prototyping & Interaction
Created a clickable prototype in Figma to simulate real user interactions. This allowed the team to experience the new flow and provide actionable feedback early.
5. Collaboration & Iteration
Worked closely with the Product Owner to review and refine designs based on feedback, ensuring all business logic and product constraints were respected.
Final Design
- A modern visual style with balanced spacing and refined typography.
- New theme color palette that strengthened brand identity.
- Improved navigation and content hierarchy.
Reusable components that made future design updates faster and more consistent.
Final Impact
- Delivered a scalable, user-friendly interface ready for future feature expansion.
- Improved user satisfaction and engagement through a clean, intuitive design.
- The new design system is now used as a foundation for other internal products.
- Helped align the visual identity of the Payroll product with the company’s brand direction.
Key Takeaways
This project taught me how powerful a thoughtful redesign can be — not just in aesthetics but in product scalability and user experience.
By focusing on clarity, consistency, and collaboration, I turned a complex system into a cohesive, user-centered product that’s ready for growth.