Challenge Overview
Welcome to Living Progress - Educational Pinboard - Responsive UI Prototype Challenge
The main task of this project is to create the Educational Pinboard UI Prototype based on the provided PSD Storyboard design.
For this challenge you just need create prototype submission to support responsive on Desktop and Tablet views. In the end of this challenge we need solid UI prototype result with best practice solutions
We would like you to use bootstrap 3 or 4 for this challenge!
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
Challenge Description:
This web application is for teachers and students around the world to easily find, collect and modify high quality educational materials at no cost.
Important!
- For this UI Prototype submission we need your submission to support responsive solution from Desktop and Tablet screens
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Provided storyboard for Desktop version using widescreen display (1280px width).
- Provided storyboard for Tablet portrait Version
- For Tablet landscape view, please follow the same as desktop.
- As far as possible, we need all pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!
- Also you can use open source library like jQuery.
- We would like you to use bootstrap 3 or 4 for this challenge! (no other frameworks please)
Page Requirements:
Please go through the requirements and look to capture all interactions as mentioned below..
00 Header & Footer:
Non-logged in users Header:
- Logo: Please link to the main page of the site Desktop_002_FTUE_FirstTimeUserExperience_NonLoggedIn.png
Main navigation items:
- - - Pinboards: Takes them to a view similar to Desktop_013_MyPinboard_Grid.png / Tablet_010_MyPinboards_Grid.png but it would be only read only version, clicking on it would show the sign-in modal window.
- - - Resources: Takes the user to view similar to Desktop_020_Resources.png / Tablet_015_Resources.png, and similar to pinboards..this would show sign in on clicking them.
NOTE: In above pages user will not be logged in
- Search: when a user clicks on this to search, we need to show type ahead functionality
- Sign In: Shows a modal window Desktop_004_SignIn.png / Tablet_004_SignIn.png
- Create Account: Shows a modal window Desktop_003_CreateAccount.png/ Tablet_003_CreateAccount.png.
Logged in Users Header:
Logo: Please link to the main page of the site ‘Desktop_007_Landing.png’
Main navigation items:
- - - Pinboards: Takes the user to Desktop_013_MyPinboard_Grid.png / Tablet_010_MyPinboards_Grid.png
- - - Resources: Takes the user to Desktop_020_Resources.png / Tablet_015_Resources.png
- - - Inspiration: This will take the user to a view similar to “My Pinboard” but it would be pinboards created by other users..so a user could scroll through in this page see many pinboards!
(Note on how these menu items are put up in the tablet view: Tablet_002_Responsive_Menu.png)
Search (Desktop_035_Search_Typeahead.png/Tablet_026_Search_Typeahead.png):
- When a user clicks on this to search, we need to show type ahead functionality.
- Once the user clicks on the search icon, we see the results as shown in Desktop_036_Search_Results.png/Tablet_027_Search_Results.png
“+” (red) Icon:
- This shows a pop-up menu on click as shown in Desktop_008_Landing_AddContent.png
Upload Content:
Reference: Desktop_011_UploadContent.png / Tablet_009_UploadContent.png
- Clicking on “x” close icon should hide this modal window.
- User will choose the file and image to the uploaded
- Type and Choose a board (Ex values: Science, Arts, Technology, etc) are drop-downs..
- Clicking on “Add and Cancel” will hide this modal window
Add from a website:
Reference: Desktop_009_AddFromWebsite.png
- Please follow the storyboard..
- Clicking on “Add and Cancel” will hide this modal window"
Create Content:
Reference: Desktop_010_CreateContent.png
- Clicking on “x” close icon should hide this modal window.
- Follow the storyboard and capture the details as shown
- Type and Choose a board (Ex values: Science, Arts, Technology, etc) are drop-downs..
- Clicking on “Add and Cancel” will hide this modal window
Create Board:
Reference: Desktop_012_CreateBoard.png
- Clicking on “x” close icon should hide this view
- This will be a form, category is a drop-down...you can take a look at the drop-down style in Desktop_010_CreateContent.png, for options..use some dummy values.
- private is a toggle switch “OFF - grey and ON - green”
- Cancel: Hide this view
- Create Board: On clicking show the error Desktop_016_EditBoard_Error.png and on clicking “Save board” again in error view just hide this modal window.
Settings Icon: Make it a dummy link.
User thumb: Clicking on the user thumb will them to the private profile Desktop_026_View_PrivateProfile.png
Footer:
- Please add footer for all pages including "First time landing page" (footer is not shown in this view but we need them) as shown in Desktop_007_Landing.png
01 First Time Landing Page:
Reference: Desktop_002_FTUE_FirstTimeUserExperience_NonLoggedIn.png / Tablet_001_FTUE_FirstTimeUserExperience_NonLoggedIn.png
- We have Sign In and Create Account in the main banner, link them as mentioned below:
- - - Sign In: Shows a modal window Desktop_004_SignIn.png / Tablet_004_SignIn.png
- - - Create Account: Shows a modal window Desktop_003_CreateAccount.png/ Tablet_003_CreateAccount.png.
- Clicking on “Explore Here” should scroll down to the area where we have the Pins (cards).
- Clicking on each of the Pins should show the Sign-In modal window (Desktop_004_SignIn.png)
Create Account:
Reference: Desktop_003_CreateAccount.png/ Tablet_003_CreateAccount.png
- Clicking on “x” close icon should hide this view
- For now make these social media icons (g+, facebook, twitter) as dead links
- User will be able to input their email ID and Password.
- Clicking on “Create Account” should take the user to Desktop_007_Landing.png / Tablet_006_Landing.png
- Make Terms of Service as a dead link for now.
- Clicking on Sign In, should switch to the sign in view Desktop_004_SignIn.png / Tablet_004_SignIn.png
Sign In:
Reference: Desktop_004_SignIn.png / Tablet_004_SignIn.png
- Clicking on “x” close icon should hide this view
- For now make these social media icons (g+, facebook, twitter) as dead links
- User will be able to input their email ID and Password.
- Make “Forgot password?” as a dead link for now.
- “Sign In” button interaction:
- - - We would like to simulate how the error screen is shown, please show them when user clicks on “Sign-in” button for the first time, please take a look at error screen here: Desktop_005_SignIn_Error.png / Tablet_005_SignIn_Error.png.
- - - Clicking “Sign In” in the error screen should take the user to Desktop_007_Landing.png / Tablet_006_Landing.png
- Clicking on “Create Account”should switch to the “create account” view Desktop_003_CreateAccount.png/ Tablet_003_CreateAccount.png.
02 Landing Page:
Reference: Desktop_007_Landing.png / Tablet_006_Landing.png
Recommended Resources:
- This will be a slider, click on left or right arrow should scroll through the resources (maybe click on these arrows can show the next 3 resources and scroll animation is upto you - suggest what you think it would be best)
- Each resource title need to be linked to Desktop_022_Resource_Details.png / Tablet_016_Resource_Details.png
- Clicking on the user name “John Doe” should be linked to Desktop_025_View_PublicProfile.png / Tablet_018_Profile_Public.png
- Make the hyperlink a dummy link
- Comments icon: Please link it to Desktop_022_Resource_Details.png / Tablet_016_Resource_Details.png
- Favorite icon: Click on it turns it to colored border as shown in 2nd and 3rd resources.
Suggested Boards:
- This will be a slider, click on left or right arrow should scroll through the boards (maybe click on these arrows can show the next 3 boards and scroll animation is upto you - suggest what you think it would be best)
- Clicking anywhere should show board details Desktop_017_BoardDetails_OthersBoard.png / Tablet_013_Board_Details.png
- Clicking on “username” should show the user profile Desktop_025_View_PublicProfile.png / Tablet_018_Profile_Public.png
My Pinboards:
- Make the entire row clickable and should take the user to Desktop_019_BoardDetails_MyBoard.png / Tablet_013_Board_Details.png
Recent Activity:
- Create as shown in the storyboards (no links here).
03 My Pinboard:
Reference: Desktop_013_MyPinboard_Grid.png / Tablet_010_MyPinboards_Grid.png
- By default grid view is shown
- Clicking on the “list icon” should show the list view Desktop_014_MyPinboard_List.png / Tablet_011_MyPinboards_List.png
- Next to the grid / list view icons are the statistics (no links)
- Create a board: This will trigger this modal window Desktop_012_CreateBoard.png
- Clicking on any of the board (title, images or pins) will take the user to Desktop_019_BoardDetails_MyBoard.png / Tablet_013_Board_Details.png
- Username (by john) need not be a link.
- On mouse hover on a board should show these options
- - - Add Content: Should show the same pop-up menu when a user clicks on the “+” (red) icon in the header.
- - - Edit: Should show the edit modal window Desktop_015_EditBoard.png / Tablet_012_EditBoard.png
- - - Share: Make it a dead link
List View:
Reference: Desktop_014_MyPinboard_List.png / Tablet_011_MyPinboards_List.png
- Clicking on grid icon will show the grid view Desktop_013_MyPinboard_Grid.png / Tablet_010_MyPinboards_Grid.png
- All interactions are same as mentioned above for grid view are applicable!
Edit Board:
Reference: Desktop_015_EditBoard.png / Tablet_012_EditBoard.png
- Clicking on “x” close icon should hide this view
- This will be a form, category is a drop-down...you can take a look at the drop-down style in Desktop_010_CreateContent.png, for options..use some dummy values.
- private is a toggle switch “OFF - grey and ON - green”
- Delete board is a dummy link
- Cancel: Hide this view
- Save Board: On clicking show the error Desktop_016_EditBoard_Error.png and on clicking “Save board” again in error view just hide this modal window.
04 Other Users Board Details:
Reference: Desktop_017_BoardDetails_OthersBoard.png / Tablet_013_Board_Details.png
- Clicking on the breadcrumbs “My Pinboard” takes them to My Pinboard
- John doe should be linked to Desktop_025_View_PublicProfile.png / Tablet_018_Profile_Public.png
- Share button will be a dummy link
- This page will show the list of resources, as the page loads the resources are loaded..you can show a pre-loader as the user moves to the bottom of the page and then load the resources..(footer is not fixed, it can be shown at the bottom once all the resources are completely loaded).
- Please make sure to capture all interaction for a “resource” as explained in “Landing page > recommended resources”.
- If the user hovers on a resources created other users (Andrew Lorem, John Lorem), then we show option to “Pin it” and “Share”.
- If the user hovers on a resource created by themselves (John Doe), then we these “Pin it, Edit and Share”
PIN IT:
- Clicking on “Pin it” will show a pop-up
- Clicking on “x” close icon should hide this pop-up..
- Create a Board: Clicking on this will show a textbox (Desktop_019_BoardDetails_MyBoard.png) to enter the name for a new board with options to “Create” (opens the modal window: Desktop_012_CreateBoard.png), Cancel (hides the textbox and shows the “Create a Board” link again)
- Favorites: Just changes the grey favorite icon to red colored icon indicating that it is added to favorites...this acts as a toggle button that is clicking on red colored icon would change it back to grey and would be good if the number next to that can be incremented or decremented based on user's action.."grey to red= 1 increament", "red to grey= 1 decrement" !
- Boards (All boards that you see under “my Pinboard” are shown here...ex: Science, Electronics, Arts and Technology, etc..), selecting any board will show a tick mark.
Share:
- Make this a dummy link for now
05 My Board Details:
Reference: Desktop_019_BoardDetails_MyBoard.png
- This is almost same as other users board but users will be an additional option to “Edit” the board
- They will also see an additional option for a resource i.e. “Move”, it also shows the same pop-up as that of “pin it”
- Edit: Will show the modal window Desktop_024_EditContent.png / Tablet_017_EditContent.png
- Share: Make this a dummy link for now..
06 Resources
Reference: Desktop_020_Resources.png / Tablet_015_Resources.png
- This page will show the list of resources, as the page loads the resources are loaded..you can show a pre-loader as the user moves to the bottom of the page and then load the resources..(footer is not fixed, it can
be shown at the bottom once all the resources are completely loaded).
- All interactions mentioned earlier are applicable..
- All Topics and All Types are filters, please see their drop-down styles Desktop_021_Resources_Filters.png
- Please remove Grid and List icons from this view.
- If the user hovers on a resources created other users (Andrew Lorem, John Lorem), then we show option to “Pin it” and “Share”.
- If the user hovers on a resource created by themselves (John Doe), then we these “Pin it, Edit and Share”
- Clicking on a resource takes user to resource details Desktop_022_Resource_Details.png / Tablet_016_Resource_Details.png
07 Resource Details:
Reference: Desktop_022_Resource_Details.png / Tablet_016_Resource_Details.png
- This shows the resource details
- Breadcrumbs: Science (takes them to a view similar to Desktop_020_Resources.png / Tablet_015_Resources.png, just have the title as “Science” instead of “resources”) > Resource (Same as Desktop_020_Resources.png / Tablet_015_Resources.png)
- PIN IT: Works same as explained above
- Below the title (Algebra), the username is linked to Desktop_025_View_PublicProfile.png / Tablet_018_Profile_Public.png
- Source: Website link can be a dummy link
- Play, Share can be dummy link
- Edit: Will show the modal window Desktop_024_EditContent.png / Tablet_017_EditContent.png
- Move: Will show the same pop-up as shown for “PIN IT”
More Information:
- Make all the blue text as link (dummy links)
Pinned By:
- All usernames are linked to Desktop_025_View_PublicProfile.png / Tablet_018_Profile_Public.png
Pinning Trend:
- Implement the graph, feel free to use any plugin that’s available
Comments:
- Write a comment will trigger the modal window Desktop_023_Add_A_Comment.png / create similar view for tablet as well.
- Usernames in the comments are link, just link them to the public profile as mentioned above.
Add Comment:
Reference: Desktop_023_Add_A_Comment.png
- Clicking on “Add or Cancel or x close icon” should hide this view
Edit Content:
Reference: Desktop_024_EditContent.png / Tablet_017_EditContent.png
- Clicking on “x” close icon should hide this modal window.
- Follow the storyboard and capture the details as shown
- Type and Choose a board are drop-downs, please follow Desktop_010_CreateContent.png
- Clicking on Cancel, Save will hide this modal window
08 Public profile:
Reference: Desktop_025_View_PublicProfile.png / Tablet_018_Profile_Public.png
- This shows the profile information in the left
- We have two tabs:
- - - “Boards”: same as the boards shown in “my pinboard”
- - - “Pins”: same as the resources in boards (Desktop_019_BoardDetails_MyBoard.png)
09 Private Profile:
Reference: Desktop_026_View_PrivateProfile.png / Tablet_019_Profile_Private.png
- Same as public profile, except that this page will have options to “Edit Profile”
- Clicking on “Edit profile” will show Desktop_027_EditProfile.png
10 Edit profile
Reference: Desktop_027_EditProfile.png / Tablet_020_Edit_Profile.png
- Clicking on “x” close icon should hide this modal window.
- This will show a modal window and user will be able to edit the form
- Clicking on “Save / Cancel” will hide this modal window.
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 Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Responsive Web Design solution!
Browsers Requirements:
- Latest Chrome, Firefox, Safari browsers (desktop / tablet as applicable)
- Internet Explorer 10+
CODE REQUIREMENTS:
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.
- 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
- 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.
- It is fine to use GPL/MIT/Open Source code.
- 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 look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Final Submission Guidelines
Submission Deliverables:- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.