Challenge Summary
In this challenge, we need your help to create the best possible UI/UX for the application. This application will be use by an end customer who is setting up their own system (user that never seen Predix before should be able to use this editor).
Note: Additional GE Challenge Rules
- Please refer to GE Official Rules applicable to this challenge (attached to the 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.
- Winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes
Round 1
Submit your initial designs for Checkpoint Feedback01 Overall Structure and Navigation
02 Template Editor
03 Create / Edit / View Asset Template Details
- Feel free to add any other additional screens which are necessary to explain your concept.
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.01 Overall Structure and Navigation
02 Template Editor
03 Create / Edit / View Asset Template Details
04 Asset Editor
05 Asset Details
06 Model Editor
- Feel free to add any other additional screens which are necessary to explain your concept.
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Overview
This will be a web based data entry system, which will replace the manual JSON development.
IMPORTANT:
- This system will need to potentially handle hundreds to hundreds of thousands of records, and the system should allow users to easily navigate thru these records / asset models.
- Looking for a modern, intuitive UI/UX.
- Focus on the design being a great user experience, think simple but effective solutions!
- Come up with designs that shows out-of-the-box solutions.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application.
- Please make sure your capture every details in the wireframe.
- Use Templates from "Predix - Illustrator and Sketch Templates" as base for your design (grid, typography, etc)
Screen Requirements
We've provide you with a basic sketch/wireframes that defines the overall flow and structure of this application (check "GE_Asset_and_Model_Editor.pdf"), please feel free to expand on the concepts given and add any number of screens as required.
01 Overall Structure and Navigation
Reference: page 2 and 3 in PDF
- Provide easy to access main navigation that provides the following menus:
-- Template Editor
-- Asset Editor
-- Model Editor
-- Model Viewer
-- History
-- Import.
- Provide a way for the user to find some help information
- What other information do you think that need to be captured and presented in this screen? recent work log? templates? etc?
02 Template Editor
Reference: page 5, 6, 7 in PDF
- This contains the list of asset templates that were created
- Provide ability to create a new asset template
- User will have the ability to duplicate template and delete a template
- These asset templates can be grouped within a folder, so provide a way to create new folder (required information will be "name and description").
- The PDF shows one level of folders, but it might be helpful to have more than one. For Ex, I might want to group all of my pump templates together in one folder to make them easier to find or if I am working on a Waste Water application, I might have a folder for Waste Water and then a sub folder for pump templates, and another sub folder for vale templates, etc…
- Users should be able to delete a folder (note: if it has templates in it, then show a confirmation whether they want to delete only the folder or including all the assets).
- Allow users to view the individual list of templates (page 6 of pdf) or by grouping..do you think a search will help in finding an asset quickly and what filter options could be useful here? Looking forward to your thoughts. Another example of a filter option could be to show templates that are already applied to assets.
- If there are many templates on the system, then even navigating through the folders may or may not be the fastest way to find the template you want, so also provide a search/filter option to search by name or by key word.
- Selecting a template will reveal more details as shown in page 8 of pdf.
- User will be able to export the asset template as a CSV, we need options as shown in page 14, 15 in pdf. One option would be to export everything, but if you only want to export a subset, provides those options. One reason to do this is if you want to backup or transfer a folder of templates to another setup. Another reason is that I want to do bulk editing in the csv file, so only export the set of templates that I want to work with. Not represented in the PDF but if you filter the list of templates, be able to export just that filtered list.
03 Create / Edit / View Asset Template Details
Reference: page 8, 9, 10, 11, 12, 13, 14, 15 in PDF
- Asset Template will include name, description of the asset and few other attributes broken down into below categories:
-- Contained Templates: User could include any other asset template that are a part of this template (Page 9 & 10 of pdf).
-- Properties: This contains the properties of the current asset template and it is editable / also provide ways to add new attributes associated with this current asset. For Ex: For “Water Tank” asset, the properties includes Elevation, Location, Default value, Units, data type, Low and High values, required / optional, etc..(Page 11)
-- Keywords: Provide ways to add keywords associated with the asset (Page 12)
-- For the other tabs (Analytics, Display Cards, Reports), please create it as placeholders!
- To create new asset template, please see step by steps in page 13.
- To export the asset template creation, user can click export button and export it to csv or other files via modal window (Page 14 & 15 of pdf).
NOTE: When user adds a contained template i.e. includes any other asset as a part of this, then even their attributes can be seen under properties but it will not be editable (please see page 10 of pdf) - so provide a way to indicate this. Also if the user wants to know the attributes associated with a template then they should be able to do that!
04 Asset Editor
Reference: Page 17, 18, 26, 28, 29 in pdf
- This includes the list of assets that were created, user should be able to select a model and view assets in it.
- User will be able to view the hierarchy within the model view or individual assets in list view (please see page 18 in pdf).
- They will be able to create a new asset, it works similar to how a user edits it (it includes name, description and template) - please see 26, 27 page in pdf.
- Should be able to duplicate an asset or delete it, if they are deleting an asset with child assets then need to show confirmation before deleting whether to delete all assets or only the parent asset.
- Provide a way for them to search and filter the list of assets, think on what is required here! A possible filter option is to show all assets that contain a particular template.
- Selecting an asset will reveal more details as shown in page 19 of pdf.
- User will be able to export the asset template as a CSV, we need options as shown in page 28, 29 in pdf.
05 Asset Details
Reference: Page 19, 20, 21, 22, 23, 24, 25, 26, 27 of pdf
- Asset Template will include name, description of the asset and Template
- Will need the ability to easily choose an asset via drag & drop or other ways?
- Based on the template that were selected, user can click on the button to view details about that template (contained templates, properties, keywords, analytics, display cards, reports, etc).
- Should be able to easily select a contained template if required as shown in page 20 of pdf.
- Provide a way for the user to browse/search through a list of tags and users should be able to add a as many tags to the attribute that defines the values for the attribute. We need a way to browse / search a list of tags, and then be able to create a property by selecting a tag or set of tags.
- Show available properties for the asset in properties tab and ability to add new properties to the asset (Page 21 and 22, please check "GED - Tag Mapping Logic.pptx" for an additional information on the tag mapping process and to see history on what has been tried from our side and what think may be a good way to approach the task of mapping large groups of tags)
- User can add keywords for the asset (page 23)
- Under Geo-location, user will be able to enter the values as shown in page 24 and 25 or choose them from the map...provide a map icon and allow them to search based on the address, thereby choose the latitude/longitude details.
- Geo-location is like having a template that is automatically added to every asset. Geo-location is an example of that, however, we made it a special case so you can also view and select settings from a map. Geo-Location does not apply to every asset, but is common enough that in the pdf we made it automatically included but option to set.
- Some more notes on properties:
-- There are two types of properties. Static and bound. Static properties have values that are usually set at configuration time and do not really change. Such as the serial number of a piece of equipment. You can add a property with the name of "Serial number" and then set the value to the serial number.
-- The second type of property is one that gets the value from an external source such as a measured value. So if the temperature of the pump is not static. This could come from a tag in the Predix Time Series database. In this case you need to associate(bind) a tag from the Predix Time Series database to that property.
- Creating an asset is same as the above, please see page 26, 27 of pdf.
06 Model Editor
Reference: Page 31, 32 of pdf
- Users will be able to view the models that were created and also view / edit them!
- They will also be able to create a new model (currently this is not shown in the pdf docs but please include it and we need to these details 'Name, model type and asset relationships').
- Selecting a model will allow them to view / edit a model...users will be able to drag and drop, re-order, indent/outdent to create a parent child relationship, remove an asset....looking for your thoughts on what would be required to create these relationships.
- Please see examples for the two types of model: hierarchy (page 31 of pdf) and flow (page 32 of pdf). Most applications the hierarchy type of relationship is what is used. The Hierarchy is also typically used to represent locations. Ex. Pet food facility, can then have children for dog food and cat food, then under dog food can be wet food and dry.
- User will be able to delete a model.
- Should have the ability to export it as a CSV.
Some explanation about terminologies used in requirements above:
- Asset: Anything in the physical world you want to represent, like a turbine, or a propeller. Each asset has a set of properties.
- Asset Template: Tool to help you create assets. For example, if you have 20 pumps, you can define an asset template, you can duplicate all of the properties of the asset.
- Model: Relationship between all your assets. A hydro power plant can be the parent, and the turbine can be a child. So the hierarchy / relationship between assets.
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!
Branding Guidelines
- Follow Predix Branding
- Use Templates from "Predix - Illustrator and Sketch Templates" as base for your design (grid, typography, etc)
Documentation
Google Drive: https://drive.google.com/folderview?id=0B6CyMUG3aZWhRlhvN001d1JBc2s&usp=sharing
- GE_Asset_and_Model_Editor.pdf (Basic Flow for the apps/wireframes)
- GE-TurboConnect-High-levelProjectRequirements.docx (High Level Requirements)
- Predix Branding (PREDIX Branding.zip)
- Base Design Template (Predix - Illustrator and Sketch Templates.zip)
- GED - Tag Mapping Logic.pptx
Target Audience
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)!
- 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 creation align with the objectives of the challenge
- Consistency of your design creation 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
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.
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.