Challenge Overview
Welcome to GE Water and Process Technologies Responsive UI Prototype Challenge (Mobile)! The goal of this challenge is to update the provided responsive prototype with the Mobile views and the listed iPad/Desktop view updates. We are focused on finalizing and completing the prototype.
NOTE: This application is using Bootstrap as it is part of GE's preferred frameworks (http://getbootstrap.com/getting-started).
NOTE: It is important that you continue to use the base code that is provided. Developers have already started working with the code so we want to keep things consistant/not change the existing prototype architecture.
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. As this challenge is a FAST challenge we will allow documentation updates during final fixes if needed.
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.
Final Submission Guidelines
Challenge Task Overview:
The main task of this competition is to develop and complete the Responsive HTML5 prototype based on the provided storyboard designs. It is very important that you implement and use Bootstrap correctly so we can update the mobile views in a future challenge. We are focused on completing the Mobile screens and the tablet Portrait views.
Tips for Success: Ask questions early and get the Copilot or PM's feedback is very important for everyone to be successful in UI Prototype challenges.
NOTE: Please be aware of the browser requirements
NOTE:
iPad Portrait View:
- Below 1024px the screen needs to switch to portrait view
- Menu will need to be accommodated within a hamburger icon like mobile view (follow mobile view)
- We do not want a left/navigation scrollbar
Fonts:
- Use the Prototype GE Font (not the PSD font)
- Adjust the font according to the design
Required Pages:
We are looking to update the prototype that was created in the previous challenge with Mobile and Tablet (Portrait) views
PSD/Screen Files
- GE_iPhone_Update = Latest Mobile designs
- GE_Account Updates = Desktop/Tablet Profile/Contact Updates
- Original = Files from the first prototype - reference if needed
~
01. Home/Login
- Update this with the high resolution/non-watermarked image
02. Dashboard Fixes/Updates
- Portrait view needs to be fixed, follow mobile view! See (Fix-Portrait-Navigation.png) - we need this fixed
- Mobile view for dashboard screen has already been created but there are few things that is missing in the prototype and we would like you to incorporate them.
Sub-Menus:
Dashboard > Notification > Sub-Menu (02-1B_Dashboard_Sub Menu.png):
- In the dashboard > notifications, we have sub-menu for shipment (orange text), clicking on “down arrow” shows a sub-menu as shown in (02-1B_Dashboard_Sub Menu.png), clicking on “Orders” should show “02-2_Dashboard_Orders.png” and clicking on “open invoices” can be a placeholder link
Dashboard > News > Sub-Menu:
- In the mobile view, submenu is missing and we need one similar to notifications tab and when the user clicks on this sub-menu, it shows options as “GE Power and Water, Products, Industry and Trends”..
- ”GE Power and Water” will be selected by default and any other links in this sub-menu will be a placeholder link
Dashboard > Chatter > Sub-Menu:
- In the mobile view, submenu is missing and we need one similar to notifications tab and when the user clicks on this sub-menu, it shows options as “Most Recent, Following and Trends”..
- ”Most Recent” will be selected by default and any other links in this sub-menu will be a placeholder link
Notification (02-6_Dashboard_Notification.png):
In the prototype, desktop version of this can be seen by clicking the notification icon
- Clicking on “notification icon” shown in the top right will display all notifications as shown in (02-6_Dashboard_Notification.png)
- Clicking on any item within the notification or clicking outside the notification window should hide the notifications.
04. My Account:
Order History (Mobile > 04-1_Order History.png):
In the prototype, desktop version of this page can be seen by clicking “My Account > Order History”
- Build the mobile/portrait version of this page as shown in (04-1_Order History.png)
- (04-1_Order History.png) shows the orders, in this view - first order (#523467) is expanded with showing item details and rest of the orders are in collapsed state.
- Clicking on “Show Item Details” within an order - expands to show the items under an order as shown in (04-3_Order History_Full View.png) and change “Show Item details” to “Hide Item details”, clicking on “Hide Item details” should collapse to the normal view like (04-1_Order History.png)
- Gear icon in each views on click will show a fly-out as shown in (04-4_Order History_Full View_Option.png) and tapping anywhere or any items should hide them! (Options within this flyout are just placeholder links)
Open Invoices (Mobile > 04-5_Open Invoices.png)
In the prototype, desktop version of this page can be seen by clicking “My Account > Open Invoices” or “My Account > Order History and then choose “Open invoices tab”
- Build the mobile/portrait version of this page as shown in (04-5_Open Invoices.png) & (04-6_Open Invoices (collapsed).png)
- By default, all we see invoices in collapsed state as shown in (04-6_Open Invoices (collapsed).png)...use alternate white and grey colors (similar to what we have in order history)
- Once the user clicks on “down arrow” icon, we then see the expanded view of the order as shown in 04-5_Open Invoices.png
Expanded Invoice View:
- In the expanded invoice view (04-5_Open Invoices.png), user will see all orders under and will have the ability to expand/collapse an order with the help of the “+ or -” buttons shown before an order name
- Clicking on “-” will collapse that order and clicking on “+” will expand to show order details
- Within each orders, user will have the ability to scroll through list of items, these will have swipe gesture to see the items within an order!
Icon Layout Fixes
- See Icons.png, Icons2.png, Icons3.png
- Please fix the icon issues (switching to Portrait or Mobile might fix these items)
05. Search (Mobile > 05-2_Search.png):
In the prototype, desktop version of this page can be seen by clicking on “search bar” shown at the top and start typing to see the type ahead search
- In the mobile view, when the user taps on the search icon shown in the right, they see (05-2_Search.png)
- Clicking on “Cancel” should hide this search bar and will show only the search icon.
- As the user starts typing, they see the type ahead search results (similar to desktop view), please create a mobile version of this as shown in (05-3_Search_Auto Type Ahead.png)
- Within the type ahead search results (05-3_Search_Auto Type Ahead.png) when the user clicks “Load More” or the search icon within the keypad shown in Mobile view, they see search results in a new screen (05-4_Search_Result.png).
06. Knowledge Base:
In the prototype, desktop version of this page can be seen by clicking “Knowledge base” from main menu
- Note: Portrait view for this is already done and just need to add a title (Knowledge base) with grey background like the Desktop version.
- Build Mobile views (06-1_Knowledge Base.png) & (06-2_Knowledge Base_result.png)
- Fix: See (radio-fixes.png) - this issue needs to be fixed (if still present)
07. Support:
- Build Mobile view (07_Support.png)
08. Profile Screen:
- Build Mobile views (08-1_Contact Detail.png, 08-2_Contact Detail_Scrolled Down.png)
Additional Profile Fixes
1. Tablet/Desktop Profile Edit (07-1A_Profile_Contact Details.png):
In the prototype, current version can be seen by clicking “Welcome George” shown in the top right corner or by selecting “My account > Contact Info”
- We need this updated, please move “Welcome George” to first line and below that should show company name, beside that add a “down arrow” icon
- Clicking on the “down arrow” icon should show a view as shown in (07-1B_Profile_Contact Details_Select Account.png) Note: We only want to show 3 accounts listed
- The Profile page also needs to show the account name update/switch: (07-1C_Profile_Contact Details_Select Account.png) and (07-1D_Profile_Contact Details_Account Selected.png)
- In the Contact Details page in the prototype, we need to change the first field to have a logo and company name as shown in (07-1A_Profile_Contact Details.png)
2. Edit View (07-1E_Profile_Contact Details_Edit.png)
- We need to capture the "Edit" view of the Profile
09. Notifications
- Build the Mobile view (09_My Notifications.png)
~
Important features of this UI Prototype Challenge
- Making sure Mobile looks and works great!
- Portrait view looks and works great!
- All existing prototype functionally stays intact
- Bootstrap is used properly!
- High quality submissions at our deadline!
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 style-sheet.
- 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 Requirements:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:
- jQuery
- Bootstrap 3
Browsers Requirements:
- Safari Browser on iPad and iPhone
- Chrome Browser (PC and Mac) = this is the main browser we will be using during our demo!
Final Fixes Note: Firefox/Internet Explorer can be left for Final Fixes if needed.
- Firefox (PC and Mac)
- Internet Explorer (Latest version)