Challenge Overview
Welcome to "REPO - Media Library UI Prototype Challenge". In this challenge, we are looking for your to take the provided designs and interactions and create the HTML/CSS/JS Prototype to continue this project. Your job is to convert the provided PSD files into an HTML5+AngularJS SPA prototype working on mobile browsers.
We already have the design (PSD files) and now needs your expertise to convert the PSD files to working Mobile HTML prototype.
Note: We are looking for a SPA using AngularJS, though sometimes there is no easy solution to a problem within Angular where there is one in jQuery. Since the two frameworks can work together you are allowed to leverage either framework when appropriate. That said, AngularJS is the focus framework and we would like you to "think in angular" when coding.
Screen Requirements :
01. Splash screen
- 01_Splash Screen.png
- This page will appear by default once user select the apps from their mobile.
- Simple animation needed to indicates loading time while user waiting the application to be loaded perfectly.|
- Use logo from 00_icon-ps.png or 00_icon ps.ai. The current logo in Splash Screen design is not correct.
02. Login Screen
- 02_1_Login Screen.png, 02_2_Input.png, 02_3_Login Failed.png.
- It is not shown in the design, but we need "remember me" features available in the login screen so please create one.
- When user enters their login information and mobile keyboard showed uo, screen size should adjusting accordingly (02_2_Input.png).
- If user enter wrong credential, provides login failures (02_3_Login Failed.png).
- Use logo from 00_icon-ps.png or 00_icon ps.ai. The current logo in Login Screen design is not correct. .
03. Dashboard screen
- 03_1_Browse Media Library_Featured.png, 03_2_Suggested.png, 03_3_Popular.png, 03_4_Download.png, 03_5_Slide for more options.png, 03_6_Note.png.
- There will be 4 sub tab in this screen (Featured/suggested/popular/downloads)
- Featured tab - will show list of features item like videos, documents, music, etc (03_1_Browse Media Library_Featured.png).
- Suggested tab - will show list of item like videos, music, etc with rating and information available for user suggestion (03_2_Suggested.png).
- Popular tab - item and information will have the same content like suggested tab, but the list will only show popular items (03_3_Popular.png).
- Download tab - all files the user has downloaded sorted by most recent (03_4_Download.png).
- Swipe specific list to the right will open more options (03_5_Slide for more options.png, 03_6_Note.png).
04. Menu Screen
- 04_Menu.png
- Menu will appear when user touch menu icons in the application (hamburger menu).
- Menu should appear with smooth slide in animation.
- Menu items are "Browse Media, Add Media, My Media, Live Streaming, Downloads, Favourites and Settings".
05. My Profile Screens
- 05_1_Profile Screen_Media.png, 05_2_Profile Screen_Media_Edit.png, 05_3_Series.png, 05_4_Comment.png, 05_5_Scroll.png, 05_6_Scroll.png, 05_7_Scroll.png, 05_8_Scroll.png
- There will be 3 sub tabs in my profile screens : media, series and comments.
- Media, This screen will show all files and media that user been uploaded. Please notice there is a button to add new media into the system. If user swipe any list, there will be an edit option showed up. (05_1_Profile Screen_Media.png, 05_2_Profile Screen_Media_Edit.png)
- Series, This screen will show all series that user been uploaded. (05_3_Series.png)
- Comments, This screen will show all comments that i've made in any other pages in the application (05_4_Comment.png).
- Once user try to scroll down the list (any subtab), the header will shrink and some elements will disappear (05_5_Scroll.png, 05_6_Scroll.png). Header will reach particular width (05_7_Scroll.png, 05_8_Scroll.png) and user can scroll down the list content, header will remain fixed.
06. Filter and Search Screen
- 06_1_Search.png, 06_2_Filter.png, 06_3_Search Result.png,
- Sort by : Relevance, Date, Views, Rating.
- Filter by: Date (e.g. today, within a week, within a month, etc.), File types.
07. Media Item details Screen
- 07_Media Details.png.
- User will open this screen when they want to view details of item/files in media library.
- Information/design needed in media item details screen : Title, Media Item, Your rating, General rating, Number of ratings, Top tags, Series name and picture (if in a series), Uploader, Basic description of media item, File size, File type, List of any additional files, Share media item button, Download button, View count, Added date, Updated date, Comments, Name of commenters, Date and time of comment, Button for making your own comment.
- User can rate the media item/files they've seen.
- User can view additional information regarding the media item/files in this screen.
- User also can see other user comments in comments section.
08. Media Series Screen
- 08_Media Series Details.png
- Information/design needed in media item details screen : Creator, Favorite option, Subscribe option, Created date, list of media items within series, avg media rating, description, updated, open/not
09. Add New Media and Series
-- 09_1_Add New Media Preliminary Screen.png, 09_2_Add Media.png, 09_3_Choose Series.png, 09_4_Add Series.png
- Creation / upload files to media library.
- Application user can add new media to the system, there are 4 types of media can be added, new photos, new videos, browse from folder or livestream (09_1_Add New Media Preliminary Screen.png).
- Once user select any media that he/she wants to add, they will be asked to enter some information regarding the media item (09_2_Add Media.png, 09_3_Choose Series.png, 09_4_Add Series.png)
10. Favourite Library
- 10_1_Favourite Series.png, 10_2_Slide Right.png, 10_3_Person.png, 10_4_Setting.png
- Built from favorited material (can remove favorites from page)
- Favorite series, person, tags
- Yes or no to adjusting recommendations based on list
11. Setting Screen
- 11_Settings.png
- Enable email notifications daily of new media that pertains to their favorites (containing summaries)
12. Help Screen
- 12_Help.png
- Common FAQ design
13. Tag Additional Screen
- 13_1_Search Tags.png, 13_2_No Result.png, 13_3_Add Tag.png
- Create add tags and search tags screens.
14. General User Profile Screens
- The screen layout will be similar like "05. My Profile Screens". The only differences it will show other user profiles and their information.
- Use common layout design from other screens.
- There are 3 sub tab design needs to be create, User Media, User Series, User comments..
Important :
- For Icons and Logo, Please use logo and icons from 00_icon-ps.png or 00_icon-ps.ai.
- Your design needs to be responsive, so in different screen sizes the application can adjust the layout accordingly.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3
- 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.
- 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.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Libraries/Plugins
AngularJS is our main focus framework and you should "think in angular" when coding. However, you can use JQuery too for certain things since these two framework can work together.
Browser Requirements
- Safari Mobile in iPhone 4s, 5, 5s
- Default Android Browser
Documents :
- Storyboard : Attached in Challenge Forum.
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.