Challenge Overview
Welcome to the AZ - Ideation Website Responsive Prototype Challenge! The goal is to create an HTML prototype based on the provided storyboard and requirements that are outlined in the Challenge Details section.
Final Submission Guidelines
The following are the pages and functionality needed for this challenge:
1. All pages
- There will be a link on the AZ intranet homepage the links to the homepage of ideas.
- About nav is dead link.
- The “Category” from the navigation will show a flyout menu when engaged, see “tooltip-and-megamenu.jpg” for reference. Each item should be linked to Category page.
- We do not need the login or register functionality, do not include it.
- “Search” icon redirects to Search Result page.
- “+ Submit Ideas” will display a modal message as shown in “01 Homepage popup.jpg” except when in Dashboard page. When in Dashboard page, it will redirect to Post an Idea page.
2. Homepage
- See “01 Homepage.jpg” for reference.
- See “09 Mobile.jpg” as reference for mobile view.
2.1 Top section
- “Top Voted Ideas”, “Recent Ideas”, and “Recently Commented Ideas” should work as tabs. Use dummy content similar to “Top Voted Ideas” tab for the other tabs.
- Dropdown besides these tabs will have options of “This Year”, “Last Year”, “This Month”, “Last Month”, “Yesterday”, and “Today”.
- “Thumbs Up” and “Thumbs Down” icons should show a tooltip when mouse click, see tooltip-and-megamenu.jpg as reference for this feature.
- Each title should be linked to Idea Details page.
- Link category tags to Category page.
- Make the name of the submitter “Andrew Chen” as link and use dead link for now.
- Pagination are dead links.
2.2 Ideas in Actions
- Dropdown will have the same options outlined above.
- “All”, “Accepted”, and “Working On” will serve as filter tool that will filter the displayed ideas.
- Title and “Read More” should be linked to Ideas Details page.
- “More” button will be dead link.
2.3 Leaderboard
- Dropdown will have the same options outlined above.
- Name of the users/persons will be link and use dead link for now.
- “More” button will be dead link.
2.4 Categories
- Each item will be link to Category page.
3. Category
- See “02 Category.jpg” for reference.
- See “09 Mobile category.jpg” as reference for mobile view.
- Dropdown will have the same options outlined above.
- “Thumbs Up” and “Thumbs Down” icons should display the same tooltip as mentioned above when mouse click.
- Each title should be linked to Idea Details page.
- Link category tags to Category page.
- Make the name of the submitter “Andrew Chen” as link and use dead link for now.
- Pagination are dead links.
4. Ideas Details
- See “03 Ideas Details.jpg” for reference.
- See “09 Mobile Idea details.jpg” as reference for mobile view.
- “Thumbs Up” and “Thumbs Down” icons should display the same tooltip as mentioned above when mouse click.
- Link category tags to Category page.
- Make the name of the submitter and commenter as links and use dead link for now.
5. Search Result
- See “04 Search Result.jpg” for reference.
- See “09 Mobile search result.jpg” as reference for mobile view.
- Use the same feature and functionality as outlined in Category page whenever applicable.
6. Post an Idea
- See “05 Post an Idea.jpg” as reference.
- See “09 Mobile Post Idea.jpg” as reference for mobile view.
- “Save” button will show a modal with a simple message of “Your idea was saved!” with close button to close the modal.
- “Preview” button will show a modal displaying the field values in HTML preview. Copy the same format in Idea Details page. This modal should have a close button to close the modal.
- “Submit” button will show a modal with a simple message of “Your idea was successfully submitted.”, with a close button to redirect the user to Dashboard page.
- “Back to Dashboard” should link to Dashboard page.
7. Dashboard
- See “08 Dashboard.jpg” as reference.
- see “09 Mobile Dashboard.jpg” as reference for mobile view.
- Use Google chart for the chart requirement.
- For other tab/pages, please use placeholders.
- Idea titles should be linked to Idea details page.
- Category tags links to Category page.
- All other links and buttons that don’t have applicable page in this prototype can be dead links.
8. Blog List
- See “10 Blog List.jpg” as reference.
- See “09 Mobile Blog.jpg” as reference for mobile view.
- Blog users, title, and category tags/filter can be dead links.
NOTE:
Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad (Safari & Chrome)
- iPhone (Safari & Chrome)
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)
- 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.
- We prefer that you use Bootstrap for this challenge.
- 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.
- We prefer you use jQuery for this challenge.
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.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.