Project Overview

Dinnaco is looking for a simple and intuitive time tracking application that works on Windows 7+ desktops.

The application will record and summarise the time spent against projects and tasks throughout the day either by a timer or in blocks of time. The user can review the time recorded every 2 weeks and tweak the totals if necessary, and then this will be imported into the user’s SAP timesheet system. The application will also pull recently used project codes from SAP to allow the user to record time to relevant codes.

It is vital that the user experience is intuitive and fast by minimising mouse clicks, using keyboard shortcuts and screen hotspots where relevant to reduce the time it takes a user to record time.

Challenge Overview

The goal of this challenge is to convert the provided design into a .NET WPF clickable desktop prototype application.

Challenge Requirements

UI flow and navigation

The design screens are placed in this invisionapp (link https://invis.io/EY5LMVHA8 )  to show you the actions done in each screen, and flow/navigation between screens. Additional details and requirements are attached in the forums.

If any flow or action not clear, please post in forums to get clarifications from PM/Copilot.

UI and Screens in scope

1. Tray Reminder

   1. Provide notification reminders to user.

   2. Screenshots:

      1. 4d-Reminder-3.jpg

      2. 4b-Reminder-1.jpg

      3. 4c-Reminder-2.jpg

   3. Clicking (x) will close the reminder popup.

   4. Clicking on “Add New Project” should open “3a-Widget---New-project.jpg” screen.

   5. Clicking on “Open Your Projects” should open “1a-Widget---Tracker.jpg” screen.

   6. Clicking on “Start a timer” should open “1a-Widget---Tracker.jpg” screen.

   7. You will use NotifyIcon.

   8. Notifications Logic

      1. No active projects – there are no projects currently loaded (show once a day at 10am)

      2. o No timer is running – no timer is currently running (show once a day at 10am)

      3. o Timer active – a timer is running against a project or task (show once an hour)

2. Tracker Small Widget

   1. Screenshots

      1. 1e-Widget---Add-time.jpg

      2. 1c-Widget---Task-typing.jpg

      3. 1g-Widget---Resume.jpg

      4. 1a-Widget---Tracker.jpg

      5. 1f-Widget---Tracking.jpg

      6. 1b-Widget---Task-hover.jpg

      7. 1h-Widget---Check.jpg

      8. 1i-Widget---Details-hover.jpg

      9. 1d-Widget---Add-time-hover.jpg

      10. 3d-Widget---Empty.jpg

   2. By default when no projects it will show the widget as shown in “3d-Widget---Empty.jpg” screen.

   3. Clicking “New Project” should open “3a-Widget---New-project.jpg” screen.

   4. This widget will list currently active projects, each section will have following information:

      1. First row is the project row

      2. Following rows are the tasks

      3. “New Task” button add new row and allow user to insert description of the task or select from drop down.

   5. For a task:

      1. By default it will show 00:00 time in counter section.

      2. Hovering over the task row will show “play” button, clicking on it will start the counter.

      3. While the task is running hovering over it will show “pause” or “stop” icons.

         1. Clicking on “pause” will show “play” and “stop” buttons and pause the timer.

         2. Clicking on “Stop” will stop the timer and show “play” button.

      4. User can add time manually by clicking on “Add Time” button (i.e. +6m), user will select a value, then click on “>” icon to close the “Add Time” section. The selected time will be manually added to the timer (increment timer).

   6. There can be one single active task at a time.

   7. User can navigate to details screen clicking on “>” icon as shown in this screen “1i-Widget---Details-hover.jpg”.

   8. Selecting a task would mark it as complete.

   9. The vertical dots when hovering over the task allows users to reorder tasks.

   10. Editing task name should be implemented.

3. Task Details Small Widget

   1. Screenshots:

      1. 2a-Widget---Task-details.jpg

      2. 2b-Widget---Task-details---select.jpg

   2. User can do all actions a user can do for a task row as described in Tracker Small Widget described above.

   3. Check as default should store the information in JS to simulate how to mark a task as default or not.

   4. Add project to SAP button should be dead link, no action to be done when clicking on it for now.

   5. DELETE button will remove the task from the project.

   6. Clicking Back button in header will take user back to Tracker Small Widget.

   7. Clicking Expand icon will open up the Full screen version of Task Details.

4. New Project Small Widget

   1. Screenshots:

      1. 3b-Widget---New-project---SAP.jpg

      2. 3c-Widget---New-project---Temporary.jpg

      3. 3a-Widget---New-project.jpg

   2. In your solution you need to simulate loading SAP project or creating a temp project. Both should be saved in JS and rendered in Tracker view.

   3. The flow is shown in the invisionapp, if you have any questions please ask in forums.

5. Tracker Full Screen

   1. We don’t have screenshot or design for this, but basically it will be a full screen view same as “5b-Fullscreen---Settings.jpg” screen but content will be similar to the Tracker content.

   2. The functionality of the page will be same as Tracker Small Widget but we for Task details we show a small widget as in “6a-Fullscreen---Day-view.jpg”.

6. Settings Screen

   1. Screenshots:

      1. 5b-Fullscreen---Settings.jpg

   2. Clicking on the checkmark circle will enable that field.

   3. Tracking Days – the days will be checkboxes, user can check/uncheck a day to specify the days.

   4. Tracking hours and Launch Hours: the fields values should allow only value in “HH:MM” format between 00:00-12:00.

   5. Default Add Time : this is a radio group buttons.

   6. Active Projects : nothing happen when clicking on “Select from Map” button.

   7. Shortcuts : the combination should be keyboard keys combination. How to implement this should read directly from user clicking on the keyboard.

   8. Notifications :

      1. For first two rows the field values format will be same as tracking/launch hours.

      2. For the Submission Reminder this will allow users to set the reminder day of the first/last two weeks.

7. Summary Full Screen View

   1. Screenshots :

      1. 6b-Fullscreen---Week-view.jpg

      2. 6c-Fullscreen---Submitted.jpg

      3. 6f-Fullscreen---Meeting-Hover.jpg

      4. 6d-Fullscreen---Meeting-setting-1.jpg

      5. 6a-Fullscreen---Day-view.jpg

      6. 6e-Fullscreen---Meeting-setting-2.jpg

   2. We don’t have small widget view of this screen.

   3. The date in top of the screen represents the date selected in the calendar, by default it is current day. User can also select a range so this will show start/end date of the range as shown in the “6b-Fullscreen---Week-view.jpg” screen.

   4. The project/tasks list will work same as described above.

   5. Viewing task detail will show the right side widget as shown in “6a-Fullscreen---Day-view.jpg“ screenshot.

   6. For select view, if week is selected then the calendar by default will select the current week.

   7. Day view is not required so Select View clicking on “Day View” nothing will happen.

   8. User can drag and drop a meeting from left side and drop it in a task. This will help user to view tasks associated with meetings, so when hovering over a meeting it will highlight the meeting and tasks associated as shown in 6f-Fullscreen---Meeting-Hover.jpg screen.

   9. Submit button get enabled only if user select at least one task.

   10. The Submit/Validate/New Project buttons hover state should look like the Submit button styling in “6f-Fullscreen---Meeting-Hover.jpg”

Technology Stack

• - .NET Framework 4.5

• - C#

• - WPF

• - XAML

Documents

The design and screenshots are provided in challenge forums.

 

Final Submission Guidelines

Submission

• - All the files that implement the above requirements.

• - Deployment document to deploy the prototype.

• - Notes file to reviewer if needed.