Challenge Summary
Welcome to the “Sahara - Digital Capability Responsive Website Design Challenge"!
In this challenge, we are looking for the topcoder community to come up with design concepts responsive web design that will be used by the internal staff of the Sahara Customer.
Required Design:
- 15 Desktop Screens
- Responsive Design
A. Staff:
02 Employee - Dashboard
03 1 Employee - Profile Page
03 2 Employee - View, Create, Update, Delete skills
04 Employee - Detail View of Skills/Capabilities/Training/Certifications
05 Employee - Approval, View Request
06 Employee - Rewards, and Leaderboard
B. Request Manager Screens:
07 Request Manager - Dashboard
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
00 Login
A. Staff:
01 Registration
02 Employee - Dashboard
03 1 Employee - Profile Page
03 2 Employee - View, Create, Update, Delete skills
04 Employee - Detail View of Skills/Capabilities/Training/Certifications
05 Employee - Approval, View Request
06 Employee - Rewards, and Leaderboard
B. Request Manager Screens:
07 Request Manager - Dashboard
08 Request Manager - Search/Search Results
08 Request Manager - Create Project and Request Team
09 Request Manager - Agreement
10 Request Manager - Rating/Feedback
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
This application will be used by various users “Staffs, Request Manager, Line Manager” - in this challenge we will working on screens for Staffs and Request Manager (Screens for Line Manager is not in scope)
User Groups:
Staff:
- These are the skilled users who could be internal employees and external employees like vendors, contractors, etc. of S.
- These users will be able to manage their own skill sets, capabilities, certifications, and training, they must be able to attach certifications and training.
Request Manager:
- These are the users who will search for skills, teams based on job description and system provides staff matching the required skill set.
- The requestor chooses the team.
- Creates the project under the project name.
- Captures the proposed agreement including the capacity required.
- This will then be sent to the Line Manager for approval.
Line Manager:
The line manager has access to his staff only for line manager functionality. They must be able to review the employee’s proficiencies add their own proficiencies ratings.
- The line managers must also be able to approve the project that was created for their employees.
Design Considerations
- We are looking for a simple, easy-to-use, Informative design.
- Please follow the colors from the provided branding guidelines
- Have your designs of size, 1366px width, and height as required.
Required Designs
Below screens are in scope for this challenge.
00 Login
- User will be logging with through SSO, they will be entering username and password.
- Need two types of the login page for internal and external or contract employees.
- - - Internal employees will have employee numbers and passwords
- - - External or contract employees need to enter the vendor name, employee number, and password.
- Keep forgot the password option.
A. Staff:
01 Registration:
- This page will allow the user to enter their personal details
- Personal details will include:
- - - First name, Last name, Emp no, Organization Name, Email, Role, etc
02 Employee - Dashboard:
- This is the main landing page for the staff and we will be showing the health level of each skill.
- We will also need to include an overall rating for the employee which can probably be drilled-down (i.e. on clicking on the rating will show further details), the drilled-down view can probably show the list of completed requests and the ratings that they received from managers.
- This could also show some alert or message for certain skills where they will be required for the user to further improve it.
03 1 Employee - Profile Page:
- Provide a way for the user to view and edit their profile.
- This page could include “First Name, Last Name, Date of Birth, Email ID, Contact Number, etc.
- Employees will be able to manage their skills, Capabilities, Training & Certifications.
03 2 Employee - View, Create, Update, Delete skills:
View Skills, Capabilities, Training & Certifications:
- Show an overview of of the list all the skills, capabilities, training and certifications that the employee had entered or acquired.
- Provide a way for the user to click on the link to view more details (please see 04 Employee - Detail View of Skills/Capabilities/Training/Certifications”
Add Skills
- Users will be able to create a list of skills, add how proficient they are, etc.
- Show us how the overall UI needs to be put up.
- Skills will be selected from a drop-down and when the user hovers on a particular skill in the drop-down corresponding description is shown.
- There must be a free form text against each skill that is being added to allow the user to indicate the areas of focus or business units, they are still in.
- They should be able to add a rating for each skill based on their proficiency.
- For each skill the user should be able to add/attach training and certifications that they have received - we are open to your thoughts on how this needs to be shown.
Update Skills, Capabilities, Training & Certifications:
- Provide a way for users to update their skills & capabilities and manage training & Certifications.
- Show some links for available training which will be redirected to another portal (Not in scope)
Delete Skills:
- Users should be able to delete the skills as required.
04 Employee - Detail View of Skills/Capabilities/Training/Certifications:
- User lands on this page when they click to view more details from the overview page.
- This will show further details like skill name, skill description, acquired date, changes or ratings received of that skill.
05 Employee - Approval, View Request:
- Users will be able to see the list of requests/projects that they have received from the request manager after the line manager approves it (Line Manager functionality not in scope for this challenge) through notification.
- Provide a way to search, filter the list.
- They should be able to see the project agreement created by the Request Manager.
- Provide a way to approve or decline the request.
06 Employee - Rewards, and Leaderboard:
- We are looking to do some gamification here, show us your creativity here.
- There will reward against the complexity of the work required.
- Based on the overall score of the staff, the leaderboard for each business unit can be shown.
- We will show awards that employees may win and we will also gamify awards for example:
- - - Most frequent user
- - - Most certified
- - - Employee with the highest rating on projects
- - - etc
B. Request Manager Screens:
- The manager should be able to view the list of projects and click on a project to view more details.
- Within the project, the manager should be able to view the team, will have the ability to search and add more staff to the team.
07 Request Manager - Dashboard:
- When a request manager lands a dashboard, he should able to see 3 types of the dashboard i.e 1.) Internal employees dashboard, 2.) External Employees dashboard and 3.) Both combined view which will include the following details:
- All skills captured
- how many times has the skill been requested,
- how many people have the skill,
- which is the most requested skill.
- Full-Time Employee skills health
- Contractors skills health
On clicking individual employee name
- They will be able to view that particular employee dashboard (be it full-time or a contractor)
- Show us how the user will be able to select an employee and view their dashboard (dashboard will be similar to 02 Employee Dashboard)
08 Request Manager - Search/Search Results
- Provide a way for the manager to search for staff with a specific skill set, think on how it can be done
- Provide a way to filter through the list.
08 Request Manager - Create Project and Request Team:
- There needs to be a way to create a new project under projects and create a team under it with selected staff with a specific skill set.
09 Request Manager - Agreement
- Allow the request manager to prepare an agreement for the team created and send it to the line manager and employee for approval. You can use some sample text for the agreement.
10 Request Manager - Rating/Feedback:
- Once the job is completed, the manager will be able to provide a rating and add comments for each of the staff that worked in the project.
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.
- Focus on User Experience / how the user interacts within the dashboard.
MarvelApp Prototype
- We need you to upload your screens to the Marvel App
- Please send your Marvel app request to csystic@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience
- Internal and external employees, Request Manager, Line Manager
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- The overall design, UI and user experience
- Consistency across the UX/UI
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
- Submit Marvelapp as part of your submission.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!
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 checkpoint feedback.
In this challenge, we are looking for the topcoder community to come up with design concepts responsive web design that will be used by the internal staff of the Sahara Customer.
Required Design:
- 15 Desktop Screens
- Responsive Design
Round 1
Submit your initial designs for checkpoint feedbackA. Staff:
02 Employee - Dashboard
03 1 Employee - Profile Page
03 2 Employee - View, Create, Update, Delete skills
04 Employee - Detail View of Skills/Capabilities/Training/Certifications
05 Employee - Approval, View Request
06 Employee - Rewards, and Leaderboard
B. Request Manager Screens:
07 Request Manager - Dashboard
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final designs with all checkpoint feedback implemented.00 Login
A. Staff:
01 Registration
02 Employee - Dashboard
03 1 Employee - Profile Page
03 2 Employee - View, Create, Update, Delete skills
04 Employee - Detail View of Skills/Capabilities/Training/Certifications
05 Employee - Approval, View Request
06 Employee - Rewards, and Leaderboard
B. Request Manager Screens:
07 Request Manager - Dashboard
08 Request Manager - Search/Search Results
08 Request Manager - Create Project and Request Team
09 Request Manager - Agreement
10 Request Manager - Rating/Feedback
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
This application will be used by various users “Staffs, Request Manager, Line Manager” - in this challenge we will working on screens for Staffs and Request Manager (Screens for Line Manager is not in scope)
User Groups:
Staff:
- These are the skilled users who could be internal employees and external employees like vendors, contractors, etc. of S.
- These users will be able to manage their own skill sets, capabilities, certifications, and training, they must be able to attach certifications and training.
Request Manager:
- These are the users who will search for skills, teams based on job description and system provides staff matching the required skill set.
- The requestor chooses the team.
- Creates the project under the project name.
- Captures the proposed agreement including the capacity required.
- This will then be sent to the Line Manager for approval.
Line Manager:
The line manager has access to his staff only for line manager functionality. They must be able to review the employee’s proficiencies add their own proficiencies ratings.
- The line managers must also be able to approve the project that was created for their employees.
Design Considerations
- We are looking for a simple, easy-to-use, Informative design.
- Please follow the colors from the provided branding guidelines
- Have your designs of size, 1366px width, and height as required.
Required Designs
Below screens are in scope for this challenge.
00 Login
- User will be logging with through SSO, they will be entering username and password.
- Need two types of the login page for internal and external or contract employees.
- - - Internal employees will have employee numbers and passwords
- - - External or contract employees need to enter the vendor name, employee number, and password.
- Keep forgot the password option.
A. Staff:
01 Registration:
- This page will allow the user to enter their personal details
- Personal details will include:
- - - First name, Last name, Emp no, Organization Name, Email, Role, etc
02 Employee - Dashboard:
- This is the main landing page for the staff and we will be showing the health level of each skill.
- We will also need to include an overall rating for the employee which can probably be drilled-down (i.e. on clicking on the rating will show further details), the drilled-down view can probably show the list of completed requests and the ratings that they received from managers.
- This could also show some alert or message for certain skills where they will be required for the user to further improve it.
03 1 Employee - Profile Page:
- Provide a way for the user to view and edit their profile.
- This page could include “First Name, Last Name, Date of Birth, Email ID, Contact Number, etc.
- Employees will be able to manage their skills, Capabilities, Training & Certifications.
03 2 Employee - View, Create, Update, Delete skills:
View Skills, Capabilities, Training & Certifications:
- Show an overview of of the list all the skills, capabilities, training and certifications that the employee had entered or acquired.
- Provide a way for the user to click on the link to view more details (please see 04 Employee - Detail View of Skills/Capabilities/Training/Certifications”
Add Skills
- Users will be able to create a list of skills, add how proficient they are, etc.
- Show us how the overall UI needs to be put up.
- Skills will be selected from a drop-down and when the user hovers on a particular skill in the drop-down corresponding description is shown.
- There must be a free form text against each skill that is being added to allow the user to indicate the areas of focus or business units, they are still in.
- They should be able to add a rating for each skill based on their proficiency.
- For each skill the user should be able to add/attach training and certifications that they have received - we are open to your thoughts on how this needs to be shown.
Update Skills, Capabilities, Training & Certifications:
- Provide a way for users to update their skills & capabilities and manage training & Certifications.
- Show some links for available training which will be redirected to another portal (Not in scope)
Delete Skills:
- Users should be able to delete the skills as required.
04 Employee - Detail View of Skills/Capabilities/Training/Certifications:
- User lands on this page when they click to view more details from the overview page.
- This will show further details like skill name, skill description, acquired date, changes or ratings received of that skill.
05 Employee - Approval, View Request:
- Users will be able to see the list of requests/projects that they have received from the request manager after the line manager approves it (Line Manager functionality not in scope for this challenge) through notification.
- Provide a way to search, filter the list.
- They should be able to see the project agreement created by the Request Manager.
- Provide a way to approve or decline the request.
06 Employee - Rewards, and Leaderboard:
- We are looking to do some gamification here, show us your creativity here.
- There will reward against the complexity of the work required.
- Based on the overall score of the staff, the leaderboard for each business unit can be shown.
- We will show awards that employees may win and we will also gamify awards for example:
- - - Most frequent user
- - - Most certified
- - - Employee with the highest rating on projects
- - - etc
B. Request Manager Screens:
- The manager should be able to view the list of projects and click on a project to view more details.
- Within the project, the manager should be able to view the team, will have the ability to search and add more staff to the team.
07 Request Manager - Dashboard:
- When a request manager lands a dashboard, he should able to see 3 types of the dashboard i.e 1.) Internal employees dashboard, 2.) External Employees dashboard and 3.) Both combined view which will include the following details:
- All skills captured
- how many times has the skill been requested,
- how many people have the skill,
- which is the most requested skill.
- Full-Time Employee skills health
- Contractors skills health
On clicking individual employee name
- They will be able to view that particular employee dashboard (be it full-time or a contractor)
- Show us how the user will be able to select an employee and view their dashboard (dashboard will be similar to 02 Employee Dashboard)
08 Request Manager - Search/Search Results
- Provide a way for the manager to search for staff with a specific skill set, think on how it can be done
- Provide a way to filter through the list.
08 Request Manager - Create Project and Request Team:
- There needs to be a way to create a new project under projects and create a team under it with selected staff with a specific skill set.
09 Request Manager - Agreement
- Allow the request manager to prepare an agreement for the team created and send it to the line manager and employee for approval. You can use some sample text for the agreement.
10 Request Manager - Rating/Feedback:
- Once the job is completed, the manager will be able to provide a rating and add comments for each of the staff that worked in the project.
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.
- Focus on User Experience / how the user interacts within the dashboard.
MarvelApp Prototype
- We need you to upload your screens to the Marvel App
- Please send your Marvel app request to csystic@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience
- Internal and external employees, Request Manager, Line Manager
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- The overall design, UI and user experience
- Consistency across the UX/UI
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
- Submit Marvelapp as part of your submission.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!
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 checkpoint feedback.
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.