Infront - Cloud Engine GUI Composer Design Concepts Challenge

Welcome to "Infront - Cloud Engine GUI Composer Design Concepts Challenge". In this challenge, we are asking you to come up with a great UX/UI design concept for our new GUI composer that will enable our customers to quickly and easily design cloud blueprints. Blueprints define both the required resources and the relationship between resources in the cloud infrastructure. Join with us NOW!!

Round 1

Initial design for client review (Screen 02 and 03)

Round 2

All requirements as stated in challenge details with client feedback applied

Background Information
Our company is developing a Cloud Orchestration Engine application that provisions and configures cloud resources. Right now, we are looking to build a HTML5 GUI Composer which will be part of the Cloud Orchestration Engine that will enable customers to quickly and easily design cloud Blueprints by simply using drag and drop features for mapping the cloud resources. Blueprints define both the required resources and the relationship between resources. Blueprints will be rendered in a DSL for deployment using our Cloud Orchestration Engine.

We need your help to come up with a design concepts for the GUI composer UI/UX, and specifically on how the application can be use by the customer.

Customer will be able to perform the following in the GUI composer :
- Create new Blueprint from Template (Tile)
- Design application Blueprint with dependencies using GUI composer
- Save the Blueprint (structured text file)
- Load Blueprint (from structured text file)
- Save_As Blueprint (Copy/Clone)
- Delete Blueprint

User Scenario
Refer to Mockups.pdf to get a better idea for the interactions.
1. John is a Blueprint Cloud Designers and wants to build new cloud resource/infrastructure for his company.
2. He open the Cloud Orchestration Engine app to build the cloud blueprints for his company.
3. From the application landing page, he will click on the Blueprint menu Item to enter the catalog area of the application.
4. From the Blueprint catalog area, John will select to create a NEW Template or MODIFY an existing Blueprint.
5. Design a workload by drag/drop VM/Template/App objects onto the canvas.
6. Describe any Dependencies between Nodes (VMs) such as DEPENDS_ON.
7. Drag an Application Object onto an existing VM.
8. Enter 'property' details for Swim Lane/Template/App.
9. Save Blueprint or Deploy.

Branding Guidelines
- Follow style, colors and font that available in Landing_Page.png & infront_colors.pdf
- Desktop: 1280px as width and height as required
- Tablet : 1024px as width and height as required

Design Considerations
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- 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
- The blueprints screen uses a fluid layout that automatically sizes and arranges tiles to suit the rendering device (Responsive)
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images related to this concept.

Required Pages/Screen Interactions :
We are looking for the below pages to be designed/considered in your concepts.
NOTE: We had provided the wireframe to help you understand the flow of screens (Mockup.pdf)

01. Landing Page
- Mockup.pdf, page 1-3.
- User will have an access to the blueprint catalog in the menu item from this page.
- There are 3 view needed in this page, they are list (Mockup page 1), Tile East/West (Mockup page 2), and Tile North/South (Mockup page 3).
- In tiles view, user will be able to drag and drop icon placements for customised layout, after doing the placement, apps will saved it automatically. The purpose is to improve the UX for user.
- There are 3 types elements can be seen in this screen, they are Template, Blueprints and Workloads (Mockup page 3). Each elements needs to have different and unique graphic style for the icons so user can easily differentiate the category.  

02. Create new Blueprint from an Existing Template
- In the apps, user will be able to create a new blueprint from an existing template so that blueprints do not need to be created from scratch each time.   
- To create a new blueprint from an existing template the designer will select the template from landing page and choose "New" (if the templates are displayed in list view then the "New" button in the action column will be selected, in tile view user click the graphic icons)  
- A new blueprint with predefined properties (Swim lanes, etc) will be created on the GUI Composer canvas.  
- The new blueprint will be named Untitled (can be editable).

03. Design application Blueprint with dependencies using GUI composer pages
- The GUI composer must consist of the following elements :
* A canvas to map the cloud resources,
* General menus and navigation pane,
* Small live thumbnails preview to see the whole canvas and
* Item tabs (VMs, Apps, Properties).
- As a blueprint designer, user want to be able to build blueprints in a graphical and intuitive manner.  
- The included mockup provides detail on the layout and functionality of the GUI composer (mockup.pdf page 4-7).
- Since user using template and not create the blueprint from scratch, the canvas cannot be an empty, follow mockup page 4 for the canvas content.
- Clicking on an item/node in the Composer canvas will make that node the context node for the composer.  
- The composer will use a visual cue to identify the context node.  
- Properties of the Context node will be displayed in the properties tab.  
- The properties of the context node can be edited.   
- The canvas should have zoom in/out function so user can see the blueprint easily.
- There are 3 tabs in the GUI Composer, they are VMs, Apps, and Properties tab :
* VMs tab - templates and VM's are listed in alphabetical order.  
* Application tab - Application Services and Appliances are listed in alphabetical.
* Properties tab - showing details of context node.
- The side menu bar should be collapsible when not in use.

Items in the GUI Composer (Create the icons) :
* Dependencies
- User will be able to connected / create relationships between nodes in the GUI composer.
- Relationships between nodes will be represented by lines connecting nodes.
- There are two initial dependencies: Depends_ON & Connected_TO (Out of Scope for the POC)
- For a Depends_ON relationship an arrow head will point to the node that is being depended upon.
- Relationship lines must have "Auto-arrange" functionality that ensures the lines do not overlay nodes.
- The context node can be deleted, and all associated dependencies, from the canvas by clicking on the "delete" key

* Virtual Machines
- VM nodes can exist as standalone items and they also support Application Services.  
- Only Application Services with Operating System requirements compatible with the VM can be "dropped" on the VM.
 
* Application Services
- Application services must be "dropped" onto a VM node on the canvas - they cannot exist as a standalone item in the composer.  
- Application services can only be "dropped" onto a VM that has an Operating System that is compatible with the application.
- Application services items do not support other items being "dropped" on them.
 
* Appliances
- Appliances must exist as standalone nodes on the canvas - they cannot be "dropped" onto a VM node, nor do they support application services.
 
Interactions needed in the GUI Composer (Create the interaction screens) :
- Save, user needs to be able to save changes made to the blueprint. To save a blueprint choose "save" from within the composer. The blueprint will be saved to a structured text file (DSL rendering is out of scope).  If the blueprint does not yet have a name, the designer is prompted for this information. Provide us a save box confirmation.
- Load Blueprint, User needs to be able to load an existing blueprint so that he can view the blueprint and optionally make changes to the blueprint.  To load a blueprint select the blueprint tile and choose "Load". The load function will interpret the structured text file and re-render the design on the canvas.  If the blueprints are displayed in list view, then the designer will load the blueprint by clicking "Load" button in the action column of the blueprint.
- Save As Blueprint, User needs to be able to save a blueprint under a different name. To save a blueprint under a different name the designer will select the "Save As" option - the designer will be prompted for a new name.
- Share Blueprint, User needs to be able to share a blueprint with another designer.  Sharing a blueprint with another designer results in a copy of the blueprint being created in the other designer's blueprint catalog.  To share a blueprint the system will prompt for the designer to enter details of the people the blueprint is to be shared with.
- Publish Blueprint, User neeeds to be able to Publish a blueprint as a Template so that it is available as a Global template (appears as a NEW template in the catalog).
- Easily Identify NEW catalog templates, When a new Template is published a visual cue needs to identify that a new Template has been added to the Catalog.

Target Audience
There will be two types of users:
1. Operational Teams, System Admins will use the Composer to build blueprints that will move existing VMs into the cloud or instantiate NEW VMs using a corporate SOE (Template).  Application Services such as SQL can be installed on either resource (VM or Template).
2. Development Teams, Application developers will use the Composer to build blueprints that model Application Development Frameworks (VM + Service).  These blueprints can be used to enable rapid deployment for testing and development purposes.

Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Your design should translate and make sense for both desktop and tablet devices (responsive).
- 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
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.