Challenge Summary
Welcome to “Campus Internal Crowdsourcing Platform UI/UX Design Challenge”, in this challenge you will be working on creating the user interface for a modern and intuitive internal crowdsourcing tool to post simple and moderately complex tasks and ideas; where qualified contacts from the company can pick the tasks and deliver them in a timely manner. The requestor can create the tasks on the tool and the worker can pick the tasks from the pool and deliver them.
1) Login (Requestor and Worker)
2) Landing (Requestor and Worker)
3) Task Detail (Requestor and Worker)
1) Login (Requestor and Worker)
2) Landing (Requestor and Worker)
3) Task Detail (Requestor and Worker)
4) Submit Work (Worker)
5) Profile Page (Worker)
6) User help page (Requestor and Worker)
7) UI Kit Generic
This project will be developed as a Web based application, specifically to be used in desktop/laptop computers; so no mobile experiences are required.
User Roles
For this web application there are basically two main user roles:
- Requestor: Person in charge of creating, assigning and reviewing the tasks.
- Worker: Person who will perform the task.
Required Screens / Functionalities
1) Login (Requestor and Worker)
You must design a modern login page following the colors provided in the branding section of this challenge.
This screen will be accessible for both “Requestor” and “Worker” users.
2) Landing (Requestor and Worker)
Once the users successfully access this web application, they must be able to see a dashboard looks like page with the following information:
There are two main different actions to perform by each user on this page:
A) Requestor
B) Worker
Both users needs to see a notification panel on this screen. This feature will have the following:
- How should this notification be accessible? Propose the best UX here.
- For both users, what other actions would be nice to perform and what other information is needed here? Propose your ideas!
- You need to show these two different user scenarios in your design.
3) Task Detail (Requestor and Worker)
Both users should be able to see the details of the task. Think this page as a resume of the task itself where workers can see:
- Requestor users can also be able to edit the task directly from this page.
- If a task is not completed a Requestor should be able to release the task to pool again and setup the new deadline (Hours and dates).
- Workers should be able to submit their work from this screen, so how the submission features should be accessible? Propose the best UX here.
4) Submit Work (Worker)
Once the work is completed, a worker should be able to easily submit their work using a very simple step by step platform.
Think on a very intuitive page with the following features:
5) Profile Page (Worker)
This page will be visible only for the workers. In this page they should be able to add their skillset (This will affect how many tasks they will see in the listing pool). Think on any feature that matters for a profile page such like:
6) User help page (Requestor and Worker)
This page will be similar to a FAQ page, where Workers and Requestors can find any necessary documentation and information about the usage of this platform. Resources can be published here as well. Keep this screen simple and easy to use.
7) UI Kit Generic
This will be a generic page used for development, so you will need to provide a full set of most commonly used UI elements. For example:
Form Factors
Please make sure your design supports these form factors:
In-scope
- Desktop Web application: 1280px minimum width and height increased when needed.
Out of scope (DO NOT DESIGN)
- Tablet Design
- Mobile Design
Operating Systems
- Desktop Web Browsers
Branding Guidelines
- Branding guidelines will be posted in the challenge forum.
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or Adobe XD.
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please check forum for Marvel requests
- You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
Round 1
Please provide the following screens for checkpoint along with your clickable Marvel prototype with hotspots.1) Login (Requestor and Worker)
2) Landing (Requestor and Worker)
3) Task Detail (Requestor and Worker)
Round 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.1) Login (Requestor and Worker)
2) Landing (Requestor and Worker)
3) Task Detail (Requestor and Worker)
4) Submit Work (Worker)
5) Profile Page (Worker)
6) User help page (Requestor and Worker)
7) UI Kit Generic
This project will be developed as a Web based application, specifically to be used in desktop/laptop computers; so no mobile experiences are required.
- You will be focused on creating the whole user experience from the login to the submission and review of the work. We welcome your creative ideas !!!
- As information, this web application will be developed using Material UI, so have this technology in mind while designing your UI.
- We expect to see High Fidelity design, this means your design should be ready to develop a production web application.
User Roles
For this web application there are basically two main user roles:
- Requestor: Person in charge of creating, assigning and reviewing the tasks.
- Worker: Person who will perform the task.
Required Screens / Functionalities
1) Login (Requestor and Worker)
You must design a modern login page following the colors provided in the branding section of this challenge.
This screen will be accessible for both “Requestor” and “Worker” users.
- Add the most common login features on this screen:
- Password
- Recovery password
- Submit/Login button
- Do not add any social media connection
2) Landing (Requestor and Worker)
Once the users successfully access this web application, they must be able to see a dashboard looks like page with the following information:
- Main navigation with access to application features
- List of Task created / available
- Think on search, filtering and sorting features such like: date, trending, active/inactive, deadlines, type, etc.
There are two main different actions to perform by each user on this page:
A) Requestor
- This user can Create/update/Delete task
- Activate/inactivate tasks
- View additional overall stats: # of workers, # of submissions
- Assign tasks to X Worker in particular.
B) Worker
- Access the tasks, no edit options available
- Tasks should be visible only for the Worker who have that skillset in their profile. For example: a ReactJS related development task, should be visible only for a worker who has this skill marked in their profile page.
- No overall stats
Both users needs to see a notification panel on this screen. This feature will have the following:
- Reminders about tasks
- Submission notifications
- Task assignment notifications
- Messages notifications when a task is assigned, completed, ready for review.
- How should this notification be accessible? Propose the best UX here.
- For both users, what other actions would be nice to perform and what other information is needed here? Propose your ideas!
- You need to show these two different user scenarios in your design.
3) Task Detail (Requestor and Worker)
Both users should be able to see the details of the task. Think this page as a resume of the task itself where workers can see:
- Detail of the task
- Supporting material in any format: PDF, Video, Audio,Images, Slides Deck, etc.
- Deadline and Status
- Workers assigned
- Requestor users can also be able to edit the task directly from this page.
- If a task is not completed a Requestor should be able to release the task to pool again and setup the new deadline (Hours and dates).
- Workers should be able to submit their work from this screen, so how the submission features should be accessible? Propose the best UX here.
4) Submit Work (Worker)
Once the work is completed, a worker should be able to easily submit their work using a very simple step by step platform.
Think on a very intuitive page with the following features:
- Work files
- Comments
- Upload confirmation messages
- File edit: Upload new files, remove old files, etc.
5) Profile Page (Worker)
This page will be visible only for the workers. In this page they should be able to add their skillset (This will affect how many tasks they will see in the listing pool). Think on any feature that matters for a profile page such like:
- Preferences
- Alerts and Notifications
- Profile Picture with description
- Email / Password settings
- Tasks historical
- Overall task performance stats
6) User help page (Requestor and Worker)
This page will be similar to a FAQ page, where Workers and Requestors can find any necessary documentation and information about the usage of this platform. Resources can be published here as well. Keep this screen simple and easy to use.
7) UI Kit Generic
This will be a generic page used for development, so you will need to provide a full set of most commonly used UI elements. For example:
- Alerts like errors, warning, success etc.
- Selects and Dropdown boxes
- Radio and Checkboxes
- Texts and paragraphs style
- Forms and Buttons
Form Factors
Please make sure your design supports these form factors:
In-scope
- Desktop Web application: 1280px minimum width and height increased when needed.
Out of scope (DO NOT DESIGN)
- Tablet Design
- Mobile Design
Operating Systems
- Desktop Web Browsers
Branding Guidelines
- Branding guidelines will be posted in the challenge forum.
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or Adobe XD.
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please check forum for Marvel requests
- You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
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.