Challenge Overview
Challenge Overview
Welcome to "John Hancock - CrowdSourcing Services Website Responsive UI Prototype Challenge". Recently, we finished the UI design contests for this project. In this challenge, we are looking for you to help build a working UI prototype using the outputs from the design challenge.
The purpose of this project is to develop a responsive website to share information about Crowdsourced projects with John Hancock employees and vendor partners. The website will streamline retrieval and presentation of information relating to crowdsourced projects. The website should display correctly on desktop, laptop, iOS and Android devices (both horizontal and vertical orientation). Please note that the website will be accessible only to JH employees and Vendor partners within the John Hancock network.
Platforms and Technologies
HTML/HTML5, CSS3, D3, Angular.js, Bootstrap, JSON, JavaScript
Important Expectations:
- Use Angular.js for any new element interactions you built.
- Please implement graphs/charts provided on all pages using some dummy data.
- Frontend will get all its data from JSON files. The JSON files will be generated by a simple backend but front end does not need any hooks directly to the backend.
- This front-end is expected to read in JSON data from the file and display it on the website.
- You MUST make sure all graphic look sharp on Retina and Standard Size. Let us know if you need us provide you for some missing Retina design.
- Challenge winner will be responsible to fix any issues we found or exists on existing UI Prototype after updated based on this challenge spec.
- You are allowed to use graph and chart libraries that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Please use AngularJS technologies as much as possible. For graphs, we prefer D3.
- Please use .less files for CSS where possible and use clear variable structure so that it is easy to change/maintain.
Your implementation should make use of bootstrap framework (mandatory). Although it may not be needed if you strictly follow storyboards, we have provided bootstrap templates for your reference.
Following are the min-width requirements for each version:
a.) Desktop: 1024px width
b.) Tablet: 768px width
c.) Mobile: 640px width
Challenge Details
Complete details for the challenge are available in forums in Documents Section. You will be able to access it once your register for the contest.
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
Code Requirements
Please make sure all pages load quickly. If there is any lagging on the page for any valid reason (e.g. long running processes) then please sure that user feedback is provided (e.g. progress bar).
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Please provide IDs for as many HTML elements as possible. 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
Javascript
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission looks sharp for Retina and Standard devices
Browsers Requirements
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- IE 11 and above
- Chrome, Firefox and Safari on iPad (Landscape & Portrait View)
- Android Browser
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tuorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool