Challenge Overview
Welcome to GE Brilliant Career - UI Prototype Contest Part 2. 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:
- Assessment Page (06-Assessment-Landing.jpg)
- Assessment Test Page (07-Assessment-Play.jpg, 08-Assessment-Play-Selected.jpg, 09-Assessment-Play.jpg, 10-Assessment-Play-Selected.jpg, 11-Assessment-Play-End.jpg)
- Career Exploration Page (17-Careers-Landing.jpg, 17-Careers-Landing-Filter-Selection.jpg, 17-Careers-Landing-Filters-Closed.jpg, 18-Careers-Landing-Information.jpg)
- Profile Page (24-Profile.jpg)
Assessment Page
- Clicking on ASSESSMENT at the top tab takes the user to the 06-Assessment-Landing.jpg page
- Clicking on the blue Essential Skills text takes the user to the Essential Skills page (already exists in the provided prototype). Clicking on the blue Career Pathings text takes the user to the Career Exploration page (will be built below). These are hyperlinks.
- Clicking on Play will take the user to the Assessment Test page (07-Assessment-Play.jpg)
- In the My Activity Feed page, clicking on text in the title column for any row is a dummy link. Similarly, clicking on the icon in the Action column for any row is a dummy link.
- In the Leaderboard, the carousel is dummy. There will be left and right arrows. However, they will be dummy - use CSS style cursor:pointer for the arrows though clicking on them does nothing.
- In the Leaderboard, clicking on the names is a dummy link
- View All links under the Activity Feed and Leaderboard are dummy links
Assessment Test page
- Progress Bar - Make sure that you reuse the existing progress bar from the Essential Skills page (See Page 14-Essential-Skills-Module-Sample1.jpg equivalent in the prototype). Please do not create new styling. We make the assumption that the two progress bars are the same and thus are asking you to reuse. If not, please mention in the contest forum.
- Clicking on any of the emojis should activate it. Only one emoji can be selected at a time. All emoji’s can be activated and you can get the active states for all emoji’s from the Assessment Page.
- Please follow the design hosted on MarvelApp to know the navigation behaviour here. Save moves to the next question. Cancel takes the user back to the Assessment Page. Saving after question 2 takes the user to 11-Assessment-Play-End.jpg page. In this page, clicking on Essential Skills takes the user to the existing Essential Skills page and clicking on Recommended Careers takes the user to the Career Exploration page. Take Survey will be a dummy link.
Career Exploration Page
- Clicking on CAREER EXPLORATION page takes the user to 17-Careers-Landing.jpg
- Filter and Refine Search.
- Sort By, Sort Order, Skills and Location fields - their values will be dummy links. Note that 17-Career-Landing-Filter-Selection.jpg shows the values for Sort By field. For Sort Order, we will have Ascending and Descending fields. For Skills and Location, you can use your own values (show 4 random values in the dropdown)
- Salary Range will be a range element. The range slider should work and the amount should get updated with the value always above the slider handlers. The range will be $50K to $200K by default with a minimum of $0K and maximum of $400K.
- High Demand will behave like a radio element - Either Yes or No can be selected. Yes is selected by default.
- Education Required - the slider, as the value is increased will show the following values (in order): No Degree, High School Diploma, Associate’s Degree, Bachelor’s Degree, Master’s Degree and Doctoral Degree
- Estimated Future - This will behave like a radio button. Only one value can be selected.
- Search input field will allow user to input text but search feature will be dummy
- Pagination will be shown. But it will be dummy links.
- Show the info tooltip next to Recommended Careers on click over the (?) element. Clicking outside the tooltip anywhere closes the tooltip. Clicking on Retake Test in the tooltip takes the user to the Assessment Page.
Profile Page
- Clicking on “Welcome Melissa Smith” will take the user to the Profile Page
- Facebook, Twitter and Google+ icons will be dummy links
- Edit Account will be dummy link
- The sidebar elements will also be dummy links
- In the About Me section, Edit will be a dummy link
- In the Interests section, the X next to the interest elements will be a dummy link. Add More will be a dummy link.
- In the My Saved Careers section, the career title (blue text) and Learn More text will be dummy links. Pagination will also be dummy.
- In the My Badges section, View All will be dummy link
- In the Top 10 Leaderboard section, the Name (including the profile pic) will be dummy links
- In the “Friends Who Play This” section, each friend including the profile pic and name will be dummy link. View All will be dummy link. Twitter, Facebook and Google+ icon will be dummy links
- In the My Status section, the blue text will be dummy links
- In the My Progress section, you can show the chart as an image.
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.
- 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.
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.