Challenge Summary
Welcome to the FAST 56hrs - Compensation 2020 Web Application Design Challenge. This challenge will focus on designing the UI and user experience for a simple "employee compensation" web application. This application will allow a user to design and customize their own employment compensation package by altering different categories (Health care, Insurance, Retirement, Vacation, etc.) that helps them visually see how different decisions affect their overall compensation and benefits.
This is a FAST challenge, you will only have 56 hours - as we need to design and code this application quickly! (to meet a presentation/project deadline)
This is a TCO17 eligible design challenge!
We are really excited to see your designs for this challenge.
Challenge Description:
For this challenge, you will be designing the desktop screens for a web application.
Employee: John (User persona)
- John’s overall salary and compensation package for his job is $100,000 annually.
- He is looking to add health insurance by leveraging the compensation package he has with the company he works for.
- A kiosk in his company allows him to design his own compensation package, he sees a welcome page in kiosk that details about this purpose and what they will be doing in this application,
- They then see a screen that allows him to design and customize his compensation package, this page shows how much he is earning and what his company benefits are.
- John is able to move visual sliders up/down or left/right for each category (Health Care, Insurance, Retirement, Vacation, etc.) to see how they affect things and to allow John the ability to decide how he would like his compensation to be broken up.
- They see charts and visualization of how compensation (benefits), salary are broken down
- He submits the package and see a thank you page!
The key thing here is allowing the user the ability to make their own decisions (do they prefer more compensation in one area or another). This provides an employee a very clear understanding of their salary and compensation.
This is a highly visual (and simple/clean user experience) where we show John 'charts and visualizations' of what he has selected, for ex: $10,000 of his $100,000 compensation will go to health insurance.
Application Flow:
Think of this flow and step-by-step experience.
1. The user comes to a kiosk and they are presented with a start/welcome screen.
2. Once the user clicks next, they are presented a screen with categories. On this screen, they can design their own compensation package (how much they earn and what benefits they get) as an employee.
3. The user can move sliders up / down or left / right for each category.
4. The total value available for each employee or potential new employee (recruit) is expected to be identical, so as one slider moves up another moves down; thus in effect an employee/recruit is showing how they would prefer their compensation to be broken up.
5. Once they are done, they submit and their info is saved and they get a thank you screen. No email confirmation required.
Admin Screen:
6. We need a simple admin screen (with a simple login) that allows an admin to view the data collected in a table (sort/filter data and export to XLS). We do NOT need the ability to edit or manage the data, so it's basically a read-only view.
Design Guidelines:
- We would like to have modern application UI/UX design
- Please have the screens of size 1366px width and height as required
- Make sure all the UI elements you design are scalable vectors, so we can resize as required.
Required Screens:
A Employee:
01 Welcome Screen:
- This is welcome screen, come up with a design that captures the entire essence of the entire application / purpose.
- An introduction to what they will be performing within this app (something like ‘Design you compensation package - how it works’)
- Then user proceeds to the next page, perhaps by clicking on a “Get Started” button to move to the compensation page.
02 Compensation:
- This need to show the income the employee earn annually (For ex: $100,000)
- We have provided list of groups/categories and the benefits under each of them, for each item under a category we need to show sliders up/down (or) left / right..so user can adjust the values as required. (each slider will indicate percentage i.e. 0 to 100...so if user selects 100% in health insurance, then their entire pay will go to health insurance).
- As one slider moves up another moves down; thus in effect a recruit is showing how they would prefer their compensation to be broken up.
- We need to some type of chart or visualization that shows the selected the benefits of his compensation (kind of a break up of the compensation. For ex: how they selected $10,000 of his $100,000 compensation to go to health insurance. )
- Once the user is done by altering the benefits, they will click on a button to submit these preferences.
03 Thank You Screen:
- Once the compensation package has been submitted, we need to show a simple thank you screen - looking forward to your thoughts on how this need to be designed
B Admin:
04 Login:
- Create a simple login screen for the user to log into the application
- Admin will enter username/password to login
05 Admin Screen:
- Allow an admin to view the data collected above in a table, think on what data to be included here, looking forward to your thoughts!
- Should have ability to sort/filter data and export to XLS.
- NOTE: We do NOT need the ability to edit or manage the data, so it's basically a read-only view.
Target Audience:
- Employees and potential new employees
- Admin
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Keep your designs open, modern and clean
Stock Artwork:
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Judging Criteria:
- Overall User Experience and UI design
- How well your designs provide a consistent user flow and style
- How well your designs captures all the requirements.
- Any suggestions, interactions, and user flows you recommend (provide any notes or comments for the client)
- Wow factor! We want to be impressed with the overall design and execution.
- Innovative ideas and ways to interact and handle the content. This could be via functionality and/ or UI elements.
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 for your submission files
You must upload your submission to MarvelApp, please request for an invite in forums!
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on feedback. See more information about Final Fixes
This is a FAST challenge, you will only have 56 hours - as we need to design and code this application quickly! (to meet a presentation/project deadline)
This is a TCO17 eligible design challenge!
We are really excited to see your designs for this challenge.
Challenge Description:
For this challenge, you will be designing the desktop screens for a web application.
Employee: John (User persona)
- John’s overall salary and compensation package for his job is $100,000 annually.
- He is looking to add health insurance by leveraging the compensation package he has with the company he works for.
- A kiosk in his company allows him to design his own compensation package, he sees a welcome page in kiosk that details about this purpose and what they will be doing in this application,
- They then see a screen that allows him to design and customize his compensation package, this page shows how much he is earning and what his company benefits are.
- John is able to move visual sliders up/down or left/right for each category (Health Care, Insurance, Retirement, Vacation, etc.) to see how they affect things and to allow John the ability to decide how he would like his compensation to be broken up.
- They see charts and visualization of how compensation (benefits), salary are broken down
- He submits the package and see a thank you page!
The key thing here is allowing the user the ability to make their own decisions (do they prefer more compensation in one area or another). This provides an employee a very clear understanding of their salary and compensation.
This is a highly visual (and simple/clean user experience) where we show John 'charts and visualizations' of what he has selected, for ex: $10,000 of his $100,000 compensation will go to health insurance.
Application Flow:
Think of this flow and step-by-step experience.
1. The user comes to a kiosk and they are presented with a start/welcome screen.
2. Once the user clicks next, they are presented a screen with categories. On this screen, they can design their own compensation package (how much they earn and what benefits they get) as an employee.
3. The user can move sliders up / down or left / right for each category.
4. The total value available for each employee or potential new employee (recruit) is expected to be identical, so as one slider moves up another moves down; thus in effect an employee/recruit is showing how they would prefer their compensation to be broken up.
5. Once they are done, they submit and their info is saved and they get a thank you screen. No email confirmation required.
Admin Screen:
6. We need a simple admin screen (with a simple login) that allows an admin to view the data collected in a table (sort/filter data and export to XLS). We do NOT need the ability to edit or manage the data, so it's basically a read-only view.
Design Guidelines:
- We would like to have modern application UI/UX design
- Please have the screens of size 1366px width and height as required
- Make sure all the UI elements you design are scalable vectors, so we can resize as required.
Required Screens:
A Employee:
01 Welcome Screen:
- This is welcome screen, come up with a design that captures the entire essence of the entire application / purpose.
- An introduction to what they will be performing within this app (something like ‘Design you compensation package - how it works’)
- Then user proceeds to the next page, perhaps by clicking on a “Get Started” button to move to the compensation page.
02 Compensation:
- This need to show the income the employee earn annually (For ex: $100,000)
- We have provided list of groups/categories and the benefits under each of them, for each item under a category we need to show sliders up/down (or) left / right..so user can adjust the values as required. (each slider will indicate percentage i.e. 0 to 100...so if user selects 100% in health insurance, then their entire pay will go to health insurance).
- As one slider moves up another moves down; thus in effect a recruit is showing how they would prefer their compensation to be broken up.
- We need to some type of chart or visualization that shows the selected the benefits of his compensation (kind of a break up of the compensation. For ex: how they selected $10,000 of his $100,000 compensation to go to health insurance. )
- Once the user is done by altering the benefits, they will click on a button to submit these preferences.
03 Thank You Screen:
- Once the compensation package has been submitted, we need to show a simple thank you screen - looking forward to your thoughts on how this need to be designed
B Admin:
04 Login:
- Create a simple login screen for the user to log into the application
- Admin will enter username/password to login
05 Admin Screen:
- Allow an admin to view the data collected above in a table, think on what data to be included here, looking forward to your thoughts!
- Should have ability to sort/filter data and export to XLS.
- NOTE: We do NOT need the ability to edit or manage the data, so it's basically a read-only view.
Target Audience:
- Employees and potential new employees
- Admin
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Keep your designs open, modern and clean
Stock Artwork:
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Judging Criteria:
- Overall User Experience and UI design
- How well your designs provide a consistent user flow and style
- How well your designs captures all the requirements.
- Any suggestions, interactions, and user flows you recommend (provide any notes or comments for the client)
- Wow factor! We want to be impressed with the overall design and execution.
- Innovative ideas and ways to interact and handle the content. This could be via functionality and/ or UI elements.
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 for your submission files
You must upload your submission to MarvelApp, please request for an invite in forums!
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on feedback. See more information about Final Fixes
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.