Employee Vault Design Concepts Challenge

WireframingResponsive Web DesignFigmaAdobe XDLook And Feel

BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the "Employee Vault Design Concepts Challenge". In this challenge, we are looking for your help to come up with designs for a responsive web application that will allow the managers and other admins to view the documents submitted by the team members working for them.

CHALLENGE OBJECTIVES

  • Web Application

Round 1

Submit your initial designs for a checkpoint feedback
A. General Users

- 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 designs with all checkpoint feedback implemented.
A. General Users
B. Administrator

- 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.)
- If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

 

CHALLENGE INTRODUCTION
We are looking to design a responsive web application for a couple of users (General Users and Admins). This application will allow the managers to access all types of details about the employee.

AUDIENCE:
General Users and Admins

DESIGN GOALS & PRINCIPLES
Below are some of the goals:

  • The end goal of this challenge is to make sure the app is user-friendly and provides an intuitive user experience.
  • Elegant, clean, simple, user-centered look and feel with modern aesthetics
  • The overall design and user experience
  • Engaging and easy-to-use/interact UI
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters)

Creativity: 10
1: barely new ideas
10: a utopic product but with features that can be fully implemented

Aesthetics: 8
1: low-fidelity design, wireframe, or plain sketch
10: top-notch finished looking visual design

Exploration: 8
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application

Branding: 9
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

BRANDING GUIDELINES
We have provided branding guidelines in the forums, please make sure to follow them in your designs.

TARGET DEVICE
- Desktop: 1366px width and height as required
NOTE: This is a responsive web application, so please make sure to do your research and make sure it would work well across all platforms.

SCREEN REQUIREMENTS
Following screens are in scope for this challenge

00 Employee Landing Page

  • We dont have this screen in the wireframes, this will be a normal landing page with option to Login
  • Clicking on “Login” will take the user to the ADID page and that's where the user will enter their username and password.

A. General Users
01 1 Employee Search:
Page 3 & 4 in wireframes.pdf

  • In this screen, the user will be able to enter the employee ID and search
  • Once the employee name is retrieved, the user can browse different categories and find all the relevant details.
  • Categories could include: Personal Data, Qualification Skills, Joining Data, Work Experience, Progression, Appraisal, Awards, Separation, Others, Disciplinary Actions, Audit Checklist
  • Also, show an error screen incase if the entered employee ID is wrong.
  • In the provided wireframes (pages 5, 6, and 7), you can see the first three categories being clicked by the user as shown in
  • We want you to show how the user interacts with the categories and view the details / keep the user experience as simple as possible.

02 1 Personal Data:
Page 5 in wireframes.pdf

  • Assuming the user has clicked on "Personal Data'' then we see the below details
  • Personal Data will show these details:
    • Type of Document (examples: Resume, Nomination Form PF, Passport, Photo, etc)
    • Date Created/Uploaded,
    • Comments and
    • Action (View/Download)

02 2 Qualification Skills
Page 6 in wireframes.pdf

  • Assuming the user has clicked on "Qualification Skills'' then we see the below details
  • Personal Data will show these details: 
    • Type of Document (examples: Certificate, Marksheet, Training, etc)
    • Date Created/Uploaded, 
    • Comments and 
    • Action (View/Download)

02 3 Joining Data:
Page 7 in wireframes.pdf

  • Assuming the user has clicked on "Joining Data'' then we see the below details
  • Personal Data will show these details: 
    • Type of Document [examples: TAF (Technica Assessment Form), HAF (HR Assessment Form), Attachment/Approvals related to selection uploaded on the tool, etc)
    • Date Created/Uploaded
    • Comments and 
    • Action (View/Download)

B. Administrators
03 Admin Landing Page:
Page 9 in wireframes.pdf

  • We would like you to think about what needs to be shown on this screen? Recent activities, etc
  • Administrators will have 2 options “Audit Trail” and “User Management”, these can be included as navigation options, we are open to your thoughts.

04 Audit Trail:
Page 10 & 11 in wireframes.pdf

  • User will able to view the list of activities on a particular user
  • They will enter the employee ID and click on search to see the activities for that particular employee. This will include the below details:
    • Accessed by
    • Type of Document accessed
    • Action Done
    • Date

05 User Management:
Page 12 in wireframes.pdf

  • Show the list of all users, below details, can be included
    • Employee ID
    • Employee Type (Normal, Admin)
    • Name of the Employee
    • Status (Active/Inactive/Disabled)
    • Actions (Options to Edit / Delete)
  • Provide a way for the user to add a new user.
  • Show us how the above can be shown, provide a way for the user to filter the table

06 Add New User:
Page 12 in wireframes.pdf
In order to add a new user, the below details will be required

  • Employee ID
  • User Type (Normal/Admin)

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
  • Do not copy the wireframe layout. We are open to layout ideas but only limited to featured requested.

MARVEL PROTOTYPE

  • We need you to upload your screens to Marvel App
  • Please request for marvel app in the challenge forum
  • 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 on this link while you upload)


SUBMISSION AND SOURCE FILES
Submission File
Submit all JPG/PNG image files based on Challenge submission requirements stated above

Source File
All source files of all graphics created in either Adobe XD or Sketch or Figma and saved as an editable layer

Declaration File 
Declaration files document contains the following information:

  • Stock Photos Name and Source Links from an allowed sources
  • Stock Art/Icons Name and Source Links from an allowed sources
  • Fonts Name and Source Links source from an allowed source
  • MarvelApp share link for review


FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Sketch
  • Adobe XD
  • Figma

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30173564