Challenge Summary
Welcome to the FAST!! GE Oil and Gas New Design Concepts Challenge.
The goal of this challenge is to update the UI on a couple pages of the GE "Oil & Gas" Industrial Internet Technical Service application based on the customer feedback and testing we received. We are looking to launch with customers this month and need a good first impression, think about Modern, Clean, Sophisticated Face of Software Support.
We are looking for quick turnaround in refreshing the UX/UI on two pages and for you to analyze the experience and think about a better face to the customer for GE. This challenge is only focused on the listed tasks. You are not redesigning the application only refreshing, fixing and updating specific items.
This is FAST!! Checkpoint - get your submissions in soon!
Additional Challenge Rules:
- Please refer to the linked 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 initial design concepts for client feedback
- Updated "GE Oil & Gas" pages for these screens:
1) Dashboard (Important!)
2) Cases
3) Case Detail Page
4) New Case Form
Notes.jpg: Any comments about your design for the Client
Round 2
Final designs with checkpoint feedback included.
- "GE Oil & Gas" pages for these screens:
1) Dashboard
2) Cases
3) Case Detail Page
4) New Case Form
Notes.jpg: Any comments about your design for the Client
Challenge Details
GE recently did customer user testing of their "Oil & Gas" application design and they are now looking to make usability and user experience improvements to the page based on the feedback they received.
Before you start:
- Review the attached Prototype (UI-Prototype.zip) Start with "Dashboard.html"
- Use "Storyboard.zip" as the base of your design updates.
- Review (Screenshot.zip) (look to improve this)
- You design must stay consistent with the provided UI design
"GE Oil & Gas" User Experience Design Updates
Note: We are looking for you to improve the user experience of "GE Oil & Gas".
You can try NEW graphic design elements to try and improve the overall page experience.
1) Dashboard
Design Problem: We need to improve the Dashboard overall layout. We have removed some items from the Dashboard and it no longer flows correctly. The Dashboard page will serve as the first impression of GE software support for a customer, this dashboard page is the most critical and requires the most creativity. We are open to any new ideas! Any design suggestions?
Screenshot: Dashboard page
- Users are not getting much use out of the top row of tiles (My Case, New Case, Solved Case, Critical Case).
- Another concern is that this site is for customers of GE, but there isn’t good customer representation on the Dashboard.
- One suggestion is to create a banner with the customer's company logo in it. Without redoing the whole page, do you have any solution?
- Remove “Popular Documentation”, “Recently Updated Articles” and “FAQ” from this Dashboard page
- Tech Support widget, with the functionality of Salesforce application, the current design doesn’t work.
- We need an icon that indicates this is what they press for “Chat with an Agent” - the icon is grey’d out or something when an agent is not available. And it’s highlighted or something when a agent is ready to chat live.
- We do not like the “Tech Support” title, we need it to be very direct that pressing this button will start live agent chat session.
- When selecting the Live Chat Icon, the functionality is that a pop up window will appear over the screen. We need a nice looking design for the pop up window. (like the same banner on the landing page or something)
- Functions of the pop up will be Save Chat, End Chat, box to write a message, and SEND.
- As well as the actual chat showing the person name, and time for each entry in the chat window
2) Cases
Design Problem: User sees all cases for entire company. User can’t see "MY CASES" by default. Need ideas that are consistent with the UI/UX.
Screenshot: Cases Page
Client Sketch: Screenshot/Cases.png
- Need option to only show "MY New Cases", "MY Open Cases", etc.
- Potentially add a "My Cases Box" and Label top boxes. Could potentially have a check box to filter list next to "View: All Priorities" something like a toggle between "All Cases" and "My Cases" thoughts?.
- No contrast in the case headings. The grey text doesn’t stand out enough.
- Implement your solution to other title heading problem.
- Cases listing, search and settings need contrast to make visible.
3) Case Detail Page
Design Problem: Case Detail Page needs to be redesigned, grouped, rolled up and minimalized. There is a need to show more info about the case specifics. Cases have fields associated with them.
Screenshot: Case Detail Page
Client Sketch: Screenshot/Case-Detail.png
- The feed is currently at the bottom, and we believe it should probably be closer to the top, but hideable, or potentially expandable/collapsible.
- The recent activity will all be in the feed, so it is important, but if it is too long, it can get in the way if you want to see details.
- Just need show Post and File. Currently there is no need for “Call, Community, Status, or More” buttons above. We could be replaced with a way to toggle the feed, but it needs to be cleaned up.
- Also, when selecting Post or File, nothing happens in the current UI Prototype. We need designed popout/interaction when those items are selected.
- The list of fields that needs to be displayed, along with a “grouping” area they might be grouped into are as follows:
Case Details
- Case Number
- Status + Sub Status
- Priority
- Open Date
- Subject
- Description
- Customer Reference #
Stats
- Initial Response
- Expected Completion Date
- Time Pending Customer
- Time Pending GE
- Resolution Time
- The feed is currently at the bottom, and we believe it should probably be closer to the top, but hideable, or potentially expandable/collapsible.
- The recent activity will all be in the feed, so it is important, but if it is too long, it can get in the way if you want to see details.
- Just need show Post and File. Currently there is no need for “Call, Community, Status, or More” buttons above. We could be replaced with a way to toggle the feed, but it needs to be cleaned up.
- Also, when selecting Post or File, nothing happens in the current UI Prototype. We need designed popout/interaction when those items are selected.
- The list of fields that needs to be displayed, along with a “grouping” area they might be grouped into are as follows:
Case Details
- Case Number
- Status + Sub Status
- Priority
- Open Date
- Subject
- Description
- Customer Reference #
Stats
- Initial Response
- Expected Completion Date
- Time Pending Customer
- Time Pending GE
- Resolution Time
Related Cases List
4) New Case Form
Design Problem: Add contrast to the form to make it stand out or maybe just a border, but everyone feels it doesn’t pop out enough to know what is happening and makes everything look a bit cluttered when “New Case” or other flyout is active
Screenshot: New Case Form
Client Sketch: Screenshot/New-Case.png
- The arrow selector showing which “module” the user is on on the left side (pointing at either New Case, Dashboard, or Cases) isn’t quite enough to show what the user is looking at. Potentially have color change behind the module selected or do something else to bring out what the current module is.
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Target User
- Potential Customers
- Current Customers
Judging Criteria
- How well you update and improve the "GE Oil & Gas" page
- Cleanliness of your graphics and design
Submission & Source Files
Preview Image
- Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
All Requested challenge Submission Requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.