GE Oil and Gas SFDC Design Concepts Challenge

Welcome to the GE Oil & Gas Tech Service SFDC Design Concepts Challenge! In this challenge we are looking to update the look and feel of GE Oil and Gas’ Technical Service platform.  The client wants to have a savvy UI for their technical customers to use for support.
 
Additional Challenge Rules:
- Please refer to the attached Official Rules applicable to this challenge
- 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.

Round 1

Submit your design for a Checkpoint feedback:
1. Customer Login
1.1 Forgot Password
1.2 New Registration
2. Home Page
3. Knowledge Base
- A userflow or click-path diagram will help us understand your design thinking and interactions
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Final Design plus Checkpoint feedback:
1. Customer Login
1.1. Forgot Password
1.2. New Registration
2. Home Page
3. Knowledge Base
3.1 Knowledge Base - After Search
4.1 View an Open/Recent Case - Feed Tab
4.2 View an Open/Recent Case - Details tab
5. Create a New Case
- A userflow or click-path diagram will help us understand your design thinking and interactions
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

 

In this challenge we’re looking to you to create a customized experience for desktop and mobile with the Salesforce platform (SFDC) based on their user’s needs and the GE branding.  There are two user personas using this platform: the Customer Technical Support Agent and the Application End User (Oil and Gas Engineer). This is a platform that is available to customers of GE where they can find information and submit tickets.
 
We are looking for the [topcoder] design Community to help us with planning our new user experience (UX).

Branding Guidelines:
- Please refer to the branding guidelines document (attached) for the look and feel. This is a mobile design document but use for ideas on how to incoorporate the GE style.
 

Design Considerations:
- Consistency across the sections is very important
- Need a very clean look, professional and slick.
- Please keep responsive design in mind - even though this is primarily desktop-facing, we need to consider potential future directions
- While thinking of future directions, make sure your designs are extensible, so as new areas of content and functionality are integrated in future phases, your design will not need to be significantly changed to do so, including layout, navigation and interaction model
- Overall you’re taking the existing designs/screenshots and exploring/experimenting what this platform could look like if you have your way.
- How would you expect to walk through these steps? Where would you expect action items/buttons to be? What would make it easier for you to use?
- Answering these questions and incorporating the GE branding is what we’re looking for and what will help make this a successful and easy to use tool for GE’s customers.

SFDC Design Resources:
Designing for the Salesforce Platform
http://www.slideshare.net/AaronRich1/designing-for-the-salesforce-platform

Visualforce Reference: (Desktop)
- https://developer.salesforce.com/page/An_Introduction_to_Visualforce  
(This is a developer-focused site, but has UI guidelines...please also go through the attached blogging examples)

What is Salesforce Chatter?
Chatter is the enterprise social network that allows teams to take action and sync up like never before. See how much more you can get done when you can create custom actions and deploy instantly to every desktop and device, and access any app from the social feed.
To learn more: https://www.salesforce.com/ca/chatter/overview/

IMPORTANT!! Design Guidelines:

Screen Sizes:
- Desktop: 1024px width and height as required. (Remember to think for the future - this will eventually be responsive so design accordingly)
 
Supporting Documents: (attached)
- Current Layout Screenshots (Current Layout Screenshots.zip).
- Branding Guidelines (Branding Guidelines.docx) 
 
Current Design Screens:
- Please refer to Current Layout Screenshots.zip (attached)
- These represent the current default template for SFDC that the client currently uses
- Look to these for reference on basic layout, UI elements and functionality

Required Screens:
1. Customer Login
(1-Login.png)
-  “Forgot Password?” goes to 1.1. Customer Forgot Password
- “Not a member?” link goes to 1.2 Customer Login: New Registration

1.1 Customer Forgot Password
(2-ForgotPassword.png)

1.2 Customer Login: New Registration
(3-NewRegistration.png)
- An alternate screen showing basic error states in line with SFDC standards and the GE Style Guide would be helpful

2. Home Page
(4-HomePage.png)
- The user’s Home Page should have the following functionality:
    -- Report a case/incident (“Create New Case”) which goes to 8-New Case.png
    -- View my cases/incidents, my company’s incidents, which goes to 6-Case-FeedTab.png  
    -- Ability to search the knowledge base for documentation, root cause solutions, FAQs, etc. (Knowledge tab on current screen - 5-KnowledgeBase.png)
    -- Call your GE Technical Support Center 
    -- Live Agent Chat
    -- “What’s New in this release?”
    -- News and Highlights
    -- Chatter feed

3. Knowledge Base - Pre Search
(5-KnowledgeBase.png)
- The Knowledge Base screen should give the user easy access via links, searches and other worthwhile means of navigation and information sorting
- Areas of content and functionality are:
-- Product Documentation
-- Technical Documentation
-- Case Root Cause Solution Library
-- FAQs, 
-- Knowledge Article Alerts
-- Recently Updated Articles 
-- Recent Searches
-- Suggest an Article

3.1 Knowledge Base - After Search
- Same info as above just showing what it would look like when a user has searched.
- An example of a successful search and returned results
- An example of a search that returned zero results

4.1. View an Open/Recent Case - Feed Tab
(6-Case-FeedTab.png)
    - The feed tab of the View Case screen should allow the user to take the following actions by using the different links below the Feed tab:
    -- Post a question about the case to a GE Support Agent
    -- Post a question about the case to the customer community
    -- Attach a file or link or poll the community
    -- View related knowledgebase articles
    -- View all updates , emails, etc related to this case.
    -- Follow a Case so they receive updates on their Customer Home Page
    -- Filter the types of updates they are viewing through their Case Feed    

 4.2. View an Open/Recent Case - Details Tab
(7-Case-DetailsTab.png)
- This tab should focus on clear presentation of the data related to the Case
- Here we want minimal change to make it match GE branding
- However, if you have a good idea on how the information could be clearer or more read/understand, we’d like to see your solutions. 

5. Create a New Case
(8-NewCase.png)
- Only certain users can Create a New Case
-- Enter Basic information about the problem, incident, question, etc
-- Fields/defaults for Company and Product are being added - Not sure what this means?
-- Knowledge Base Automatically finds related content based on the subject line.
-- Ability to add an attachment to the case
- How can we simplify this process?
- Currently the user is presented with 6 buttons. Should we have basic information be one step, and the second step would give them the option to add an attachment?
- Ask yourself how you would expect to enter information if you were entering a new case/ticket. How can we make it clear what needs to be done and what action they need to take to submit it?

Important:
- There are two goals with this challenge. To incorporate the GE branding and improve the user experience.
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Any design changes from the base SFDC template being used should be justified for both usability and clarity.  Visual appeal is important, but should be precisely tied with the usability and clarity.
 
Target Users:
There are two basic end user personas for this challenge:
1. The Customer Technical Support Agent. Two out of the 3 pilot applications will have this persona as an end user to our support site.  This persona will log into the site as a liason for application end users and a representative for the company using the application.  They will be entering cases on behalf of end users, and will need a view of cases across their company.  This persona is IT savvy and will utilize the site in order to contact GE for assistance in solving technical issues.
2. The Application End User (oil and gas engineer type).  One of the 3 pilot applications will have this persona using our support site. They will need a view of their own cases and case history and ability to search for solutions without having to create a case.

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users 
- Effective use of the SFDC platform, as many users will already be proficient with it

Submission & Source Files
Preview Image
Create your preview image as one (1) 1024 x 1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission in it.

Submission File
Please upload PNG images in a ZIP file with all requested contest requirements states above. Number your files (01, 02, 03, etc) in order. This will help when reviewing with the client.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors_ or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.