Challenge Overview
Welcome to GE Brilliant Career - UI Prototype Contest Part 3. As part of this contest you will build a UI Prototype for a website using the provided designs. Your submission should match the designs provided. You will need to expand upon the existing prototype.
Project Overview
GE Brilliant Career Labs wants to build a website to help students navigate their way into a STEM career using multiple resources aggregated into one simple, information site. The first phase will build out the initial website, allowing students to register, gather information and fill out modules to help them develop their soft skills.
Contest Overview
Only the following pages are in scope:
- Career Details page / Job Overview Page (19-Careers-Detail.jpg)
- What is this job (20-Careers-What-is-this-Job.jpg)
- What skills do I need for this Job (21-Careers-What-do-I-need-for-this-Job.jpg)
- Job Outlook (22-Careers-Job-outlook.jpg)
- How do I get this job (23-Careers-How-Do-I-Get.jpg)
Career Details Page
- This page is shown when the user clicks on any Career in the 18-Careers-Landing-Information.jpg page. However, this page is NOT in scope so you need not worry about linking it for now. Let us know the name of this page so that we can directly enter it in the browser’s address bar
- Clicking on “BACK TO CAREER LISTINGS” is dummy link for now.
- Clicking on “SAVE TO PROFILE” is a dummy link for now
- Job Overview tab will be active in this page. Clicking on the other tabs should link to the other pages that are in scope for this contest
- There will be no video. You can just show the dummy image for now including the text “Electrical Engineering Technologists Overview.
- In the Similar Careers section, “Career Name Lorem Ipsum” and “Learn More >>” will be dummy links.
What is this job Page
- In the Career Pathway section, the first part will be an image (the one above the “Note” text. The part below the “Note” text will be an actual table.
What do I need for this job Page
- In the Skills and Abilities section, “Load More” will be a dummy link
- In the Getting Started section, in the in the menu on the left, each item is a dummy link. However, it should be possible to select each item and for the active item to have the green background.
- The section on the right in Getting Started has a scrollbar. Make sure that you use the custom scrollbar as seen in the designs.
Job Outlook Page
- The USA Map will be an image. You can include the legend in the image too. The “State Map for..” will be a text however.
- In the Local Salary Info, you need to provide the Zip Code and State input and dropdown respectively. You can use the same dropdown style found in the Register Page. The input and dropdown fields will however be dummy and entering or selecting a value will have no effect. The chart will also be dummy. The Go button will be dummy.
- In the Salaries by Company, the “See All” will be dummy link. You need to provide the Location input field and the Sort By dropdown field. You can use the same dropdown style found in the Register Page. The input and dropdown fields will however be dummy and entering or selecting a value will have no effect
- In the Salary bar shown - you actually need to specify in your README how to set its value so that the developer can simply change the value and the bar gets updated to reflect the value. You can check out the progress bar styling in the existing templates
- The pagination is dummy.
How do I get this job Page
- In the “Electrical Engineering Technologists in United States” section, for the filter in the left, you can use dummy values for the dropdown. You can use the same dropdown style found in the Register Page.
- For the results on the left, below the filters, on hover over each item, show the green left border shown for the currently active item. Thus, on hover, the green border is shown. It is also shown for the currently active item.
- In the right of the filter, “Apply Now” is a dummy link. “Read More” under Company Info is a dummy link. “See All” under Photos is a dummy link.
- Clicking on the (^) icon in the title bar of each section should collapse that section. Clicking on (\/) icon in the title bar of each section should expand the section. The sections are expanded by default.
- Note that the section on the right has a scrollbar. You can populate dummy values in this section to demonstrate the scrollbar after the values in the design are shown above.
- In the “Electrical Engineering Technologists in Interview Questions” section, “See All” is a dummy link. You need to provide the Company Name input field and the Sort By dropdown field. You can use the same dropdown style found in the Register Page. The input and dropdown fields will however be dummy and entering or selecting a value will have no effect
- Pagination will be dummy
Points to Note
- Browsers to support: Latest IE, Firefox, Google Chrome and Safari
- Use HTML5 and CSS3. Use Javascript only if the functionality cannot be achieved using HTML and CSS alone.
- Use texts wherever possible. Only logos and icons are images. Some instances, it has been clearly specified if you need to use image or text. Feel free to clarify in the contest forum if there is any confusion
- Use font shared in the contest forums
- NO ANGULARJS. jQuery use to be limited to third party libraries only. Please make sure that the libraries that you use are MIT licensed and that they are actively maintained. In case you wish to use Javascript / jQuery for a dynamic feature, make sure that you comment it well and organize the code into sections where each section is responsible for a feature. Comment it well so that when we convert the app to AngularJS (in the future), we know exactly what the code does.
- Please follow the same container width and responsiveness of the existing prototype.
- Do NOT introduce issues in the provided prototype - you need to create a separate stylesheet for the pages applicable in this contest. We expect no updates to the existing stylesheet. If there is any, instead of updating the old stylesheet, please update the style in your own sheet to override it.
- The winner will help us merge the changes in with existing prototype - we have another contest running in parallel and the winner will be asked to help with the merges, in case there is a merge conflict. Keeping this in mind, make sure that you do not touch existing code and any updates to existing code are as little as possible to help with the merge.
Final Submission Guidelines
Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.
Upload your code as a .zip file to the Submit and Review tool for this contest.