Track Time

A Saas application for the organization where all the business users can record their work in timesheets.

Role and Responsibilities:

UI-UX Designer, Visual Designer, Interaction Designer

  • Collaborated on a contract project to design the UI and UX for a Timesheet application catering to a service-based robotic and automation company.
  • Led the creation of an internal web application to accurately track staff time across various projects, calculating hours and Euro costs per project.
  • Transformed the existing manual and error-prone Excel-based tracking system into an efficient digital solution.
  • Worked closely with the product manager to grasp project requirements and address existing pain points.

Research and Analysis

  • Primary research
  • User Interviews
  • Competitor Analysis
  • User Persona
  • Empathy map
  • Task Flow Diagram

Design Deliverables

  • Wireframes
  • Mock-ups
  • Design System
  • Component Library
  • Clickable Prototype
  • Design Hand-off

Tools

  • Figma
  • FigJam
  • Wireframe.cc
  • Zeplin

Problem Statement:

How to avoid repetitive process of timesheet submission and save the user’s time and efforts?

Solution

Automate the whole process and hence improve the user experience and efficiency.

Design Thinking Process

Research and Discovery:

Primary User Research

By primary user research, I organizationally depicts the three key tasks to focus on: 1. Onboarding and registration of user, 2. Project Management, and 3. Timesheet addition and submission related functions.  I have created user persona and empathy map based on few user interviews from the organization.

User Persona

Discovery of pain points

  • Manual way of filling and submitting timesheet on a daily basis is time-consuming process
  • Can not save the same copy of work
  • Manually management of project, team, and task allocation
  • Difficult to manage multiple timesheet of team members came in different formats
  • Keeping track of tasks and its status is very problematic

Empathy Map

Use Cases and Process Flow

Use Cases

Mapped out detailed user journeys to visualize the entire experience, identifying touchpoints and pain points. Created comprehensive process flows for both Team Members and Team Leaders, ensuring optimal user interaction and a seamless process.

Process flow

Conducted detailed process analysis, resulting in comprehensive process flows for distinct user roles within the application.

Team Member

  • Streamlined the onboarding process, enabling team members to efficiently enter and save timesheet data.
  • Developed a seamless submission process for timesheets, allowing easy approval by Team Leaders.
  • Implemented advanced timesheet reporting and download functionalities.
  • Enhanced profile management features for improved user experience.

Team Leader

  • Designed intuitive features to manage team members, projects, and clients.
  • Created an efficient system for allocating team members to various projects.
  • Crafted a project overview page with comprehensive metrics for individual project analysis.
  • Enabled Team Leaders to review, approve, and reject team member timesheets.
  • Designed robust reporting and analytics capabilities at both project and month levels.

Design and Prototyping

User-centered Design

Developed low-fidelity wireframes to establish the basic structure and flow of the application. Collaborated with stakeholders to refine wireframes based on feedback. Transitioned to high-fidelity mockups and prototypes using tools like Figma, adding visual elements and interactive features for a realistic user experience.

Design System and Component Libeary:

Created a design system and component library to maintain consistency across the application. Defined typography, color palettes, buttons, form elements, and other UI components. Ensured a cohesive visual identity and a seamless user interface.

Establishing Visual Design

Visually articulating all potential aspects of the  TackTime product meant defining a baseline design system that identified key elements of its visual vocabulary. I wanted its visual design to always refer back to its core mission: Empowering team leaders and team members.

Predominantly blue palettes imbued screens with a sense of calm and control; simple button states and clear iconography would help make tasks feel more manageable; and a single, modern sans-serif with large, open counters ensured legibility and clarity in messaging.

High Fidelity Prototype

The high-fidelity prototype brought test users closest to the real experience yet, and it revealed some issues. While users were able to complete the onboarding experience, the realistic nature of it revealed some apprehension. Security, privacy, what happens if they forgot their passwords, suspicion … these were among the topics raised by test subjects. They were also able to verbalize a need they hadn’t thought of before this iteration: Could the app somehow visualize the value they are receiving from each of the streaming services they subscribe to — yet another piece of information that could empower them to make better decisions about what makes sense financially.

Result

The project’s outcome significantly improved efficiency, accuracy, and user satisfaction in time tracking and project management processes. The new Time Tracking application transformed the time management process for the organization. By incorporating user-centric design principles and a robust architecture, the application streamlined project-related activities and significantly reduced manual efforts. The new design system enabled easy scalability and maintenance, fostering a consistent and efficient user experience.