Challenge Overview
Welcome to Living Progress - Educational Pinboard - Admin Pages Responsive UI Prototype Challenge!
The main task of this project is to add Admin pages to the existing Educational Pinboard UI Prototype based on the provided PSD Storyboard design and outlined specs.
Similar to the existing UI prototype, the admin pages should be responsive on Desktop and Tablet views. In the end of this challenge we need solid UI prototype result with best practice solutions
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!
Project Overview
This web application is for teachers and students around the world to easily find, collect and modify high quality educational materials at no cost.
Documents
The screenshots and storyboard design files are provided in challenge forums.
Important!
- You will build your submission based on the provided UI prototype, don’t introduce new frameworks, libraries, css or js code unless it is needed to support the new pages.
- 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.
- You will reuse the same bootstrap framework version used in existing UI prototype.
Page Requirements
Please go through the requirements and look to capture all interactions as outlined below.
Sign in Page
- - - The screen should now support navigating to end user dashboard or Admin dashboard
- - - For admin dashboard use admin/password to simulate admin login to take user to Admin dashboard.
Logged in Admin Header
Logo: Please link it to users page Desktop_028_Admin_Manage_Users.png/Tablet_012_AdminUser_Users.png
Manage navigation item - it is a drop down menu:
- - - Users: Takes the user to Desktop_028_Admin_Manage_Users.png
- - - Boards: Takes the user to Desktop_032_Admin_Manage_Boards.png
- - - Resources: Takes the user to Desktop_033_Admin_Manage_Resources.png
- - - Reports: Takes user to Desktop_034_Admin_Reports.png
Search (Desktop_035_Search_Typeahead.png/Tablet_026_Search_Typeahead.png):
- The behavior should be same as currently implemented in the existing UI prototype.
Users Page
Reference: Desktop_028_Admin_Manage_Users.png / Tablet_012_AdminUser_Users.png
Filter pick lists:
- Role : it will have 4 options as shown in the left area in Desktop_028_Admin_Manage_Users.png , By default it should be All Users.
- Order by : it will have 4 options as shown in the left area in Desktop_028_Admin_Manage_Users.png, by default it should be Alphabetically.
Add User:
- It opens modal Desktop_030_Admin_Manage_AddUsers.png to add new user
- Add photo will open browser upload dialog to upload new photo.
- Add proper validation for the form, use same validation error styling we implemented in existing modal popups.
- Role pick list will have three options :
- Administrator
- Teacher
- Learner
- Permissions pick list will have options :
- Post Content
- Create Groups
- Manage Groups
- Cancel/Save buttons will close the modal.
- Opening the modal multiple times should always reset form fields.
- Clicking x icon will close the modal.
Users Table :
- As the page loads, the users table is loaded, you can show a pre-loader as the user moves to the bottom of the table and then load more users..(footer is not fixed, it can be shown at the bottom once all the resources are completely loaded).
- User photo is dynamically set, not a background image.
- Clicking on user photo or name will take user to Desktop_031_Admin_Manage_ViewUser.png
- Clicking on Edit option will open Edit User popup
- Clicking on Delete option will remove table entry.
- Implement client side filtering table by user role.
- Implement client side sorting users by the selected order by option.
Edit User:
- It opens Desktop_029_Admin_Manage_EditUser.png
- Add proper validation for the form, use same validation error styling we implemented in existing modal popups.
- Role pick list will have three options :
- Administrator
- Teacher
- Learner
- Permissions pick list will have options :
- Post Content
- Create Groups
- Manage groups
- Delete User option will close the modal.
- Cancel/Save buttons will close the modal.
- Clicking x icon will close the modal.
Admin - Manage User Profile page
Reference: Desktop_031_Admin_Manage_ViewUser.png
This page is identical to the private profile page (Desktop_026_View_PrivateProfile.png) with following differences in design:
- It has Edit User and Delete User buttons in user info widget.
- We do not have a tablet design for this admin page, but you need to follow the private profile tablet design and add the Edit User and Delete User buttons in proper place.
Edit User button:
- It will open Edit User modal popup as in Users page.
Delete User button:
- It will delete the user, in the prototype we simulate this by taking the admin to the users page.
Boards Page
Reference: Desktop_032_Admin_Manage_Boards.png
This page is similar to My Pinboard page (Desktop_013_MyPinboard_Grid.png), so you need to make same behavior implemented there:
- By default it is a gridview.
- Clicking on list view icon will switch to list view, clicking on Gridview will show the grid view.
- 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 hover over a board item we show Edit/Delete options.
- We do not have Create Board button in the page.
- We do not have a design for the listview, but you will follow same design as in Desktop_014_MyPinboard_List.png, where we will show Edit/Delete options when hovering over an item instead of the current Add Content/Edit/Share options.
Delete Option
It will remove the item from the page.
Edit Option
It will the same as existing Edit Board modal popup Desktop_015_EditBoard.png
Resources Page
Reference : Desktop_033_Admin_Manage_Resources.png/Tablet_024_AdminUser_Resources.png
This screen is identical to Users Resources page : Desktop_020_Resources.png, refer to the page and implement same changes we did there.
Notes:
- 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.
- Clicking on a resource takes user to resource details Desktop_022_Resource_Details.png / Tablet_016_Resource_Details.png
- Admin cannot pin a resource, instead when hovering over an item it will show Edit/Delete options.
- Edit option will open Edit Content popup (it is already implemented, you need to link to it) Desktop_024_EditContent.png.
Reports Page
Reference: Desktop_034_Admin_Reports.png/Tablet_013_AdminUser_Analytics.png
Notes:
- Filters pick lists : Refer to notes in Desktop_034_Admin_Reports for more information about the values in each pick list.
- Download button is deadlink.
- Links in the page should be dead links.
- Implement all charts, you can use the same library used to implement the graph in Resources details page.
- Existing prototype is using d3js so you can use it for implementing a heatmap map graph (check this http://bl.ocks.org/mbostock/4060606)
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.