Overview

This case study outlines the development of a desktop time widget aimed at simplifying work hour tracking and project monitoring for employees, prioritizing clarity and simplicity. Additionally, it discusses the creation of a volunteer timekeeping system for the KeelWorks Foundation, focusing on streamlining volunteer hour tracking, assignment management, and data reporting to address existing inefficiencies.

Role

Junior UX Designer

Tools used

Figma, FigJam, Team Gnatt, Google Docs

Problem

To improve the current volunteer time tracking and management by providing a smoother experience for volunteers to submit accurate time entries and enabling administrators to optimize management strategies with data-driven insights. Employees frequently procrastinate filling out timesheets due to the task's lack of enjoyment, leading to challenges in remembering time spent on tasks and projects, resulting in some employees forgetting to track their work hours entirely. Therefore, there is a need for an intuitive and easy-to-use time tracking interaction for employees to conveniently track their work hours, manually and automatically.

My role

I teamed up with another UX designer to develop a desktop time tracking widget for both Windows and Mac platforms.

I was responsible for the overall research and designing the time tracking widget by doing:

  • Research, C&C analysis, user persona and user flow.

  • End to end design process from sketches, wire framing, interactive design, prototyping, and hi-fidelities.

  • Presenting PM, developers and other team members about updates and changes.

  • Collaborating with other team members.

I dug into time tracking apps and websites, especially focusing on widgets for MacBook and Windows. My competitive and comparative analysis gained serious traction. I had to delve into companies tackling specific scenarios in interactions to refine my approach continuously as challenges evolved. I also conducted a comprehensive comparison with Mac widgets, carefully examining features and user-friendliness.

Comparative & Competitive 

Analysis

I dove deep into analyzing various time tracking apps and websites, specifically focusing on MacBook and Windows widgets. This competitive analysis really packed a punch, giving me some powerful insights and understanding into the landscape.

User Flow

After referencing the competitive analysis, I started by crafting the user flow to design a desktop time widget focused on simplifying work hour tracking, particularly emphasizing streamlining volunteer hour tracking, assignment management, and data reporting. Developing this user flow helped prioritize and structure the necessary screens for users to efficiently submit their work hour entries.

User Persona

To identify user pain points and frustrations, I developed a persona to gain deeper insights into the specific user I aimed to assist, enabling a better understanding of their challenges and problems through research to clarify their needs and difficulties.

Solution

Design a desktop time tracking widget for team-based monitoring, with features like manual and automatic task creation, work hour tracking, and displaying team members' status. It aims to streamline processes, ensure transparency in tasks and hours, and improve volunteer time tracking by providing a smoother submission experience and data-driven insights for administrators. It also includes user-friendly interfaces and reminders to address employees' timesheet procrastination.

Ideating and Sketches

As we began transitioning towards visual representations of our solution, we organized a design studio session to consolidate all our ideas and iterate on the aspects we identified as beneficial and effective.

Low Fidelity Wireframe

Process from Low Fidelity to High Fidelity

I transformed the low-fidelity wireframe into a mid-fidelity wireframe using the valuable user insights.

High Fidelity Wireframe

I transformed the mid-fidelity wireframe into a high-fidelity wireframe using the valuable user insights.

Next Steps

  • Conduct usability tests and refine the design based on user feedback.

  • Include a calendar design page that allows for manual entry of past and future dates.

  • Enhance the desktop time widget to ensure compatibility and optimal performance on both Windows and Mac.

  • Develop a consistent and intuitive user interface tailored to the needs of both employees and volunteers.

  • Collaborate with developers to implement the design, ensuring it meets all specified requirements.