Challenge Summary
Welcome back to the "GE - TurboConnect - Asset and Model View Editor Design Refinement Challenge". In the previous challenge, we asked you to design the majority of the main application screens. Now in this Refinement Challenge, we need your creative skills to explore a main function of the site that needs additional design thinking.
We have a wireframe that explains the overall page structure but specific tasks and functions have not been wireframed. You will need to design the best UI/UX interactions and define a series of screens that show the best way for a user to complete the required sets of actions/features in the application.
In addition, we will also need you to complete design updates to the existing screens in order to align the design and branding with the latest GE Predix platform. The provided designs are a good start but there are inconsistencies that we need you to analyze and fix. This is a lower priority (your focus should be on the model editor) but we will need to see the Predix branding updates if you are to succeed in this challenge!
Looking forward to your design refinements!
1. Model Editor Details
-- Tree Model
-- Flow Model
Important: As part of your Checkpoint Submission, you must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request Topcoder InvisionApp access from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
1. Model Editor Details
-- Tree Model
-- Flow Model
2. Predix Updates
Important: As part of your Final Submission, you must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request Topcoder InvisionApp access from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
Challenge Overview
We are creating an application that allows users to define domains, build prototypes (high-level abstracts/templates) of assets & to create vendor specific definitions for those templates. The final output from this app will be Predix asset models. In the previous challenge, we asked you to create all the main screens needed for the application and now we need everyone to go deeper and a refine the UI/UX.
Predix UI
Important: Review and learn about the Predix UI system. This is the first of many GE challenges that will be using this system! It is critical that you learn the Predix UI best practices. Templates and resource files have been provided.
Task Requirements
1) Model Editor Details
- The wireframes show the general functions of this page but do not get into detail.
- There are two types of layouts that the clients would like to see:
1.a) Tree Model:
- Screen references "Page 31 of Wireframes"
- This purpose of this page is to find assets and building models. The tree model is a very traditional information organizing structure that displays hierarchy based on displaying which assets fit within or underneath in the file structure.
- There are several reasons that users will come to this page:
-- Build new asset models: Users will build out new asset models using the model builder.
-- An alternate way to find assets. Users can often use existing models to find a particular asset or set of assets that they need for a project. For example, a user might know the individual components of a wastewater treatment plant but might be able to find that asset easily in the assets list. If a user knows an asset is contained in a model, it can be easier for the user to find that asset by finding the model.
- Actions users will take on this page:
Note: these actions are not explained in the wireframe. We are looking for your UI/UX expertise to help develop screens that will explain how a user will perform these actions within this portion of the experience.
a. Add and create new models:
- Create a new model
- Search for existing models.
b. Search for Assets / templates
- Users will search for assets from the panel on the left side of the screen.
c. Drag and drop Assets into asset model panel:
- Users will drag and drop assets from the left panel onto the model builder panel to build out models.
- Assume there will be more than 6 assets in the asset panel
d. Remove Assets from model
- Users will need to be able to remove assets from the model. How will this work?
e. Drag and drop to "re-parent" assets.
- Eg: how do I move something up or down in the hierarchy of the model.
- Click and drag to change positions of assets in the models.
1.b) Flow Model:
- Screen references "Page 31 of Wireframes"
- This purpose of this page is for finding assets and building models. The flow model is different from the parent / child model in that it is a more visual approach to showing how one element of a model interacts with the next.
- There are several reasons that users will come to this page:
-- Build new asset models: Users will build out new asset models using the model builder.
-- An alternate way to find assets. Users can often use existing models to find a particular asset or set of assets that they need for a project. For example, a user might know the individual components of a wastewater treatment plant but might be able to find that asset easily in the assets list. If a user knows an asset is contained in a model, it can be easier for the user to find that asset by finding the model.
- Actions users will take on this page:
Note: these actions are not explained in the wireframe. We’re looking for your UI/UX expertise to help develop screens that will explain how a user will perform these actions within this portion of the experience.
a. Add and create new models:
- Create a new model
- Search for existing models.
b. Search for Assets / templates
- Users will search for assets from the panel on the lower-left side of the screen.
c. Drag and drop Assets into asset model panel:
- Users will drag and drop assets from the left panel onto the model builder panel to build out models.
- Assume there will be more than 6 assets in the asset panel
d. Remove Assets from model
- Users will need to be able to remove assets from the model. How will this work?
e. Add / Remove Branch:
- A branch is an area of the model where one or more assets “branches” off from a previous asset.
- Users must be able to add and remove branches.
- Show the changes that occur as a user adds/removes branches.
f. How does the model scale if there are many components or the model is too large to fit on the screen all at once?
- Can a user zoom in / out? How?
- Can a user pan using the mouse? Think Google Maps.
2. Predix Updates
- The design of all screens from the previous challenge must be updated to meet the exacting specifications of the Predix brand.
- Predix is GE's new set of design guidelines. Future GE challenges will require you to know Predix, so use this challenge as an opportunity to become familiar so that you can work better and faster in future GE challenges!
- http://predixdev.github.io/predix-ui/
-- Predix contains many pre-defined styles for things like form fields, buttons, check boxes, tabs, etc. These elements exist in code and the designs we are provided are essentially guidelines for which elements to use and how.
-- You will find these elements in this file: "Px_stencils_v09.ai" which is part of the Predix branding packge.
-- We need your help to make edits to the previous designs to ensure that we are using Predix brand elements for all instances where they are available.
-- We must make absolutely sure that any common design elements are being sourced from the existing Predix libraries and that we are not creating something new that differs from an existing style.
-- When we Prototype this application we will be using HTML/CSS standards based on http://predixdev.github.io/predix-ui/
--- Existing Design: https://topcoder.invisionapp.com/share/UM91TOBB9#/199088733_Tc-01-Add-To-Collection
Design Elements
- In addition to common elements, pay extremely close attention to the following, ensuring that these design elements are on brand:
-- Grid sizes
-- Overall page layout
-- Typography sizes and colors
-- Overall color usage throughout the design
-- GE Inspira - This typeface must be used for all typography.
-- GE Icons. GE uses "font awesome" for icons. All icons should be coming from the Font Awesome typeface. http://fontawesome.io/assets/font-awesome-4.7.0.zip
---- Follow this tutorial to learn how to use fontawesome icons in your photoshop or illustrator document. https://woorkup.com/font-awesome-photoshop-illustrator/ http://fontawesome.io/cheatsheet/
---- If you need an icon that you can not find through font awesome, then create your own. But font awesome should be your default resource.
-- Look at "page samples": http://predixdev.github.io/predix-ui/, http://predixdev.github.io/predix-ui/?show=px-alert-message&type=component
Design Consideration
- We would like to see your design for the model editor section.
- Not just the same slide as in the mockup but how the add new item, edit an existing item, and remove items would work.
- Also how to handle if there are many items in the model (too big to show on one screen).
- Any new screens must follow the Predix UI styling.
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.
New Predix Branding
- https://www.predix.io/
- http://predixdev.github.io/predix-ui/
Screen Sizes
- Specific screen sizes: Desktop: min 1280px width and height as required.
- Make sure you create graphic in 'shape' format, so when we resize graphics everything will still look sharp!
Documentation
Google Drive: https://drive.google.com/drive/folders/0B8cviJNGmPm5ZDFSTno3UTJXNzg?usp=sharing
- GE Fonts
- Existing Storyboard
- Original Wireframes
- Predix Branding
- Font awesome icons http://fontawesome.io/assets/font-awesome-4.7.0.zip
- https://woorkup.com/font-awesome-photoshop-illustrator/ http://fontawesome.io/cheatsheet/
Target User
Anyone who can create / edit / maintain asset definitions / asset models in Predix
- Author: The Author will define new domains where their teams will be working. Such as Water, MFG, CPG, Power, Power Gen
- Builder: The Building creates the templates and high level abstractions for the domain. They define what Analytics, base properties and displays will be required for the solution. Such as Turbine, Pump, Diaper Line
- Creator: The Creator extends the builder’s templates into specific vendor versions of the templates (if needed). This would be to map to specific properties, analytics and vendor specific displays.
- Deployer: The deployer finishes the development by “binding” specific data attributes to the model. This can be things like the Asset name, the Historian tag to use for a value. They do not add new properties or new analytics to the model.
Stock Artwork
For this challenge, you can only use Stock photos (No stock icons allowed except the one we mentioned above)!
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Judging Criteria
Your submission will be judged on the following criteria:
- How well your design align with the objectives of the challenge
- Consistency of your design with our branding
- Cleanliness of screen design and user flow
- Overall design and user experience
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
Submit JPG/PNG for your submission files.
Source Files
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD 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.
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.
We have a wireframe that explains the overall page structure but specific tasks and functions have not been wireframed. You will need to design the best UI/UX interactions and define a series of screens that show the best way for a user to complete the required sets of actions/features in the application.
In addition, we will also need you to complete design updates to the existing screens in order to align the design and branding with the latest GE Predix platform. The provided designs are a good start but there are inconsistencies that we need you to analyze and fix. This is a lower priority (your focus should be on the model editor) but we will need to see the Predix branding updates if you are to succeed in this challenge!
Looking forward to your design refinements!
Round 1
Initial design for client review:1. Model Editor Details
-- Tree Model
-- Flow Model
Important: As part of your Checkpoint Submission, you must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request Topcoder InvisionApp access from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
Round 2
All requirements like stated in challenge details with client feedback applied:1. Model Editor Details
-- Tree Model
-- Flow Model
2. Predix Updates
Important: As part of your Final Submission, you must upload your submission to InvisionApp so we can provide direct feedback on your designs.
- Please request Topcoder InvisionApp access from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
Challenge Overview
We are creating an application that allows users to define domains, build prototypes (high-level abstracts/templates) of assets & to create vendor specific definitions for those templates. The final output from this app will be Predix asset models. In the previous challenge, we asked you to create all the main screens needed for the application and now we need everyone to go deeper and a refine the UI/UX.
Predix UI
Important: Review and learn about the Predix UI system. This is the first of many GE challenges that will be using this system! It is critical that you learn the Predix UI best practices. Templates and resource files have been provided.
Task Requirements
1) Model Editor Details
- The wireframes show the general functions of this page but do not get into detail.
- There are two types of layouts that the clients would like to see:
1.a) Tree Model:
- Screen references "Page 31 of Wireframes"
- This purpose of this page is to find assets and building models. The tree model is a very traditional information organizing structure that displays hierarchy based on displaying which assets fit within or underneath in the file structure.
- There are several reasons that users will come to this page:
-- Build new asset models: Users will build out new asset models using the model builder.
-- An alternate way to find assets. Users can often use existing models to find a particular asset or set of assets that they need for a project. For example, a user might know the individual components of a wastewater treatment plant but might be able to find that asset easily in the assets list. If a user knows an asset is contained in a model, it can be easier for the user to find that asset by finding the model.
- Actions users will take on this page:
Note: these actions are not explained in the wireframe. We are looking for your UI/UX expertise to help develop screens that will explain how a user will perform these actions within this portion of the experience.
a. Add and create new models:
- Create a new model
- Search for existing models.
b. Search for Assets / templates
- Users will search for assets from the panel on the left side of the screen.
c. Drag and drop Assets into asset model panel:
- Users will drag and drop assets from the left panel onto the model builder panel to build out models.
- Assume there will be more than 6 assets in the asset panel
d. Remove Assets from model
- Users will need to be able to remove assets from the model. How will this work?
e. Drag and drop to "re-parent" assets.
- Eg: how do I move something up or down in the hierarchy of the model.
- Click and drag to change positions of assets in the models.
1.b) Flow Model:
- Screen references "Page 31 of Wireframes"
- This purpose of this page is for finding assets and building models. The flow model is different from the parent / child model in that it is a more visual approach to showing how one element of a model interacts with the next.
- There are several reasons that users will come to this page:
-- Build new asset models: Users will build out new asset models using the model builder.
-- An alternate way to find assets. Users can often use existing models to find a particular asset or set of assets that they need for a project. For example, a user might know the individual components of a wastewater treatment plant but might be able to find that asset easily in the assets list. If a user knows an asset is contained in a model, it can be easier for the user to find that asset by finding the model.
- Actions users will take on this page:
Note: these actions are not explained in the wireframe. We’re looking for your UI/UX expertise to help develop screens that will explain how a user will perform these actions within this portion of the experience.
a. Add and create new models:
- Create a new model
- Search for existing models.
b. Search for Assets / templates
- Users will search for assets from the panel on the lower-left side of the screen.
c. Drag and drop Assets into asset model panel:
- Users will drag and drop assets from the left panel onto the model builder panel to build out models.
- Assume there will be more than 6 assets in the asset panel
d. Remove Assets from model
- Users will need to be able to remove assets from the model. How will this work?
e. Add / Remove Branch:
- A branch is an area of the model where one or more assets “branches” off from a previous asset.
- Users must be able to add and remove branches.
- Show the changes that occur as a user adds/removes branches.
f. How does the model scale if there are many components or the model is too large to fit on the screen all at once?
- Can a user zoom in / out? How?
- Can a user pan using the mouse? Think Google Maps.
2. Predix Updates
- The design of all screens from the previous challenge must be updated to meet the exacting specifications of the Predix brand.
- Predix is GE's new set of design guidelines. Future GE challenges will require you to know Predix, so use this challenge as an opportunity to become familiar so that you can work better and faster in future GE challenges!
- http://predixdev.github.io/predix-ui/
-- Predix contains many pre-defined styles for things like form fields, buttons, check boxes, tabs, etc. These elements exist in code and the designs we are provided are essentially guidelines for which elements to use and how.
-- You will find these elements in this file: "Px_stencils_v09.ai" which is part of the Predix branding packge.
-- We need your help to make edits to the previous designs to ensure that we are using Predix brand elements for all instances where they are available.
-- We must make absolutely sure that any common design elements are being sourced from the existing Predix libraries and that we are not creating something new that differs from an existing style.
-- When we Prototype this application we will be using HTML/CSS standards based on http://predixdev.github.io/predix-ui/
--- Existing Design: https://topcoder.invisionapp.com/share/UM91TOBB9#/199088733_Tc-01-Add-To-Collection
Design Elements
- In addition to common elements, pay extremely close attention to the following, ensuring that these design elements are on brand:
-- Grid sizes
-- Overall page layout
-- Typography sizes and colors
-- Overall color usage throughout the design
-- GE Inspira - This typeface must be used for all typography.
-- GE Icons. GE uses "font awesome" for icons. All icons should be coming from the Font Awesome typeface. http://fontawesome.io/assets/font-awesome-4.7.0.zip
---- Follow this tutorial to learn how to use fontawesome icons in your photoshop or illustrator document. https://woorkup.com/font-awesome-photoshop-illustrator/ http://fontawesome.io/cheatsheet/
---- If you need an icon that you can not find through font awesome, then create your own. But font awesome should be your default resource.
-- Look at "page samples": http://predixdev.github.io/predix-ui/, http://predixdev.github.io/predix-ui/?show=px-alert-message&type=component
Design Consideration
- We would like to see your design for the model editor section.
- Not just the same slide as in the mockup but how the add new item, edit an existing item, and remove items would work.
- Also how to handle if there are many items in the model (too big to show on one screen).
- Any new screens must follow the Predix UI styling.
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.
New Predix Branding
- https://www.predix.io/
- http://predixdev.github.io/predix-ui/
Screen Sizes
- Specific screen sizes: Desktop: min 1280px width and height as required.
- Make sure you create graphic in 'shape' format, so when we resize graphics everything will still look sharp!
Documentation
Google Drive: https://drive.google.com/drive/folders/0B8cviJNGmPm5ZDFSTno3UTJXNzg?usp=sharing
- GE Fonts
- Existing Storyboard
- Original Wireframes
- Predix Branding
- Font awesome icons http://fontawesome.io/assets/font-awesome-4.7.0.zip
- https://woorkup.com/font-awesome-photoshop-illustrator/ http://fontawesome.io/cheatsheet/
Target User
Anyone who can create / edit / maintain asset definitions / asset models in Predix
- Author: The Author will define new domains where their teams will be working. Such as Water, MFG, CPG, Power, Power Gen
- Builder: The Building creates the templates and high level abstractions for the domain. They define what Analytics, base properties and displays will be required for the solution. Such as Turbine, Pump, Diaper Line
- Creator: The Creator extends the builder’s templates into specific vendor versions of the templates (if needed). This would be to map to specific properties, analytics and vendor specific displays.
- Deployer: The deployer finishes the development by “binding” specific data attributes to the model. This can be things like the Asset name, the Historian tag to use for a value. They do not add new properties or new analytics to the model.
Stock Artwork
For this challenge, you can only use Stock photos (No stock icons allowed except the one we mentioned above)!
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Judging Criteria
Your submission will be judged on the following criteria:
- How well your design align with the objectives of the challenge
- Consistency of your design with our branding
- Cleanliness of screen design and user flow
- Overall design and user experience
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
Submit JPG/PNG for your submission files.
Source Files
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD 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.
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.
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.