Hour Arc is a productivity solution to make clock-in and clock-out easier for office workers. With trackable timesheet to track status of projects each employee is working on.
Tools: Figma, Adobe Illustrator, Adobe Photoshop
UX/UI Design
Logo Design
THE REDESIGN
A comparison of the rough UI layout between the existing internal productivity application and the redesigned version highlights key improvements.
The existing website features small clock-in and clock-out icons positioned in the right corner, making them difficult to see. Additionally, the icon state change after clocking in is not easily noticeable.
The redesigned application introduces a more intuitive interface with:
Large buttons with clear text labels for each state: Clock-In, Break, and Clock-Out
Colour indicators (green for clock-in and red for clock-out) to improve visibility
A circular graph displaying hours worked
Weekly charts to track work hours over time
Furthermore, news and announcements, which are less frequently used, have been removed from the homepage and placed on a separate page accessible via the menu for better organization.
After redesigning the main pages of Hour Arc, such as the home page and menu, I began assembling all the pages into a wireframe that maps the user journey. This process helped visualise how users navigate through the app, how they move from one feature to another, and how they can easily jump back to different pages to access key functionalities efficiently.
The solution incorporates infographics to visually present key aspects of the application, enhancing clarity and usability.
The hero section features a circular graph clock to track worked hours, providing a clear and engaging visual. Clock-in, break, and clock-out buttons are designed with distinct colours (green, yellow, and red) for easy recognition and quick interaction.
A weekly infographic graph displays hours worked over the past week, improving at-a-glance insights while removing unnecessary functions like news, which previously disrupted the visual hierarchy.
The timesheet allows employees to log daily work on projects, with a Google Calendar-inspired layout offering daily, weekly, and monthly views for detailed and high-level overviews.
Additionally, the project overview page enables users to add and track project statuses, seamlessly integrating them into the timesheet for improved workflow efficiency.
Hour Arc also includes an employee profile page and a staff contact directory, making it easier to find colleagues’ contact details.
Furthermore, a dedicated news page for announcements and internal updates replaces the cluttered home page design, ensuring a cleaner, more focused user experience.
For future development, I aim to design additional flows for this application, such as the admin flow, as administrators will need to oversee employee data and manage news posts. This will be another challenging aspect to develop for Hour Arc.
GET IN TOUCH
