Challenge Overview
Welcome to GE Sales Kit Responsive UI Prototype Challenge
The primary task of this project is to create the GE Sales Kit Responsive UI Prototype based on the provided PSD Storyboard design. For this challenge, you need create prototype submission to support responsive on Desktop, Tablet, and Mobile layout by using Bootstrap as base Framework
Good luck and we’re looking forward to your submissions!
SUBMISSION DEADLINE: Monday, 12/21 9AM EST
Final Submission Guidelines
Downloadable Files:
Storyboard.zip - Use this storyboard design
GE-Fonts-All.zip - Font for your prototype
Important!
- For this UI Prototype submission we need your submission support responsive solution that works on any screen size (e.g. smart phone, tablet, desktop)
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Provided storyboard for Desktop version using widescreen display (1280px width)
- You can set minimum (1280px width)
- Provided storyboard for Mobile version using iPhone 5 Retina Portrait display (640px width).
- Make sure your submission support Standard layout with 320px width screen size using best practices of Responsive Web solution.
- All pages need use fluid layout when transform into Landscape or Portrait view.
- For Tablet version, you can use Mobile layout with fluid width
- Embed GE Sans Fonts in your submission.
- Use JSON to load all required data.
- The base of prototype framework needs using Boostrap.
- But you can use other Javascript Library like jQuery.
- On Final Fixes phase, for the winner there will be task to fix consistency function.
UI Prototype Page Requirements
1). Dashboard
DESKTOP VERSION
screenshot: desktop/2.0.Collapsed.png
- This screen is Dashboard screen look and feel
- Chatter need collapsed by default. Click the Chatter button need to expand the Chatter. Read more details information below
- Header bar needs use fluid width
- GE logo placed on top left of header bar
- In the right side, there’s notification button, put number indicator. Make sure number indicator expand when filled with more characters
- Search input shows text placeholder. On user focus need hides the text
- Username shows an arrow on the right side. Put dead link for now
- Help button take user to separated page explained below
- Main Navigations displayed numbers of menus
- On the right side, there’s + menu.
- You can put dead links for all menus
- Match active and inactive color for menu navigation
- Header and Main navigation bar need use fixed placement
- Boxes on Main content area need use fluid width
- Some boxes with drag button need able to drag and drop to another place
- Some boxes with “x” button need able to delete it from the main content area
- Main content area divided these following sections.
Account Information
- This area display date, username and blue button
- Put dead link for the button
Account Progress
- This box not draggable
- Account progress displays as 3 column format
- Match typography like storyboard look
- There’s up/down arrow
- Show animation on page load for progress to goal
Pending Actions
- Row title is clickable, put dead link for now
- In the right side, there are different actions to Yes/No buttons and Set Priority drop-down
- They can be dead links
Past Opportunities
- On the right side of Past Opportunities title, there's quick information for number and total Amount
- Box content displayed as table layout format
- No need to build the sort the table function
- Match table header coloring
- Opportunity Name can be dead link
- Result column, notice Lost text need use red color
- Show More need load and expand another sample rows
Opportunity
- On the right side of Opportunities title, there's donut chart Opportunity Status
- Also, you need show number of Won on center of the Donut chart
- Place the legends and information on the right side of the Donut chart
- Filter drop-downs displayed below the title
- Match drop-downs styling. Put dummy content for now
- Opportunity Name can be dead link
- When user clicks the Amount cell, you need to build the inline editable function (screenshot: desktop/2.1.Inline-Editing.png)
- Show blue background on editable cell
- There's "Esc to Cancel" message placed on top of the cell.
- On Some rows, there's red marker on top left of table row
- Click Esc button on keyboard need cancel and show default Amount
- Click Enter button need capture the saved data
- Stage column is drop-down
- Close Date column is date-picker input.
- Follow calendar styling like Calendar box at the bottom.
- Build standard date-picker selection
- Type column is drop-down
- Show More need load and expand another sample rows
Account
- Need display this box with equal width like My Lead
- There's drop-down next to the Account title
- Match table information
- Email column needs open related email link
- Show More need load and expand another sample rows
My Lead
- Need display this box with equal width like Account
- There's drop-down next to the My Lead title
- Match table information
- Status column is drop-down menu
- Email column needs open related email link
- Show More need load and expand another sample rows
Calendar
- You can set fixed width for the calendar
- Dropdown, no need create function for another view
- User needs able to change the Month and Years drop-down
- On Calendar, there's dot below the date
- Also, there's dot range for multiple days. Possible to build?
- Match styling for Day title, previous and next month dates.
- Current date indicated by blue rounded corner shape
- Hover on date with dots, need show the tooltips (screenshot: desktop/2.2.Tooltip.png )
- Put dead links for Details and Directions
Contact
- On the right side of Contact title, there's drop-down. No need to build the function
- Show table layout for Contact list
- Email column needs open related email link
- Show More need load and expand another sample rows
Footer
- Copyright placed on bottom left
- On the right side, there’s Footer menu links
- Put dead links for them all
Chatter
screenshot: desktop/1.Dashboard-Expanded.png
- When Chatter expanded, you need show different pointed arrow
- Chatter background needs covered browser height
- Post option shows up by default. Other option can be a dead link.
- There are text input and Share button below the Post option
- Show text placeholder for the text input
- Below the input, you see the search and Sort by dropdown. Put dead links for now
- Show list of Chatter Feed with user thumbnails and comments.
- Match structure for Chatter feed.
- There's the toggle button on the right side. Create function to expand and collapse the area below
- Match indentation for comments section
- All links can be dead links
- Write a comment on the bottom no need function
MOBILE VERSION
screenshot: mobile/mobile-Dashboard.png
- For mobile version on header bar, you only need to display GE Logo, title, search button and Menu buttons
- Use a consistent title like Desktop version "GE Sales Kit."
- For the mobile version, there's no Drag and "X" button. User just needs able to expand/collapse the section by clicking the arrow on the right side of each section
- Please remain use box order like desktop version.
Menu Navigation
screenshot: mobile/mobile-Nav.png
- Click the menu need to show up the sidebar on the right side
- User account placed on top side
- Search input needs use fluid width
- Help button needs use fluid width
- Show all menu navigations in separate lines and use text alignment
- Notice the font typography updated for mobile version
Account Information
- This area is hidden in mobile version
Account Progress
- Account progress remains displays as 3 column format
- Some small text is hidden on mobile version
- Also, some information moved on separated line
Pending Actions
- X Button and action title display in the same line
- Yes/No and Dropdown button need move down to separated line
Past Opportunities
- For mobile version displayed Past Opportunities information below the title
- Table only need to display Opportunity Name and Amount
- See more need load another sample rows
Opportunity
- There's Filter button show up next to the title. Put dead link for now
- Donut chart Opportunity Status displayed below the title
- Keep same content like desktop version
- For mobile, you just need display Opportunity Name, Amount, Stage and Close Date
- Stage and Close Date need in separated line
Account
- Dropdown need remains show next to title
- Table layout for mobile need displays each column in separated row
- Put show more button on the bottom of right side
My Lead
- Dropdown need remains show next to title
- Table layout for mobile need displays each column in separated row
- Put show more button on the bottom of right side
Calendar
screenshot: mobile/mobile-calendar.png
- Use same table header like desktop version
- In the bottom of calendar, you need display list of current month events
Contact
- Dropdown need remains show next to title
- Table layout for mobile need displays each column in separated row
- Put show more button on the bottom of right side
Footer
- For mobile version, display copyright on center alignment
- No need show the footer links
Chatter
- Hide Chatter for mobile version
2). Help
DESKTOP VERSION
screenshot: desktop/3.Help.png
- This is Help page look and feel
- Background image below the main navigation need covered browser screen
- Show text placeholder for Search input
- On focus, need hides the text
- Telephone, Email, and Chat button are dead links
- Below the background image, there are clickable boxes of Help Center sections. Put dead links for now
- Help page contains these sections
Quick Links
- This column can use fixed width
- There's icon on each link
- Put dead links for now
Recent Questions
- This column can use fixed width
- Each line need show up Question and Answer
- Read more can be dead links
- See more button need load another sample rows
FAQ
- This column can use fluid width
- You need to build expand/collapse function by clicking the "+/-" buttons
- See more button need load another sample rows
Browse Knowledge
- This column can use fluid width
- Put dead links for now
- See more button need load another sample rows
Documentation
- This column can use fluid width
- Display links with two column layout
- Put dead links for now
MOBILE VERSION
screenshot: mobile/mobile-Help.png
- For mobile version, background needs adapting the browser screen
- Clickable boxes below the search input need use two columns format
- You can use same order for mobile version
- All boxes need to be covered browser width and use stacked layout
Quick Links
- No different with desktop version
Recent Questions
- Need hide this for mobile version
FAQ
- This box content need use fluid width
Browse Knowledge
- This box content need use fluid width
Documentation
- This box content need use fluid width
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 consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give the 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 on the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build the 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 to 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.
- You are encouraged to use your scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere on 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.
Browsers Requirements
- IE11
- Latest Chrome Browser (Windows & Mac)
- Latest Firefox Browser (Windows & Mac)
- Latest Safari Browser (Windows & Mac)