Challenge Overview
Welcome to the Company Portal Student Program UI Prototype Challenge!
The main goal of this challenge is to create the Student Program UI prototype pages based on the provided PSD Storyboard design and instructions outlined below.
Final Submission Guidelines
IMPORTANT!
- This application will use Bootstrap for responsive design purpose. Please follow coding standards and write clean code.
- Javascript library usage will be up to Competitor.
- CSS font stack should be: “Myriad Pro”, “PT Sans”, Arial, Helvetica, sans-serif.
- When resize browsers into mobile screen width, all element need transform using fluid layout.
- Asking questions early in the challenge forum and getting Copilot or PM's feedback is very important for the success of this challenge.
- Provided storyboard contains Desktop and Mobile Retina version.
- On Desktop browser, all icons need remain in consistent size when resized into mobile layout.
- Your UI Prototype need support Retina and Standard size when viewed on mobile devices.
Company Portal Student Program UI Prototype Requirements
0. Overall pages
0.1. Header
- Link each navigation items to their corresponding pages.
- Use dead link in case the nav item doesn’t have applicable page.
0.2. Footer
- List items under “Key Contacts” and “Useful Links” are all hyperlinks. Use dead link for each item for now.
- “Students in the Program” is in the form of image gallery carousel, each item have should be linked to the Student Program page.
- On mobile, the storyboard shows incorrect layout. The proper layout should be each column are stacked one upon another.
0.3. Carousel/Sliders
- All carousel/sliders are supported by Left/Right button. When engaged, it will move/slide to its corresponding direction.
- Do 1 item per slide unless otherwise stated below.
- These are not auto-moving.
- Should support infinite loop.
- Simulate at least 3 items.
1. Landing
- See 00-Login.png and 01-Landing-page.png for reference.
- See 06-Landing-page-mobile.png for reference on mobile version.
1.1. Login
- By default, the header’s navigation should follow 00-Login.png, except that the login popup is hidden.
- This login popup is only visible when the user clicks on the “Login” nav.
- Once the user clicks on the “Login” button, the popup window will be closed and the nav will get updated to show that the user had logged in. It doesn’t matter if you do this via JS or reload a new page.
1.2 Top Section
- The top section part is a carousel.
- This carousel will do an infinite loop but it should NOT auto-move.
- Text content and the image on its right is part of a carousel item. This image should be treated as content and not as a CSS background.
1.3 Middle Section
- The icons and the items headings are links that hyperlinked to their corresponding pages.
- Link Access to Details to Resources page.
- Link Student Review Process to Student Review page.
- Challenges for each year and Upcoming Events are dead links for now.
- On mobile, this section will be a carousel that will do an infinite loop and is also not auto-moving.
1.4 Upcoming Events
- Title of each item are link, use dead link for now.
- This is also a carousel, move 3 items per slide. On mobile, move 1 item per slide.
2. Resources
- See 02-Useful-resources.png for reference.
- See 07-Useful-resources-mobile.png for mobile version.
2.1. Top Section
- Another carousel
- 1 slide must have at least a video embed from third party provider, it doesn’t matter if it will not look like the storyboard.
- 1 slide must have at least an image tag base, you can use the image from the storyboard.
2.2. List of Subjects
- This is a carousel, move 3 items per slide. On mobile, move 1 item per slide.
- The middle part of this section is in hover state, the whole part should be clickable.
- Use dead link for “View All Courses” button and the links from this section.
2.3. Onboarding Documents
- Icons and the Title should be hyperlinked. Use dead link for now.
- On mobile, the storyboard doesn’t show correct layout. You need to stack them in 2 column.
2.4. Student Challenges
- Images, Title, Group names, professor name, and the buttons are hyperlinked. Use dead link for now.
- On mobile, the storyboard doesn’t show correct layout. You need to stack them one upon another.
2.5. Transport Information
- “Train Schedule”, “Address”, and the red colored text in the content are hyperlinks, use dead link for now.
- On mobile, this section works like a tab.
2.6. Calendar Timeline
- The ellipsis icons (...) when clicked will show a popup menu. For each menu item, use dead link.
- On mobile, show these ellipses and should function similar to the desktop version.
- Use also dead links for all the buttons in this section.
3. Student Review
- See 03-Student-review.png for reference.
- See 08-Student-review-mobile.png for reference on mobile view.
- On the user rating field, there are 2 ways a user can select the rating. Either via the drop down field or via the stars. Either way, they should get updated to reflect their corresponding fields. Example, if user select a rating via drop down, the star rating should get updated to reflect the selected rating. The same thing applies when user select a rating via the stars.
4. Document Library
- See 04-Document-library.png for reference.
- Search field will not do dynamic filtering. The department field is a dropdown field with pre-filled options, use dummy text for other options.
- Pagination functionality is out of scope, we just need to have them displayed correctly, use dead links for other items.
- Use dead links for the links inside the table.
- On mobile, we don’t have storyboard for this screen. Search fields, label, and button should take 100% width each item per row. The table will only have 1 column instead of 4, each cell should be stacked in 1 column. Table headers are not needed but add the date label for each date items, ex. Date: 21/01/2013
5. Survey
- See 05-Survey.png for reference.
- Once submitted, redirect the page the Survey Report page.
- Apply hover and active/selected state in the option selections. Use the same brown button color for the active/selected state. Use a lighter brown color for the hover state.
- On mobile, stack the options below each survey questions.
6. Survey Report
- See 05A-Survey-report.png for reference.
- Charts should be image placeholder only.
- On mobile view, create only a single column layout. Move the right chart to the bottom.
7. Students in the Program
- See 09-StudentsInTheProgram.png for reference
- The progress bar for each student should be updatable in HTML markup.
- On mobile, use 2 columns instead of 4 columns.
CODE REQUIREMENTS:
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.
- 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)
- Each element (icon or action label) should be individual placed at the same location so that user can optionally hide/unhide, enable/disable them without changing the locations of other elements.
- 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.
- You can use Jquery, Jquery mobile, and/or AngularJS. Also, feel free to confirm with us in challenge forum if you have different framework when build the prototype
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.
Browser Compatibility:
- IE9+
- Firefox latest version (Windows & Mac OS)
- Chrome latest version (Windows & Mac OS)
- Safari latest version (Windows & Mac OS)
Tablet/Mobile
- Chrome Mobile