Challenge Summary
Welcome to "Dynamic Employees Salary Structure Planning App Design Challenge". In this challenge, we need your creative skills and help us create the best UX/UI screens for our Dynamic Employees Salary Structure Planning App that will be used by the organization to calculate and display the variable pay of each of the applicable employees.
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) Dashboard Screen
01.A) Simulator Screen
01.B) My Team Screen
02) Employee Info Screen
06) Plan Setting Screen
07) Target Settings 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Dashboard Screen
01.A) Simulator Screen
01.B) My Team Screen
02) Employee Info Screen
03) Notifications Screen
04) Reports/Letters
05) Search and Filters Screen
06) Plan Setting Screen
07) Target Settings Screen
08) Field Mapping 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create a tool for authorized users to set variable pay plan, targets, actual and calculate the payout based on the defined plan and policies. The application will be used by all employees having variable pay as part of their salary structure within organizations.
This tool will be used by the organization to calculate & display the variable pay of each of the applicable employees. For an information, this tool will be part of a broader application that we already have, but we want you to explore the UI and UX to be better than our existing application, so feel free to be creative here.
Challenge Goal
- Create the best UX/UI Tool for an authorized User to calculate employees payout based on the dynamic variable of defined plan and policies.
Design Consideration
- Needs to focus on the best practice of web app design to presenting important information
- This tool must be easily accessible, and it must be simple (low effort) for an individual to generate any payment information.
- The output should be easy to consume and understand.
- Needs to consider for a Responsive website (We are focusing on Desktop for now, with an option for mobile development in the future)
- Easy to understand flow from page to page, users can go back and exit throughout.
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern, Crisp.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Target Devices
- Desktop, 1366px minimum width with height adjusted accordingly
- Mobile, 750px minimum width with height adjusted accordingly
Branding Guidelines
- Font, Color, and Design Style is open to Designer
- Modern, Professional, Crisp, Simple, and Clean look and feel.
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=639537���
Screen Requirements
01) Dashboard Screen
- This will be the first screen user can view once they enter
- It will have user's personal details and plan details-Components, Assigned target numbers, Actual numbers, Target achievement percentage
- The user can navigate to his Team, Simulator, Reports/ Letters
- The user can also see his salary details on this page and can choose to hide/ show his salary details
01.A) Need to have Simulator (in Dashboard) where:
- The user can select period and applicable plans
- Multiple components related to each plan will be populated with a text box to enter estimated achievement
- The user would need to fill details
- Calculate button would enable the user to see his estimated variable payout for the selected period and plan
01.B) Need to have My Team (in Dashboard) where:
- The user can see the employees directly reporting to him
- Also, functionality is needed to see the nested hierarchy directly/ indirectly reporting to that user
- The user can select the reports and see the plan, components and respective targets and actual numbers for the selected employee
02) Employee Info Screen
- An icon on the page that can show information about the user logged in
- The information needs to have the following data points:
-- Employee Name
-- Supervisor/Manager name
-- Designation
-- HR Name
03) Notifications Screen
- All recent notifications need to be shown on this screen
- This can be target setting, variable payout notification etc
04) Reports/Letters
- A user can view the latest reports and letters on this page
- There will be a filter option that can enable users in seeing past reports/letters
05) Search and Filters Screen
- The filter will provide the user the flexibility to select:
-- Year
-- Quarter
-- Month
- This will enable them in seeing past data pertaining to those timelines selected by him
06) Plan Setting Screen
- The user can upload policy document, select company, variable type, assign plan name.
- The user needs to select applicable roles, component, assign weightage to the component, and save it.
07) Target Settings Screen
- The user can set the value of the target assigned to them corresponding to each component associated with that user.
- The user can enter his daily, monthly, quarterly or yearly target.
- This screen will enable the user to enter up to 365 values on the screen based on the target setting frequency. For example: in the case of monthly target setting, the user will be entering 12 values, 4 values in the case of quarterly and 365 values in case of daily target settings.
- The user can also upload the target values through excel.
08) Field Mapping Screen
- Allows the user to map the app's custom fields to other systems standard fields.
- Also, the user will be able to generate an excel template based on the other system field names.
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 within your notes/comment this link while you upload).
Documentation
- Wireframes: https://marvelapp.com/9hg959h/screen/48128616
Target Audience
- Company employees will use it over the web
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 the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
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 (Need to be converted into photoshop later), XD or Sketch and saved as an editable layer. We are more prefer to use PSD/XD for this challenge.
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) Dashboard Screen
01.A) Simulator Screen
01.B) My Team Screen
02) Employee Info Screen
06) Plan Setting Screen
07) Target Settings 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final Design plus Checkpoint Updates01) Dashboard Screen
01.A) Simulator Screen
01.B) My Team Screen
02) Employee Info Screen
03) Notifications Screen
04) Reports/Letters
05) Search and Filters Screen
06) Plan Setting Screen
07) Target Settings Screen
08) Field Mapping 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create a tool for authorized users to set variable pay plan, targets, actual and calculate the payout based on the defined plan and policies. The application will be used by all employees having variable pay as part of their salary structure within organizations.
This tool will be used by the organization to calculate & display the variable pay of each of the applicable employees. For an information, this tool will be part of a broader application that we already have, but we want you to explore the UI and UX to be better than our existing application, so feel free to be creative here.
Challenge Goal
- Create the best UX/UI Tool for an authorized User to calculate employees payout based on the dynamic variable of defined plan and policies.
Design Consideration
- Needs to focus on the best practice of web app design to presenting important information
- This tool must be easily accessible, and it must be simple (low effort) for an individual to generate any payment information.
- The output should be easy to consume and understand.
- Needs to consider for a Responsive website (We are focusing on Desktop for now, with an option for mobile development in the future)
- Easy to understand flow from page to page, users can go back and exit throughout.
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern, Crisp.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Target Devices
- Desktop, 1366px minimum width with height adjusted accordingly
- Mobile, 750px minimum width with height adjusted accordingly
Branding Guidelines
- Font, Color, and Design Style is open to Designer
- Modern, Professional, Crisp, Simple, and Clean look and feel.
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=639537���
Screen Requirements
01) Dashboard Screen
- This will be the first screen user can view once they enter
- It will have user's personal details and plan details-Components, Assigned target numbers, Actual numbers, Target achievement percentage
- The user can navigate to his Team, Simulator, Reports/ Letters
- The user can also see his salary details on this page and can choose to hide/ show his salary details
01.A) Need to have Simulator (in Dashboard) where:
- The user can select period and applicable plans
- Multiple components related to each plan will be populated with a text box to enter estimated achievement
- The user would need to fill details
- Calculate button would enable the user to see his estimated variable payout for the selected period and plan
01.B) Need to have My Team (in Dashboard) where:
- The user can see the employees directly reporting to him
- Also, functionality is needed to see the nested hierarchy directly/ indirectly reporting to that user
- The user can select the reports and see the plan, components and respective targets and actual numbers for the selected employee
02) Employee Info Screen
- An icon on the page that can show information about the user logged in
- The information needs to have the following data points:
-- Employee Name
-- Supervisor/Manager name
-- Designation
-- HR Name
03) Notifications Screen
- All recent notifications need to be shown on this screen
- This can be target setting, variable payout notification etc
04) Reports/Letters
- A user can view the latest reports and letters on this page
- There will be a filter option that can enable users in seeing past reports/letters
05) Search and Filters Screen
- The filter will provide the user the flexibility to select:
-- Year
-- Quarter
-- Month
- This will enable them in seeing past data pertaining to those timelines selected by him
06) Plan Setting Screen
- The user can upload policy document, select company, variable type, assign plan name.
- The user needs to select applicable roles, component, assign weightage to the component, and save it.
07) Target Settings Screen
- The user can set the value of the target assigned to them corresponding to each component associated with that user.
- The user can enter his daily, monthly, quarterly or yearly target.
- This screen will enable the user to enter up to 365 values on the screen based on the target setting frequency. For example: in the case of monthly target setting, the user will be entering 12 values, 4 values in the case of quarterly and 365 values in case of daily target settings.
- The user can also upload the target values through excel.
08) Field Mapping Screen
- Allows the user to map the app's custom fields to other systems standard fields.
- Also, the user will be able to generate an excel template based on the other system field names.
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 within your notes/comment this link while you upload).
Documentation
- Wireframes: https://marvelapp.com/9hg959h/screen/48128616
Target Audience
- Company employees will use it over the web
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 the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
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 (Need to be converted into photoshop later), XD or Sketch and saved as an editable layer. We are more prefer to use PSD/XD for this challenge.
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.