Challenge Summary
Welcome to the "GE - Customer Training Management Tool Design Concepts Challenge". In this challenge, we are looking for you to create the best possible user experience for our new Customer Training Management tool based on the provided wireframes and the preferred GE branding/design guidelines.
At the end of this challenge, We are looking for the Topcoder Design Community to help us plan and design the user experience of our new application.
1) Dashboard Screen
2) Create Project Screen
3) Projects in ITO Screen
4) Project Details in ITO Screen
5) Add Modules Screen
1) Dashboard Screen
2) Create Project Screen
3) Projects in ITO Screen
4) Project Details in ITO Screen
5) Add Modules Screen
6) Modules (In Execution) Screen
7) Trainers Screen
8) Trainer Details Screen
9) Add Trainer Screen
10) Archive Documentation Screen
Additional GE Challenge Rules
- Please refer to GE Official Rules attached to this challenge.
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- All winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.
Background Overview
The Customer Training Management Tool is an application that allows the GE OTR (Order to Remittance) Team manage "Training" packages (consisting of different types of training courses) as part of the customer RFQ (Request for Quotation) process. Essentially our internal or external customers will request potential GE services, and they can also request "Training" to be included as part of that service, and the Customer Training Management Tool is used to manage all the details, organization, generate proposals and the delivery of the Training packages.
The Purpose of this challenge is to deign the user experience and design the best possible look and feel of the application based on the provided wireframes. We are looking for the Topcoder Design Community to help us with our new UI/UX for this application.
Design Notes
- This is going to be a web application.
- Please make sure to use and follow GE Branding Guideline Strictly in your design.
- Desktop Size: min 1280px width and height as required.
- Please consider responsiveness while designing your solution.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Please use the wireframes as your references for the layout creation.
Key Features
- Optimization of the request process/flow
- Managing backlog/proposal
- Maintaining the master data for training, trainers, technologies, schedules regional facilities availability [partial view]
- Customization and configuration of the training dates, costs, number of attendees, prerequisites
Screen Requirements
Please create the following screens in your submission:
1) Dashboard Screen
Wireframe reference "Dashboard"
- After successful logging into the application, the user will arrive on their dashboard
- Show summary information related to the application and user activity on this page
- Think of the best visual way to display overall summary information of projects and training from the apps. It doesn't have to be pie chart like shown in the wireframes, be creative!
- The notification area in the wireframes consumed a lot of space on the right side, how can we simplify it without sacrifice the notification content? How can user be aware if new notification comes in?
- User will be able to see all projects and related backlog from this screen.
- Ability to create new project
- Pending tasks, project list, notification, and other features that necessary and important in the dashboard.
2) Create Project Screen
Wireframe reference "Create Project"
- User will be able to create new project from this screen
- User will need to enter any important information related to the projects, some fields that needs to be provided in the project forms:
-- Customer Name
-- Buyer Country
-- End User Country
-- Sale Through
-- Currency
-- Exchange Rate
-- Purchase Order is placed by
-- Training Courses Delivered within
3) Projects in ITO Screen
Wireframe reference "Projects In ITO"
- Show all project progress/status
- Show all pending task that needs to be completed
- Needs some way to easily find particular project from this screen. Provide some way to limit the data, for example (filter, pagination, sorting, etc)
- User will be able to see and manage backlog by go to the project details to see more complete informations about it.
- The backlog is proposals that need to be reviewed, options generated and prize optimized.
4) Project Details in ITO Screen
Wireframe reference "Project Details (In ITO)"
- Show detail informations about project/proposal.
- At the top screen area, show information about project status, total prices, etc.
- Ability to add module, edit or delete project, print or export the project data information.
- This screen will show 3 kinds of informations separated by tabs, which are:
-- Project Info, contains detail informations about project condition
-- Modules, contain informations about all modules/training summary that necessary for the projects.
-- Financial Projection, contains information about cost/budgeting information to run the project training.
5) Add Modules Screen
Wireframe reference "Add Module"
- Screen to create new training module for project
- There are a lot of informations needs to be added in this screen, so usage of wizard form will be useful.
- Some informations needed in this screen area:
-- Course Info, once user save this area, the module will be create automatically. User can enter additional information about the module content once the module created.
-- Instructors, by default there will be no instructors selected. User needs to search or select available instructor from database. User also can compare instructors before select/assign them to the module. User can choose more than one instructors for one module and able to view their profile. Make sure to browse and navigate the wireframes to get more information about each interactions (choose, compare and view trainer profile).
-- Documents, area where user can select or provide any supporting documents (soft or hard copy) necessary for the modules. For softcopy documents, user can upload it via normal upload form or choose available documents from the archive.
-- Cost Sales & CM, area where user needs to calculate all cost related to the module. User will be able to add new “Cost Object”, where it will be added to the screen and user can calculate the cost for each specific item.
6) Modules (In Execution) Screen
Wireframe reference "Module (In Execution)"
- This screen will show all module informations to the user
- Please create the following tabs for this screen:
-- Instructors
-- As Sold
-- Attendance
-- Quality Assessment, click the “View Details” link to open hidden content.
-- Comments/Notes
7) Trainers Screen
Wireframe reference "Trainers"
- Admin user can manage all trainers from this screen.
- Admin user will be able to view all trainers availability from gant chart provided in this screen.
- Ability to filter trainers
- Ability to add new trainers.
8) Trainer Details Screen
Wireframe reference "Trainer Details"
- This screen will show information about trainer details
- Trainers basic profile, their fees, skills, schedule and detail schedule informations (click the calendar date to show schedule details).
9) Add Trainer Screen
Wireframe reference "Add Trainer"
- Admin user can add new trainers to the system.
- Once the trainer information added, the trainers will be available in the database where user can choose them for their module.
- There are several informations that needs to be filled in this area:
-- Trainer Photo
-- Trainer Basic information and contact info (name, address, etc)
-- Fees
-- Skills (Technologies, Offered Courses, Languages Spoken)
10) Archive Documentation Screen
Wireframe reference "Archive"
- All documentation of the project/module/training will goes here.
- This screen have a purpose as repository that listing all documentations for "Training Certificate" and "Training Manual", please create “Training Certificate” tab for this screen.
- Needs a good filter design that can help user to manage the documentations (since the documentations will be large)
- Need some button to give user ability to upload document manually.
- Ability to download or delete the documentations.
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
Branding Guidelines
Google Drive: https://drive.google.com/folderview?id=0B8cviJNGmPm5VDduc3lBVlVvTzg&usp=sharing
- Follow GE Branding Guidelines
- Follow GE Font files
- IIDX Template files (Visual Design Guidance)
Documentation
- Wireframes
- GE Branding Guidelines
- GE Font files
- IIDX Template files (Visual Design Guidance)
Target Audience
- Technical Training team
- Project Managers
Judging Criteria
We will be judging on:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- How well you follow GE Branding Guidelines in your design.
- Completeness and accuracy of the designs based on our wireframes.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Submission and 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
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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 and instructions.
At the end of this challenge, We are looking for the Topcoder Design Community to help us plan and design the user experience of our new application.
Round 1
Initial submission for client review:1) Dashboard Screen
2) Create Project Screen
3) Projects in ITO Screen
4) Project Details in ITO Screen
5) Add Modules Screen
Round 2
All requirements like stated in challenge details with client feedback applied:1) Dashboard Screen
2) Create Project Screen
3) Projects in ITO Screen
4) Project Details in ITO Screen
5) Add Modules Screen
6) Modules (In Execution) Screen
7) Trainers Screen
8) Trainer Details Screen
9) Add Trainer Screen
10) Archive Documentation Screen
Additional GE Challenge Rules
- Please refer to GE Official Rules attached to this challenge.
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- All winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.
Background Overview
The Customer Training Management Tool is an application that allows the GE OTR (Order to Remittance) Team manage "Training" packages (consisting of different types of training courses) as part of the customer RFQ (Request for Quotation) process. Essentially our internal or external customers will request potential GE services, and they can also request "Training" to be included as part of that service, and the Customer Training Management Tool is used to manage all the details, organization, generate proposals and the delivery of the Training packages.
The Purpose of this challenge is to deign the user experience and design the best possible look and feel of the application based on the provided wireframes. We are looking for the Topcoder Design Community to help us with our new UI/UX for this application.
Design Notes
- This is going to be a web application.
- Please make sure to use and follow GE Branding Guideline Strictly in your design.
- Desktop Size: min 1280px width and height as required.
- Please consider responsiveness while designing your solution.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Please use the wireframes as your references for the layout creation.
Key Features
- Optimization of the request process/flow
- Managing backlog/proposal
- Maintaining the master data for training, trainers, technologies, schedules regional facilities availability [partial view]
- Customization and configuration of the training dates, costs, number of attendees, prerequisites
Screen Requirements
Please create the following screens in your submission:
1) Dashboard Screen
Wireframe reference "Dashboard"
- After successful logging into the application, the user will arrive on their dashboard
- Show summary information related to the application and user activity on this page
- Think of the best visual way to display overall summary information of projects and training from the apps. It doesn't have to be pie chart like shown in the wireframes, be creative!
- The notification area in the wireframes consumed a lot of space on the right side, how can we simplify it without sacrifice the notification content? How can user be aware if new notification comes in?
- User will be able to see all projects and related backlog from this screen.
- Ability to create new project
- Pending tasks, project list, notification, and other features that necessary and important in the dashboard.
2) Create Project Screen
Wireframe reference "Create Project"
- User will be able to create new project from this screen
- User will need to enter any important information related to the projects, some fields that needs to be provided in the project forms:
-- Customer Name
-- Buyer Country
-- End User Country
-- Sale Through
-- Currency
-- Exchange Rate
-- Purchase Order is placed by
-- Training Courses Delivered within
3) Projects in ITO Screen
Wireframe reference "Projects In ITO"
- Show all project progress/status
- Show all pending task that needs to be completed
- Needs some way to easily find particular project from this screen. Provide some way to limit the data, for example (filter, pagination, sorting, etc)
- User will be able to see and manage backlog by go to the project details to see more complete informations about it.
- The backlog is proposals that need to be reviewed, options generated and prize optimized.
4) Project Details in ITO Screen
Wireframe reference "Project Details (In ITO)"
- Show detail informations about project/proposal.
- At the top screen area, show information about project status, total prices, etc.
- Ability to add module, edit or delete project, print or export the project data information.
- This screen will show 3 kinds of informations separated by tabs, which are:
-- Project Info, contains detail informations about project condition
-- Modules, contain informations about all modules/training summary that necessary for the projects.
-- Financial Projection, contains information about cost/budgeting information to run the project training.
5) Add Modules Screen
Wireframe reference "Add Module"
- Screen to create new training module for project
- There are a lot of informations needs to be added in this screen, so usage of wizard form will be useful.
- Some informations needed in this screen area:
-- Course Info, once user save this area, the module will be create automatically. User can enter additional information about the module content once the module created.
-- Instructors, by default there will be no instructors selected. User needs to search or select available instructor from database. User also can compare instructors before select/assign them to the module. User can choose more than one instructors for one module and able to view their profile. Make sure to browse and navigate the wireframes to get more information about each interactions (choose, compare and view trainer profile).
-- Documents, area where user can select or provide any supporting documents (soft or hard copy) necessary for the modules. For softcopy documents, user can upload it via normal upload form or choose available documents from the archive.
-- Cost Sales & CM, area where user needs to calculate all cost related to the module. User will be able to add new “Cost Object”, where it will be added to the screen and user can calculate the cost for each specific item.
6) Modules (In Execution) Screen
Wireframe reference "Module (In Execution)"
- This screen will show all module informations to the user
- Please create the following tabs for this screen:
-- Instructors
-- As Sold
-- Attendance
-- Quality Assessment, click the “View Details” link to open hidden content.
-- Comments/Notes
7) Trainers Screen
Wireframe reference "Trainers"
- Admin user can manage all trainers from this screen.
- Admin user will be able to view all trainers availability from gant chart provided in this screen.
- Ability to filter trainers
- Ability to add new trainers.
8) Trainer Details Screen
Wireframe reference "Trainer Details"
- This screen will show information about trainer details
- Trainers basic profile, their fees, skills, schedule and detail schedule informations (click the calendar date to show schedule details).
9) Add Trainer Screen
Wireframe reference "Add Trainer"
- Admin user can add new trainers to the system.
- Once the trainer information added, the trainers will be available in the database where user can choose them for their module.
- There are several informations that needs to be filled in this area:
-- Trainer Photo
-- Trainer Basic information and contact info (name, address, etc)
-- Fees
-- Skills (Technologies, Offered Courses, Languages Spoken)
10) Archive Documentation Screen
Wireframe reference "Archive"
- All documentation of the project/module/training will goes here.
- This screen have a purpose as repository that listing all documentations for "Training Certificate" and "Training Manual", please create “Training Certificate” tab for this screen.
- Needs a good filter design that can help user to manage the documentations (since the documentations will be large)
- Need some button to give user ability to upload document manually.
- Ability to download or delete the documentations.
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
Branding Guidelines
Google Drive: https://drive.google.com/folderview?id=0B8cviJNGmPm5VDduc3lBVlVvTzg&usp=sharing
- Follow GE Branding Guidelines
- Follow GE Font files
- IIDX Template files (Visual Design Guidance)
Documentation
- Wireframes
- GE Branding Guidelines
- GE Font files
- IIDX Template files (Visual Design Guidance)
Target Audience
- Technical Training team
- Project Managers
Judging Criteria
We will be judging on:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- How well you follow GE Branding Guidelines in your design.
- Completeness and accuracy of the designs based on our wireframes.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Submission and 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
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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 and instructions.
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.