Slingshot - Blockchain Lab Platform Test Environment Design Challenge

Welcome to the Slingshot - Blockchain Lab Platform Test Environment Design Challenge. This is part 2 of the Slingshot project, we designed some pages of blockchain lab platform in part 1 of the challenge - we would like to continue designing the remaining screens that will be part of this application.

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 List of Test Environments
02 Create Hyperledger Fabric (HLF) 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 List of Test Environments
02 Create Hyperledger Fabric (HLF) Test Environment:
Step 1: Configuration
Step 2: Map VM
Step 3: Review
03 Hyperledger Fabric Test Environment - Deployment & Network View
03 1 Deployment View
03 2 Network View
04 Edit Hyperledger Fabric Test Environment
 
- 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:

• Elegant, clean, simple, user-centered look and feel with a modern aesthetics
• 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 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://hyperledger-fabric.readthedocs.io/en/latest/glossary.html

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 focusing on creating the test environment for Hyperledger Test Environment.

Hyperledger Test Environment:
01 List of Test Environments
(Page 4 in slingshot wires.pdf)
Once the technical stack is selected a test environment can be selected

• There needs to be a way for the user to:
• Edit or Delete the test environment
• Deploy the test environment
• Manage the organization. This will allow the users to Add or Remove organizations
• Remove Deployment. This will delete the entire test environment
• We don’t want to have “Start & Stop” (as shown in wireframes) in the test environments for now

02 Create Hyperledger Fabric (HLF) Test Environment:
Step 1: Configuration (Page 5 in slingshot wires.pdf)

• There will pre-defined list of projects, and one of the projects needs to be selected for which test environment need to be created.  
• Users will be able to choose a version. For eg. HLF Version 1.4
• Show organizations that were selected during the Project setup. For eg. Suppose the user had chosen 3 blockchain organizations (Org1, Org2 & Org3) during project setup then they will need to be shown here and for each organization will have its own configuration
• Also, provide an option to add or remove organizations
  • Within each organization the user can:
  • Add additional peers and each peer will have an option to configure
  • See the CA node and configure it
    • Clicking on the Settings icon will show this “Enter the number of Users”
  • Decide whether they want to use a couch DB or not (checkbox)
  • DAPP (UI + API): Also, decide if they want to deploy the app within the same organization or not (checkbox)

Settings for step 1, Include specific hyperledger fabric configuration details:

• Should allow the user to add a new Channel, also allow the user to configure the channel, so include a Settings icon for each of the channels that were added. (Page 6 in slingshot wires.pdf)
• Note: Should allow multiple channels to be created        
  • Clicking on the Settings icon within a channel ID should allow the user to configure it further
  • The configuration will allow the user to select which Organization and Peers will be part of that channel.
  • Show peers under each organization and have these four checkboxes “Anchor, Ledger, Endorsing and Chaincode”
• Should allow the user to add a new Orderer, also allow the user to configure the orderer, so include a Settings icon for each of the orderers that were added. (Page 7 in slingshot wires.pdf)
• Note: Should allow multiple orderers to be created         
  • Clicking on the Settings icon within an Orderers should allow the user to configure it further
  • Include these text fields, “Name, ID, Domain”
  • Ordering Service Type “Kafka, Raft”
  • Based on the type chosen additional details need to be entered, in this example “Kafka” has been selected, so please include the below details
  • Have the title as “Kafka Config (4 Kafka brokers and 5 zookeepers)
  • Batch timeout: include a text field
  • Batch Size: “MaxMessageCount, AbsoluteMaxBytes, PreferredMaxBytes”, all these are text fields
  • Consortium Member: Display the list of orgs as checkboxes
  • All these are different components of the test environment
• Each component can be deployed on a dedicated infrastructure

Step 2: Map VM (Page 9 & 10 in slingshot wires.pdf)

• Once all the configurations have been set up, now they need to map the HLF component to the VM (virtual machine) i.e. this says where they want to deploy the test environment.
• For each of the organizations, 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.
• 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 (Page 11 in slingshot wires.pdf), 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 (Page 12 in slingshot wires.pdf)         

• 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
• We need to show an appropriate message to the user once the deployed button is clicked “Test environment creation has been initiated and it will take several minutes to complete the process. You will be notified via email when the test environment has been created. Also, the setup steps as they get completed will be shown as real-time notifications”

03 Hyperledger Fabric Test Environment - Deployment View:
Once the HLF test environment has been created & deployed, we show the details view.

• We show the details of the test environment and provide the user to view the Deployment view
• In addition to the details mentioned below include a way for the user to Edit the test environment

Deployment View (Page 13 in slingshot wires.pdf)     

• Show all the organizations with different components
• Show the IP address of each organization
• 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 

04 Edit Hyperledger Fabric Test Environment (Page 14 in slingshot wires.pdf)         

• Editing is almost similar to the create screens, but the user will be able to only add or remove an organization.
• If any new organization is added then they need to be mapped to the Channel and the Orderers.

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.
- Also we have provided the branding guidelines
 
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 
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