Slingshot - Quorum Blockchain Platform Test Environment Design Challenge

Welcome to the Slingshot - Blockchain Lab Platform Test Environment Design Challenge. This is part 3 of the Slingshot project, in the previous challenge - we designed the screens for creating a new test environment for the Hyperledger Fabric blockchain lab platform - in this challenge, we will be designing the test environment for the Quorum blockchain platform.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Challenge Objectives

• Responsive Web Application (this challenge focuses on desktop screens)
• 6 unique Desktop Screen views
• Concept Design

Round 1

Submit your initial designs for the checkpoint review. Feel free to add any screens which are necessary to explain your concept:

01 Create Quorum Test Environment:

• Step 1: Configuration
• Step 2: Map VM
• Step 3: Review

As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs plus checkpoint feedback implemented for the final round. Feel free to add any screens which are necessary to explain your concept:
01 Create Quorum Test Environment:
- Step 1: Configuration
- Step 2: Map VM
- Step 3: Review

02 Quorum Test Environment - DeploymentView
03 Edit Quorum Test Environment
- Add New Node

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

APPLICATION OVERVIEW
Our global Information Technology and Business process services client is planning to build a platform that would help their external and internal clients quickly and easily to launch their Blockchain Technology-based projects, by offering them pre-defined processes and infrastructure.

• The purpose of the platform is to help external and internal clients to quickly and easily create and launch their blockchain-related projects.
• The platform offers several tools, infrastructure, and components that are required from development and testing perspectives that help to execute the Blockchain-based engagement.
• The application essentially has 2 user types, the Project Admins/Architects and the Developers, who are being connected with the cloud offering through a microservices layer

CHALLENGE OBJECTIVES

• To create the user interface of a web application in desktop format.
• To provide a seamless flow to complete user goals.
• To explore the best way to present the content and functionality described in the wireframes.   
• Wireframe content is for reference only. Please do not copy
• Follow the design aesthetics from the existing designs (provided in forums)

AUDIENCE

• External and internal Project Admins/Architects and Developers.
• In this challenge, we are going to cover the Project Admin User’s screens and flow.

DESIGN GOALS & PRINCIPLES
Below are some of the goals:

• Please see the wireframes as well as how the test environment for HLF (Hyperledger blockchain platform) has been put up, you will mostly need to reference all features from this design.
• Engaging and easy-to-navigate UI
• How well does your design align with the objectives of the challenge
• Minimize the total number of screens while keeping the experience intact

EXPLORATION SCORE
Creativity: 4
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 8
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design

Exploration: 9
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application

Branding: 8
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

GLOSSARY 
Most of the terms used in the spec could be new, so we recommend finding the associated meaning for the terms that are not understandable:
https://consensys.net/quorum/developers/

SCREEN REQUIREMENTS
For this challenge, we are looking for the below screens to be created in your submission. The functionality details listed below need to be included in your solution:

We have 3 different blockchain platform: Hyperledger, Quorum, and Croda
For the test environment, screens will be specific to each of these 3 blockchains platforms. For this challenge, we are focussing on creating the test environment for the Quorum Test Environment.

Quorum Test Environment:
01 Create Quorum Test Environment:
(Wireframe Reference: Page 2 in Quorum Wires.pdf)

• Users will be able to choose a version. For eg. Quorum Version 2.3 - from a  drop-down/pre-defined list
• Provide "Save as Draft" option (please see 02_1_4_Create-Test-Env-Configuration.png for reference, this was done for the Hyperledger blockchain platform), so please follow the same
• Use the same wizard kind of features (back and Next buttons) and the steps are shown in the left.

Step 1: Node Configuration

• Show the Network ID (this will be a unique ID that is auto-generated)
• Ask Node name from the user. This should be unique
• Select the Consensus
• Show the list of nodes that were added while creating the project (with node name)
• Each of the Node will have an option to configure
• Other components could include (these components are chosen while creating a project)
  • IPFS
  • Messaging Engine
  • Monitoring
  • Blockchain Load Testing

NOTE: VM Mapping for each component i.e. on which machine the component needs to be installed on is required in Step 2

Configure Option in Node:
(Wireframe Reference: Page 3 in Quorum Wires.pdf)
Should allow the user to enter the following:

• Port: User will need to enter the geth port
• RPC Port: User will need to enter the RPC port
• Wispher Port: User will need to select the Wispher port
• Constellation Port
• RAFT Port
• Node manager port
• Web socket port
• Checkbox asking if user needs “Teserra”
• Checkbox asking if the node is “Master Node”. Only one node can be the master node

Step 2: Map to VM
(Wireframe Reference: Page 4 in Quorum Wires.pdf)

• Once all the configurations have been set up, now they need to map the Quorum nodes to the VM (virtual machine) i.e. this says where they want to deploy the test environment.
• For each of the nodes and components, the user will be able to select an existing VM if they already have one (or) if they don’t have one, then they can choose a subscription-like AWS or Azure that comes along with the slingshot app. You can reference this screen from the HLF Test Environment Screens folder: 02_1_10_1_Create-Test-Env-Map-VM.png, and you can repeat the same options for existing VM and new VM
• If they have an existing VM, then they choose that option and include the below details
  • IP address of the existing VM
  • Private keys
  • Also, provide the option to ping to the IP address in order to check whether the provided IP address is valid or not, if valid: Show a success icon, else show the wrong icon with a message.
• If they don’t have an existing VM, then indicate they can choose the infrastructure provided by slingshot and include the details below once they select this option
  • Select the Cloud: AWS or Azure
  • Select the Region: US, EMEA, Asia, etc
  • Select the Size: “4 CPU, 16GB RAM”, “2 CPU, 8GB RAM”, etc
  • Select Volume
  • Source IP’s: Enter IP address that needs to be whitelisted
  • Port Config: If they want any specific port to be used

Step 3: Review

• Once all the above steps are completed, we show the details from previous sections and also provide the option to edit it.
• When all the details are valid, they could hit a Deploy button to initiate the creation of a test environment
• Once created show a success message / please see the existing design (02_1_12_Create-Test-Env-Review.png) and you can use the same message.

02 Quorum Test Environment - Deployment View:
(Wireframe Reference: Page 7 in Quorum Wires.pdf)
Once the Quorum test environment has been created & deployed, we show the details view.

• Show the details in each and every node.
• Show all the nodes with different components
• Show the IP address of each node
• Show whether they are deployed in their existing VM or an infrastructure that was subscribed in slingshot (could be AWS or Azure)
• Allow the users to download the private key (PPK), this will allow the user to connect directly to the cloud instance
• In addition to the details mentioned below include a way for the user to Edit the test environment

03 Edit Quorum Test Environment:
(Wireframe Reference: Page 8 in Quorum Wires.pdf)

• Editing is almost similar to the create screens, so include all details from the create test environment screens
• In addition to that, the user will also be able to “Add New Node” within this test environment

Add New Node:
(Wireframe Reference: Page 9 in Quorum Wires.pdf)
Below are the details required to add a new node

• Node NameNetwork ID (this is prefilled)
• Port: User will need to enter the geth port
• RPC Port: User will need to enter the RPC port
• Wispher Port: User will need to select the Wispher port
• Constellation Port
• RAFT Port
• Node manager port
• Web socket port
• Checkbox asking if the user needs “Teserra”
• Once the new node is added, it will need to be mapped on the VM, the same process that was followed while creating the test environment needs to be followed here.

IMPORTANT
Keep things consistent. This means all graphics styles should work together
All of the graphics should have a similar feel and general aesthetic appearance

BRANDING GUIDELINES
Follow the design aesthetics from the existing designs.

MARVEL PROTOTYPE
We need you to upload your screens to Marvel App
Please request for marvel app in the challenge forum
You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

TARGET DEVICE
1366px width and height as required

SUBMISSION AND SOURCE FILES
Submission File
Submit all JPG/PNG image files based on Challenge submission requirements stated above

Source File
All source files of all graphics created in either Adobe Photoshop, Illustrator or XD or Sketch or Figma and saved as an editable layer

Declaration File
The declaration files document contains the following information:

• Stock Photos Name and Source Links from an allowed sources
• Stock Art/Icons Name and Source Links from an allowed sources
• Fonts Name and Source Links source from an allowed source
• MarvelApp share link for review

FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths