Challenge Overview
Welcome to Hercules NEW MyMedia Application UI Prototype Challenge
For this challenge we need you focus on creating the UI Prototype
NEW MyMedia application will build as responsive application, but for this challenge, you just need submit on Desktop version only.
Read more details UI Prototype Requirements and Flow below.
Final Submission Guidelines
IMPORTANT!
- For this prototype use Bootstrap (latest version!)
- We’re allowed limited JQuery or JQuery plugins. We want to make sure the overhead of all the JS libraries is very, very small, so please make sure that all JS libraries used are approved in the forum.
- Use this library for drag and drop files: http://www.dropzonejs.com
- Make sure font displayed consistent across required browsers. Use attached fonts in your submission.
- For desktop version, all pages within need use fluid layout.
Files Downloadable
NEW MyMedia Storyboard Design.zip - Storyboard Design (Images)
https://www.dropbox.com/s/nk3q4ywf5oq3wh4/NEW%20MyMedia%20Storyboard%20Design%20%28PSD%29.zip?dl=0 - PSD (160Mb)
XFINITY-Fonts.zip - Fonts need use on your prototype
UI Prototype Pages Requirements
1. For You
screenshot: 01-For-You.png
- This Landing Page of MyMedia application, this page should lists of all albums and recent uploads.
- Page layout divided by:
Header
- Xfinity Cloud logo placed in the left side
- Search input placed in the right, default text show by default. When user focus on input, text hidden. User can start enter via click the search button and press enter via keyboard
- Use this search design in your submission (02-Search-files-folder-01-typing-keyword.png)
- Match input width
- There’s arrow in the right side to show up filter option
- Make sure datepicker works. Create style that will follow application theme.
- No need autocomplete like current design, just show the keyword.
- Put dead link for Apply Filters button
- Add New button will load flyout to Create Album, File Upload and Folder Upload. (screenshot: Non-Screen/01-Add-New.png)
- Click outside the flyout should hide the flyout
- Account Name button placed next to it
- Click arrow in the right side will show Account flyout (screenshot: Non-Screen/07A-Account-Notifications.png)
- There’s 2 tabs inside the flyout: Notification and Setting
- Match active and inactive state for tabs
- Setting tab, match toggle options and checkboxes style
- Apply filter can be dead link for now
- Notification tab, match content for each row. (screenshot: Non-Screen/07B-Account-Settings.png)
- View More can be dead link
- Logout button placed in the right side.
Navigation
- Main navigation for this applications are:
-- For You
-- Albums
-- Favorites
-- Purchases
-- Trash
- Match active and inactive state for main navigation
Footer
- This area need always display in the bottom of browser screen
- Copyright information placed in the left side
- Help, Terms of Services and Privacy Policy placed in the right side. Put dead link for them
For You Content Area
- All, Albums, Photos and Videos will works as filter based on type thumbnails. Need this function works.
- Show some variations content based on required type in your submission
- Match active and inactive state.
- Grid View and Sort display in the right side.
- Click layout view need show the flyout (screenshot: 03-layout-view.png)
- Select some options need update the View icon
- Click Sort By need show the flyout (screenshot: 05-Sort-by.png)
- User can change the selected Sort By. Show how it works
- Only one flyout can show at a time.
- For You content area divided by “Recents Uploads” and “Recents Shared” (Update the title on your prototype)
- When user hover on each thumbnails there’s favorite and information button
- When hover, show transparent overlay above the thumbnail
- There’s video information placed in the bottom right side of video type.
- Show toggle function for heart button.
- Like for yellow color and unlike for gray color
- Sort by and filter option display next to it.
- Follow thumbnails format with 6 columns and 2 rows for
- Thumbnails need auto move up on wider browser screen
- More button show up in the last thumbnail, button can be dead link
- When user click on thumbnails, there will be modal windows that allow user to see full size of thumbnails (08-Gallery-view-01=defaults.png)
- Filename type placed in the left side
- Main action buttons in center of modal windows
- Information and X button in the right side
- Click Left and right arrow need able to navigate full size images
- Click Share button (Cloud Icon) should load another modal (screenshot: 08-Gallery-view-02-share.png)
- Match Share modal window
- “X” button should close the modal windows
2. Albums
- Click Albums menu will take to this page (screenshot: 02-00-Albums-00-No-Albums.png)
- Notice there’s breadcrumb on left top of page.
- In the right side, user can see numbers of videos and photos
- Also some options for Albums page, make sure all flyout works.
- Click layout view need show the flyout (screenshot: 03-layout-view.png)
- Click Sort By need show the flyout (screenshot: 05-Sort-by.png)
- Click Filter need show the flyout (screenshot: 03-Filters-by.png)
- Click Options need show the flyout (screenshot: 04-Options.png)
- No Album message and buttons must always use center alignment
- Click Create Album button will take to filled Albums page (screenshot: 02-00-Albums-Defaults-grid.png)
- Create Album button displayed as 1st thumbnail
- Notice Album type thumbnail have folder background behind the thumbnail
- User can drill down the Album by click on each thumbnails
- This is Album Detail page look (screenshot: 02-01-Albums-Content-01-Defaults-grid.png)
- Click Create Album button take to this page (02-01-Albums-Content-00-No-files.png)
- Make sure page support drag & drop files to this area
- Match breadcrumb when load detail page
- on Layout view when click Dynamic Grid layout, show how thumbnails arrange into brick style (screenshot: 02-01-Albums-Content-02-Brick-styles.png)
- Dynamic grid layout will be like this site (http://vnjs.net/www/project/freewall/) Feel free suggest better plugin
- Make sure video information still displayed in bottom right on dynamic grid layout
3. Favorites
screenshot: 04-Favorites.png
- Match view icons in the right side
- All, Albums, Photos and Videos will works as filter based on type thumbnails. Need this function works.
- Show some variations content based on required type in your submission
- Make sure all functions works for any element on this page
4. Trash
screenshot: 05-Trash-deleted-items-02-items-trash.png
- This is Trash page, match view icons in the right side
- All, Albums, Photos and Videos will works as filter based on type thumbnails. Need this function works.
- On hover for each thumbnails need show icon delete and restore button (screenshot: 06-Trash-Hover.png)
- Show function after click those buttons
- Create another empty trash look (screenshot: 05-Trash-deleted-items-01-Clean-trash.png)
- Empty trash page can be stand alone page
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.
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)
- 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
- We’re allowed limited JQuery or JQuery plugins. We want to make sure the overhead of all the JS libraries is very, very small, so please make sure that all JS libraries used are approved in the forum.
Browsers Requirements
- IE9
- IE10
- Safari latest version
- Firefox latest version
- Chrome latest version
- Safari Browsers on iPad
- Safari Browsers on iPhone