Challenge Overview
Welcome to SFDC - White Wizard Digital Sales AID Responsive UI Prototype Challenge
The main task of this project is to create the SFDC - White Wizard Digital Sales AID UI Prototype based on the provided PSD Storyboard design by re-use existing best practices look and feel also the functions from this website page (http://sfdc-styleguide.herokuapp.com/).
Before you start prototyping, explore what library/framework/stylesheet that can re-use from that site references.
This UI Prototype will use Responsive Design solution that will works within Tablet and Mobile Platform. You must use CSS Media Query so prototype can use different layouts when viewed on tablet and mobile.
Read more details for UI Prototype Requirements and Flow below.
Final Submission Guidelines
CODE REQUIREMENTS:
IMPORTANT
- For this prototype you need follow existing best practices look and feel also the functions from this website page (http://sfdc-styleguide.herokuapp.com/).
- Before you start prototyping, explore what library/framework/stylesheet that can re-use from that site references. Let us know if have some things need clarify based on sfdc style guide.
- You MUST use CSS media query for tablet and phone layout
- If possible we need all pages on this prototype linked each other. You can view attached TW-APP-Flow-Proto.pdf for application flow. Let us know if you need clarification about the flow.
- Use existing font family > Proxima Nova Soft
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.
- You’re encouraged to use HAML to make the HTML code clean, and provide source files on your submission.
- Each of the HTML pages need adapted both difference of tablet and phone layout.
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.
- You’re encouraged to use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
- You MUST use CSS media query for tablet and phone
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.
- You need make sure all images support Retina display
JAVASCRIPT
- As site reference above we encourage you use the latest technology javascript library and framework of Jquery and Angular.JS
PAGE REQUIREMENTS:
1. Navigation
screenshot: 00_Navigation_tablet.png
- User access navigation by click top menu button
- Use slide function
- All content need shift smoothly, make sure there’s no broken layout
- User Profile picture need wrapped by css border
- Put dead link for User profile pic
- Arrow button will hide the navigation
- Search Salesforce input placed below user profile
- Default value will hide once user start typing
- Show some menu below search input
- Each menu are draggable
Mobile View
screenshot: 00_Navigation_mobile.png
- There’s no difference on navigation layout
- You need make sure page width fluid on layout
2. Dashboard
screenshot: 01-1_Dashboard_tablet.png
- This is dashboard look
- on Header, there’s button to access navigation, page title and alert indicator on the right side
- Alert indicator, make sure rounded graphic expand when filled with more than 1 digit number
- Application logo on top left with some quick information
- On content area, there’s 3 big menu to let user access each details page
- All area of those menu will be clickable and linked to pages explained below
- You need create separate page that will show more than 3 menus. (screenshot: 01-2_Dashboard_tablet.png)
- Notice the buttons smaller, with pagination below them.
- Make sure swipe and clicked the dotted works to navigation all menus
Mobile View
screenshot: 01-1_Dashboard_mobile.png
- On Mobile look header remain same
- Application logo displayed centered
- Quick information hidden
- Big menu display stacked
- Match menu layout with icon on left and information in the right side
screenshot: 01-2_Dashboard_mobile.png
- This is how more than 3 menus look
- Dotted pagination placed on top
- Still need ability to swipe the pagination
3. Categories
Column View
screenshot: 02-1_Categories_tablet.png
- This page shows up after user click the Categories on Dashboard page
- Column view shows up by default.
- Page icon and information appear in the top area
- Below the page information, there’s small bar contains of “Search”, “Sort By Name” and “Column View” option
- Click Search button will take to separate page. More info below
- Click the Sort By Name options need affect the browser area below (screenshot: 02-3_Categories_tablet.png)
- There’s checkmark for selected menu. Show us how toggle works
- Column View, click one of options will update the layout (screenshot: 02-4_Categories_tablet.png)
- List view and Grid view will update the layout
- View option will open the folder in next column
- Rename will let use edit the folder name in page
- Put dead link as an example for Share via option
- Breadcrumb show up on top of content area
- Page divided by 3 columns contains of file list
- Each column, need scrollable if fill with more than column height. Re-use browser based scrollbar
- You need simulate when click 1st column then show content of the folder in the 2nd column, and so on. Re-use sample like show in storyboard
- When user hold tap on some folder, need show additional menu (screenshot: 02-2_Categories_tablet.png)
- Each additional menu are clickable
- Menu will close after user click outside area
- For each .doc, .mp4, .jpg, .png .pdf files format, they need to be linked to separate pages, read detailed instruction below
List View
screenshot: 02-6_Categories_tablet.png
- This is List view format after user change view option
- Breadcrumb displayed on top
- There’s button to go up a folder level in top left before “File Name” title
- Folder type have arrow button to access another content i
- Show us how access folder works
- Match table content like storyboard
Grid View
screenshot: 02-7_Categories_tablet.png
- This is Grid view format after user change view option
- Use a 11 column format for layout
- There’s button to go up the folder in top left before the breadcrumbs
- Show us how the access folder works
- User need scroll the grid view area
- Make sure layout not break when filename show more than 1 line
Mobile View
screenshot: 02a-1_All Categories View_mobile.png
- Notice the quick information hidden
- Only displayed the icon on view options on top bar, you can hide the text like on tablet vers
- Option bar only displays search, grid view and list view icons
- Notice that the title is hidden
- On mobile view user only have Grid and List View option
- Each columns on desktop displayed as separated boxes for mobile version
- Folder need accessed via collapse/expand button
- Single tap on arrow button will expand the folder (screenshot: 02a-2_All Categories View_mobile.png)
- Double tap on blue arrow will take user to folder detail screen (screenshot: 02a-3_All Categories View_mobile.png)
- Single tap on grey arrow will get user to folder detail screen (screenshot: 02a-4_All Categories View_mobile.png)
- Tap and hold will show the option modal (screenshot: 02a-5_All Categories View_mobile.png)
- Here’ the modal option (screenshot: 02a-6_All Categories View_mobile.png)
- Click option and outside modal will hide the modal
- Click the folder to access details folder (screenshot: 02b-1_Category Detailed View_mobile.png)
- There’s up button to access previous folder
- This is how grid view look on mobile (screenshot: 02b-2_Category Detailed View_mobile.png)
4. Search
screenshot: 02-5_Categories_tablet.png
- This is how the Search page looks
- Back button will take user back to previous page
- Filter area in the left side
- Show different state for checked and unchecked checkboxes
- Checked on All Filter need checked on all options
- If there’s one option not checked, All Files option will checked off
- Search Result area is displayed in the right side
- Use a 9 column format
- Search input placed on top
- Need ability to clear the search result
- Search result page divided by Image Image, Video, and other format
- Show us how scrolling functions
- Image need wrapped by css border properties
- Match the grid format for layout
- Make sure layout not break when filename show more than 1 line
Mobile View
screenshot: 02a-7_Search_All Categories View_mobile.png
- Default look on Mobile Search page
- Search Result look on mobile (screenshot: 02a-8_Search_All Categories View_mobile.png)
- Search result displayed as list format
- Filter on top need filter content by selected option
- Page divided by search result type
- Click folder need expand area like this (screenshot: 02a-2_All Categories View_mobile.png)
5. Product
Column View
screenshot: 03-1_Product_tablet.png
- Basically this use same layout like previous Categories Column View
- Match content based on storyboard
List View
screenshot: 03-2_Product_tablet.png
- Basically this use same layout like previous Categories List View
- Match content based on storyboard
Grid View
screenshot: 03-3_Product_tablet.png
- Basically this use same layout like previous Categories Grid View
- Match content based on storyboard
Mobile View
screenshot: 03b-1_Product Detailed View_mobile.png, 03b-2_Product Detailed View_mobile.png and 03a_All Product View_mobile.png
- This is how Product page on mobile version
- Re-use completed mobile layout and function on categories page
6. Media
- This Media page, on the option you only need show the Grid View and List View options
- Notice there's no breadcrumb abnd go up button
List View
screenshot: 04-1_Media_tablet.png
- Basically this use same layout like previous Categories List View
- Match content based on storyboard
Grid View
screenshot: 04-2_Media_tablet.png
- Basically this use same layout like previous Categories Grid View
- Match content based on storyboard
Mobile View
screenshot: 04-1_All Media View_mobile.png
- Table list on mobile version look
- Replace category line with existing desktop content (“Type”, “Date Created” and “Size”)
- This is grid view look on mobile version (screenshot: 04-2_All Media View_mobile.png)
7. Details Screen (.doc format)
Double View
screenshot: 05a-1_Details Screen_Doc_tablet.png
- Page load by show Double View option
- This page show up after click .doc file format
- You need simulate by load external .doc file for this file type
- Back button will take to previous page
- Title of document on center
- Share button button in the right to allow user to share the page. Put dead link for now
- Breadcrumb placed below header
- View options placed in the right side, Single and Double View load different layout on .doc file type
- Click the last menu will show the vertical page browser (screenshot: 05d-2_Details Screen_Pdf_tablet.png)
- Click related page will slide user to related page
- See the content divided into 2 column layout
- Page numbering placed in the bottom
Single View
screenshot: 05a-2_Details Screen_Doc_tablet.png
- This is the single view look
- User can scrolling the content
- Page number floating in the bottom left, need reflect doc page being opened
- Notice the font size increased in this single view, how the actual .doc look?
Mobile View
screenshot: 05a_Details Screen_Doc_mobile.png
- on Mobile version user will just see the single view
- back button will take user to previous page
- options bar is hidden on mobile version
- User need scrolling content to the bottom
- Make sure document fill the fluid layout
8. Details Screen (.mp4 format)
screenshot: 05b_Details Screen_Video_tablet.png
- This page show up after click .mp4 file format
- Back button will take to previous page
- Title of document on center
- Share button button in the right to allow user to share the page. Put dead link for now
- Video sections placed in the left side
- Simulate by linked external video to load this video
- Any suggestion of video player that can be use for this prototype? Can youtube player use to load internal video?
- Video information in the bottom
- Like and dislike button need toggle option, show different color after click both button
- In the right side, user see file in this folder
- Click each file will update the video content. Simulate by show different content
- User can scrolling the file browser area
- How video full screen look?
Mobile View
screenshot: 05b_Details Screen_Video_mobile.png
- Video area placed on top area
- Video like and dislike below the page
- File in the folder placed in the bottom
- User can scrolling the content from left to right
- Click the video need load the video on top
9. Details Screen (image format)
screenshot: 05c-1_Details Screen_Image_tablet.png
- This page show up after click .jpg, .png file format
- Back button will take to previous page
- Title of document on center
- Share button button in the right to allow user to share the page. Put dead link for now
- Breadcrumb button placed below header
- Like and dislike button need toggle option, show different color after click both button
- Simulate by linked external image to load image
- Image show up as full view format
- Click the right menu will show the floating image gallery (screenshot: 05c-2_Details Screen_Image_tablet.png)
- Each image will load full size image
- Simulate by show different image
- image gallery need scrolling vertically
Mobile View
screenshot: 05c_Details Screen_Image_mobile.png
- on Mobile version user see slideshow format
- Make sure the transition look good
- like and dislike button placed in the bottom
10. Details Screen (.pdf format)
screenshot: 05d-1_Details Screen_Pdf_tablet.png
- This page basically use same layout and function like “Details Screen (.doc format)”
- You need simulate page by load external pdf file
- Show how Single View and Double view works
- Click the last menu will show the vertical page browser (screenshot: 05d-2_Details Screen_Pdf_tablet.png)
- Click related page will slide user to related page
Mobile View
screenshot: 05d_Details Screen_PDF_mobile.png
- on Mobile version user just see the single view
- back button will take user to previous page
- options bar hidden on mobile version
- User need scrolling content to the bottom
- There’s page numbering indicator in the bottom of 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.
- Documentation of your prototype
The following pages are required in your submission on tablet and phone by using Responsive Design solution
1. Navigation
2. Dashboard
3. Categories
4. Search
5. Product
6. Media
7. Details Screen (.doc format)
8. Details Screen (.mp4 format)
9. Details Screen (image format)
10. Details Screen (.pdf format)
HTML/CSS Requirements:
You're encouraged to use and take advantage of 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 Browser Requirements section.
Browsers Requirements
- Firefox, Safari & Chrome Tablet Browsers
- Firefox, Safari & Chrome Mobile Browsers
Documentation Provided
Storyboard.zip - Storyboard Design
TW-APP-Flow-Proto.pdf - Application Flow