Challenge Summary
Welcome to "Responsive Time Tracking Web App Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX design for our new tool that will provide an Integrated view of the timesheet, leave, and attendance. The user of this app also will be able to fill efforts, apply for leave and edit attendance in this app. Your design creation needs to be creative, intuitive, simple, easy to use, and offer a great focus to the user.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Homepage Screen
02) Efforts Screen
03) Leave Screen
04) Manager Dashboard Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Homepage Screen
02) Efforts Screen
03) Leave Screen
04) Manager Dashboard Screen
05) Policies/FAQs Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create an application to track user time-log Integrated view of the timesheet, leave and attendance. To elaborate what’s required in this app:
- Weekly view of the user swipe in swipe out time
- Information on any leaves which has got deducted if efforts are not filled
- The user will be able to fill efforts, apply for leave and edit attendance
- The user needs a dashboard with information on leave (leave balance, leave availed, compensatory leave, TOFA (time on floor), and also some of the policies which can be linked
Challenge Goal
The goal of this challenge is to develop UI/UX for a responsive web application that will allow users to log timesheets
Design Consideration
- Simple, Clean, Professional, and Intuitive look and feel
- Simplicity to find any necessary information
- Needs to offer a great focus to the user
- Best Practice for Responsive Web-Based App (Desktop and Mobile)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=669700
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Homepage Screen
- Default screen that will appear after successful login
- Show user summary information about recent activity in the app
- Needs to have notification area to reminds the user about the important activity or latest updates related to the user in the app
- Weekly view of the user swipe in and swipe out time
- Information on any leaves which has got deducted if efforts are not filled
- The user will be able to access features like fill effort, apply for leave and edit attendance from this screen
- The user will be able to go to a new screen to see 'leave' information (leave balance, leave availed, compensatory leave, TOFA (time on floor)
- Link to access the timesheet, leave and attendance policies screens
02) Efforts Screen
- By default, the timesheet will have a weekly view
- Provide a pre-filled time which the user needs to log in for the day, the user also can edit the time if necessary
- The page should show categories of tasks and the user should be able to specify the time spent on each category. The task category can be "Project work", "Non-project work", "Meetings" etc. Please make suitable assumptions because the categories may change over time.
- The user will be able to fill overtime, please consider overtime as one category of work that can be filled for the Workweek (applicable for specific countries - needs to have this)
03) Leave Screen
- The user will be able to apply for leave (as per relevant category, please see excel sheet), will also have the option to modify or cancel leave
- Leave page will have a number of leaves availed
- Number of leaves available
- Number of leaves lapsed
- Number of compensatory leaves earned
- Holiday calendar (as per country)
04) Manager Dashboard Screen
- The manager will be able to get the weekly report of the employee
- Include the number of efforts logged in vs number of hours on floor
- Include the leave trend of the employee
- The app must have the ability to drilled down and see a specific report of the app
- Ability to export the report data to another format (pdf, excel, etc)
- If the user edits his/her attendance, applies leave it goes for manager approval - Manager will be able to view that in the task list
- Outliers, continuously logging less or logging more time
05) Policies/FAQs Screen
- Needs a FAQs screen to show the following information:
-- Policies
-- Contact Form
-- List of FAQs
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Branding Guidelines
- Follow Our Branding Guidelines Document
Documentation
- Branding Guidelines Document
- Leave Types.xlsx
Target Devices
- Responsive Web Based Application
- Desktop: minimum 1366px Width with Height adjusted accordingly
- Mobile: Minimum 320px x 480px
Target Audiences
- Internal Employees - they should be able to have a view of his attendance, fill timesheet, apply for leave
- Manager - monitoring and manage the employee timesheet
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback01) Homepage Screen
02) Efforts Screen
03) Leave Screen
04) Manager Dashboard Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates01) Homepage Screen
02) Efforts Screen
03) Leave Screen
04) Manager Dashboard Screen
05) Policies/FAQs Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create an application to track user time-log Integrated view of the timesheet, leave and attendance. To elaborate what’s required in this app:
- Weekly view of the user swipe in swipe out time
- Information on any leaves which has got deducted if efforts are not filled
- The user will be able to fill efforts, apply for leave and edit attendance
- The user needs a dashboard with information on leave (leave balance, leave availed, compensatory leave, TOFA (time on floor), and also some of the policies which can be linked
Challenge Goal
The goal of this challenge is to develop UI/UX for a responsive web application that will allow users to log timesheets
Design Consideration
- Simple, Clean, Professional, and Intuitive look and feel
- Simplicity to find any necessary information
- Needs to offer a great focus to the user
- Best Practice for Responsive Web-Based App (Desktop and Mobile)
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=669700
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Homepage Screen
- Default screen that will appear after successful login
- Show user summary information about recent activity in the app
- Needs to have notification area to reminds the user about the important activity or latest updates related to the user in the app
- Weekly view of the user swipe in and swipe out time
- Information on any leaves which has got deducted if efforts are not filled
- The user will be able to access features like fill effort, apply for leave and edit attendance from this screen
- The user will be able to go to a new screen to see 'leave' information (leave balance, leave availed, compensatory leave, TOFA (time on floor)
- Link to access the timesheet, leave and attendance policies screens
02) Efforts Screen
- By default, the timesheet will have a weekly view
- Provide a pre-filled time which the user needs to log in for the day, the user also can edit the time if necessary
- The page should show categories of tasks and the user should be able to specify the time spent on each category. The task category can be "Project work", "Non-project work", "Meetings" etc. Please make suitable assumptions because the categories may change over time.
- The user will be able to fill overtime, please consider overtime as one category of work that can be filled for the Workweek (applicable for specific countries - needs to have this)
03) Leave Screen
- The user will be able to apply for leave (as per relevant category, please see excel sheet), will also have the option to modify or cancel leave
- Leave page will have a number of leaves availed
- Number of leaves available
- Number of leaves lapsed
- Number of compensatory leaves earned
- Holiday calendar (as per country)
04) Manager Dashboard Screen
- The manager will be able to get the weekly report of the employee
- Include the number of efforts logged in vs number of hours on floor
- Include the leave trend of the employee
- The app must have the ability to drilled down and see a specific report of the app
- Ability to export the report data to another format (pdf, excel, etc)
- If the user edits his/her attendance, applies leave it goes for manager approval - Manager will be able to view that in the task list
- Outliers, continuously logging less or logging more time
05) Policies/FAQs Screen
- Needs a FAQs screen to show the following information:
-- Policies
-- Contact Form
-- List of FAQs
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Branding Guidelines
- Follow Our Branding Guidelines Document
Documentation
- Branding Guidelines Document
- Leave Types.xlsx
Target Devices
- Responsive Web Based Application
- Desktop: minimum 1366px Width with Height adjusted accordingly
- Mobile: Minimum 320px x 480px
Target Audiences
- Internal Employees - they should be able to have a view of his attendance, fill timesheet, apply for leave
- Manager - monitoring and manage the employee timesheet
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.