Challenge Overview
Welcome to GE - Power GEnius UI Prototype Challenge
The primary task of this project is to create the GE - Power GEnius UI Prototype based on the provided PSD Storyboard design. For this challenge, you just need to focus on Desktop layout with a responsive solution.
Additional Challenge Rules:
- Please refer to the attached Official Rules applicable to this challenge Link
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced of the Website, these Official Rules govern.
- 1st and 2nd Place winner from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.
Good luck and we’re looking forward to your submissions!
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 for DESKTOP screen
- Provided storyboard for Desktop version using widescreen display (1280px width).
- Set minimum 1280px width for Desktop version
- Embed GE Sans Fonts in your submission.
- Use JSON to load all required data.
- The base of prototype framework needs using Lightning Design System. Grab source files from Github link: https://github.com/salesforce-ux/design-system
- 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). Account List
screenshot: 01-01_Account List.png
- This screen is default page when user loads the application
- Header and Sub-Header bar need use fixed placement
- Use fluid width for Header and Sub-Header bar
- In the header bar put breadcrumb on the left side.
- Link with an arrow is clickable. Salesforce can be dead link
- Link without the arrow is not clickable.
- In the right side of the header bar, there's Search button. By default use transparent color.
- Click on the search button, you need show white color for the search icon. Also, you need to show a text input with Search text placeholder (screenshot: 10-01_Search.png)
- On user focus need hide the text placeholder.
- Create an autocomplete fly-out when user typing. Match flyout styling with rounded and shadow effect via CSS stylesheet. (screenshot: 10-02_Search.png)
- Found result message placed on top of fly-out
- Then, divide search result by Contacts and Accounts
- Show more result placed at the bottom of Search Result and can be dead link
- Click outside, need hides the fly-out
- For sub-header bar, There's "All Accounts." dropdown placed on the left side.
- Sort drop-down and Filter button on the right side.
- Click drop-down need show options values. Re-use styling from another screen (screenshot: 02-02_Account Detail_Export Option.png)
- Create some sample options for drop-down
- Change the options need capture the selected option
- Put dead link for the Filter button
- Use three columns layout for the Account List content
- Each box need use consistent width, height, and padding/margin.
- Each box consists of header, body and, footer
- On box header, you need display character icon with rounded corner shape then the title and NPS information on the right side
- Match the content differences of each box based on storyboard look
- Show icons for address and telephone
- Company Code and Last contract display below it
- Show Detail button need to be centered and take user to "2). Account Detail - General" page (screenshot: 01-02_Account List_Select.png)
2). Account Detail - General
screenshot: 02-01_Account Detail.png
- This screen is Account Detail page. User landed here after clicking the Show Detail page from Account List page
- On the header bar, match the breadcrumb content
- Link with an arrow is clickable. Salesforce can be dead link
- Account List need takes to Account List page
- Search button needs to use the same function
- Subheader bar, you need to show a company logo on the left side.
- Logo can be image based, but the text needs to be editable
- Show Net Promotor Score, Total Orders, Edit, and Export button on the right side
- Put dead link for Edit button
- Export button need show the flyout (screenshot: 02-02_Account Detail_Export Option.png)
- Put dead link all Export link options.
- Below the Sub-Header bar, you need to add new Navigation bar
- Match active and an inactive state for menu navigation.
- Notice there's number indicator for News and Chatter Feed
- The main content area needs to build as two columns layout, read more details below.
- Each box need show section title
Pipeline Forecast
- Display Total and OP Plan information on the right side of box title
- Create Bar Chart for this box
- Match X-Axis and Y-Axis labels
- You also need to create legends on the right side of chart
- Show different color for bar chart
- There's line connection between bar chart
Booked Orders
- Display Total and OP Plan information on the right side of box title
- Use same chart function with different content like storyboard look
Divisions
- This box need show table layout
- Show alternating row for the table
- Status need use colored title, please match storyboard look
- Match table content
Chatter Feed
- View All link placed on the right side. Put dead link for now
- Post option shows up by default. Other option can be a dead link.
- Match styling for active and inactive state
- 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
Strategy & Objectives
- Important: We need to show 10ish items instead of 6. The entire model should just get taller and push the content below down.
- This box displays Customer and GE sections
- There are a title and latest date updates.
- Add New button placed on the right side of each section. (screenshot: 02-05_Account Detail_Add Objective.png)
- Delete and Edit button can be dead link
- Click Add New button need show the modal window (screenshot: 02-06_Account Detail_Add Objective.png)
- Overlay Background need covered the whole screen are
- Text input need show text placeholder
- Cancel and Save buttons need to hide the modal
Customer Meetings
- Important: We need show delete and edit icons in the right side, like what is seen in Strategy & Objectives.
- This box need use two columns format with Account Executive
- View all placed on the right of title and can be dead link
- Customer Meetings displays as separated row
- Meeting title can be dead link
- Match information for each row
Account Executive
- Show Account Executive thumbnail
- Show icon for Email and Phone information
- Email link can use dead link
- View more need toggle the additional information (screenshot: 02-03_Account Detail_Account Ex Info.png)
- Match content when expanded.
- When expanded, content remains in place. Content need shows up above the News Feed box.
- View More updated into View Less text.
- Click the button need collapse the additional information (screenshot: 02-04_Account Detail_Account Ex Info.png)
News Feed
- View All button placed on the right side and can be dead link
- Search and Sort by dropdown. Put dead links for now
- Match News Feed information with image thumbnail and user comments
- All links can be dead links
- Write a comment on the bottom no need function
3). Account Detail - Customer Meetings
screenshot: 03_Customer Meetings.png
- Customer Meetings page show table layout
- Sort By drop-down placed on the right side
- Sort By button can be dead link
- Use alternative row for the table
- Blue colored links can be dead links
- Match table content like storyboard look.
4). Account Detail - Case & Issues
screenshot: 04-01_Cases and Issues.png
- This page displayed two separated boxes with fluid width for Issues and Cases
- Add New can be dead link
- Sort By drop-down need show the flyout (screenshot: 04-02_Cases and Issues_Sort Option.png)
- Change to another option needs to capture the selected value.
- No need function to update the table
- There's color shape on the left side of each table
- Match different color for Status column
- On the last column of each row, put dead links for the buttons
- Blue colored links can be dead links
- Match content for both Issues and Cases table
5). Account Detail - Initiatives
screenshot: 05_Initiatives.png
- Initiatives need use same table layout
- You can re-use Sort By drop-down function
- Add new button can be dead link
- Match different color for Status column
- Blue colored links can be dead links
- On the last column of each row, put dead links for the buttons
- Match table content like storyboard look
6). Account Detail - Contracts
screenshot: 06_Contracts.png
- Contracts page need uses same table layout
- You can re-use Sort By drop-down function
- Add new button can be dead link
- Match different color for Status column
- Blue colored links can be dead links
- On the last column of each row, put dead links for the buttons
- Match table content like storyboard look
7). Account Detail - Team Members
screenshot: 07-01_Team Members.png
- There's new white colored bar below the main navigation
- You can re-use Sort By drop-down function
- Filter button need show up the flyout (screenshot: 07-02_Team Members_Filter.png)
- flyout divided by Filter By and Filter order.
- Click the options need show up the checkmark icon
- Match color for selected values
- Team Members page need use four columns layout
- Match different thumbnail and information like storyboard look
- Edit, View More, and Chat can be dead links
8). Account Detail - Contact
screenshot: 08-01_Contacts.png
- Contact page displayed as organization tree chart
- Below the main navigation, there’s white bar contains of Option view buttons
- Tree View need open by default, Click List View need table layout
- Search member need display text placeholder
- Click Filter button need show up the flyout (screenshot: 08-06_Contacts_Select.png)
- No need update the content below after change the selection
- Create Autocomplete function when user type on the input (screenshot: 08-07_Contacts_Select.png)
Tree View
- For each node, you need display Name, Job Position and Division Name (screenshot: 08-02_Contacts_Select.png)
- There’s favorite icon. Create toggle function when click the button.
- Click each node, need show details view of Contact (screenshot: 08-03_Contacts_Select.png)
- There are email and phone information
- View More and Chat can be dead links
- Only need one node expanded at a time.
- Make sure the expanded node show on top of another node
- Below some node, there’s circle with number. Click this need expand the nodes (screenshot: 08-04_Contacts_Select.png)
List View
(screenshot: 08-05_Contacts_Select.png)
- This is List View Look with table layout
- Match table content and layout
- Favorite button need use toggle function
- Load more need load more rows
9). Account Detail - Installed Base
screenshot: 09-01_Installed Base.png
- This page show 2 boxes with vertical bar chart
- Display dropdown on the top right side
- There’s numbers on top of each bar
- Match X-Axis and Y-Axis labels
- Match correct background with dotted line
- Click each bar need show the tooltip contains of table layout (screenshot: 09-02_Installed Base.png)
10). Account Detail - News and Chatter Feed
screenshot: 10_News and Chatter Feed.png
- You can re-use Chatter and News Feed from General page
- For the active state, number indicator need same placement
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)