Company project at Infinite Open Source Solutions LLP. Track time, manage projects, and boost productivity all in one place. Desklog gives teams clear insights to work smarter and move faster.
My role UI/UX design and frontend development
Case study · Product design
Work Hours Calculator: clear, fast, finished
A productivity-focused web tool designed to simplify time tracking, timesheet management, and earnings estimation in a seamless and intuitive way.
The project
From a working calculator to a clear experience
This project involved end-to-end product design and frontend development, where the goal was to transform a functional calculator into a clear, user-friendly, and conversion-driven experience.
The interface is structured around three core workflows: Daily Hours, Weekly Timesheet, and Pay Calculator, allowing users to quickly calculate work durations, track weekly productivity, and estimate earnings with minimal effort.
Special attention was given to interaction clarity, input efficiency, and visual hierarchy, ensuring that users can complete tasks without confusion or friction.
01 · Problem and solution
Scattered inputs, made simple
Users struggled to calculate work hours and earnings with scattered inputs and manual maths. The design answers with two ideas.
- Simplified work hours calculation: clock in, clock out and break times in one place
- Real-time pay estimation, with pay rate and overtime built in
02 · Process
Four steps, then three workflows
The work moved through discover, define, design and deliver. The result is three workflows, each with its own flow.
- Daily Hours
- Weekly Timesheet
- Pay Calculator
03 · Sketch to screen
From hand sketches to the working design
Each workflow started as a hand-drawn wireframe and was refined into the final interface, then annotated to show how each control works.
Design system
Satoshi, Inter and the Desklog palette
The calculator reuses the Desklog brand: Satoshi as the primary font, Inter as the secondary, and a green and blue palette.
White
#FFFFFFSurfacesSoft green
#F4F9ECTinted backgroundsPrimary green
#81B504Primary actions and active tabsWarm tint
#FEF6EBHighlightsCool grey
#E6ECF1Dividers and inputsDeep blue
#004073Headings and logo
The result
Three working screens
The final design, translated into a fully responsive frontend using HTML, CSS, JavaScript, and Bootstrap, maintaining pixel-perfect accuracy and smooth interactions.
Need something similar?
Related service
This project is an example of my ui/ux design and frontend development work.
More projects
