Challenge Overview
Welcome to the BOOST - Task Marketplace Responsive App UI Prototype Challenge!
We are in the process of developing and planning out our new Task marketplace application, which will become an internal community portal used by our employees to crowdsource open work/tasks within our company. The main purpose of this app is to be a task marketplace - a tool where tasks can be posted, searched, and completed.
We recently ran a design challenge which received some high quality submissions. The goal of this current challenge is to build a UI prototype with detailed features outlined below based on the winning design from the earlier challenge.
KEY REQUIREMENTS
The purpose of this challenge is to develop an HTML5 (Angular) prototype based on the provided screen designs. We have provided the screen designs and source files to help you complete this challenge. If any requirements are unclear in the screens please ask on the forum and we’ll be happy to help clarify.
For this challenge, we are looking for the UI prototype to be created using AngularJS. This app will be designed to be a responsive web app, which will primarily be used on a desktop (1280px) - this should be your primary focus for this challenge. However, please keep in mind this prototype needs to be responsive since it will be designed for additional devices (mobile/tablet) in the future. Also, your prototype must work properly in all the required browsers.
All screens provided in the storyboard are in scope.
01. Login Screen
02. Dashboard Screen
03. Post New Opportunity Screen
04. Opportunities Marketplace Screen
05. My Profile Screen
06. Notification Screen
07. Advanced Search Screen (including Search Results)
KEY CONSIDERATIONS
-
The prototype must be responsive and built using HTML5 / CSS / Angular.js. Use of jQuery is permissible.
-
Your pages must match the colors and structure of the provided storyboards.
-
Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
-
Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
-
Your HTML code must be valid HTML5 and follow best practices
-
Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
-
No inline CSS styles - all styles must be placed in an external stylesheet.
-
Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
-
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
-
Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
JavaScript Libraries/Plugins
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available, and do not have copyright statements or author recognition requirements anywhere in the code.
Browser Requirements
Desktop (latest versions)
-
Chrome
-
Safari
-
Firefox
-
IE11
Tablet/Mobile
- While your designs should be responsive, you do not need to focus on mobile / tablet screen sizes for this challenge. The focus of this challenge should be web app.
Final Submission Guidelines
-
Upload your code as a .zip file to the Submit and Review tool for this contest.
-
Upload documentation for how to run your submission
-
Winner will be required to submit a pull request against the branch specified
- We will require the winner’s assistance when we merge code from the other UI contest running in parallel to this contest