Challenge Summary
Welcome to the Slingshot Blockchain Lab Platform Design Challenge.
Our global Information Technology and Business process services client, is planning to build a platform that would help their external and internal clients in quickly and easily launching their Blockchain Technology based projects, by offering them pre-defined processes and infrastructure.
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 provided on wireframes. Wireframe content is for reference only. Please do not copy
Round 1
Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.- 1. Dashboard
- 2. Projects
- 2.1. List of Projects
- 3. Create Project
- 3.1. Tech Stack
- 3.2. Code Repo
- 3.3. Templates
- 3.4. Test Environment
- 3.5. Team
- 3.6. Review
Round 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.- 1. PA Dashboard
- 2. Projects
- 2.1. List of Projects
- 2.2 Delete popup
- 2.3. Copy to New popup
- 3. Create Project
- 3.1. Tech Stack
- 3.2. Code Repo
- 3.3. Templates
- 3.4. Test Environment
- 3.5. Team
- 3.6. Review
- 4. Project Details
- 5. Dev Environment
- 5.1. List of Dev Environments
- 5.2. Add Dev Environment
- 6. CI-CD Environment Details (read only for now)
APPLICATION OVERVIEW
- 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
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.
PERSONA
Name: Alice
Occupation: Project Admin at Acme company.
Goals:
- Launch a new Blockchain project.
- Manage the process end to end.
Frustrations:
- There is a short time to engage.
- Not sure what are the best tools and processes out there.
Wants:
- A seamless experience.
- A quick workflow
USER STORY
Alice has a task to launch a new Blockchain project at her company and to manage the whole process from start to successful launching. She registers to the Slingshot Blockchain Lab where she creates the project and adds all the necessary information that is needed to activate the project in Slingshot. She also adds the team to the project and provides developer environments for the team members through the platform.
DESIGN GOALS & PRINCIPLES
- Easy to use interface
- The style should be suitable for an internal enterprise setting
- Branding should be considered
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
- Dev Environment: A virtual machine on the cloud which provides a full-stack environment for development and unit testing.
- Test Environment: Distributed deployment topology for blockchain and offchain components on which the project implementation can be deployed and tested.
SCREENS/FEATURES
Please make sure your design includes the following screens/sections for the Project Admin User. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allows for the same functionality that is shown on the attached wireframes.
Note: The wireframes are for content and function reference only. Please design a unique interface that shows UX best practices, efficient functionality, and a creative visual solution."
1. Dashboard
This is an Admin Dashboard, which will contain
- Draft projects - These are the projects that are created and saved in the database
- Complete projects - These are the projects that are created and being used by the developers
- Blockchain platform statistics - basically, the idea here is one project might use one Blockchain platform and the other project might use another Blockchain platform. So, you need to show those statistics here.
- Provide a view of the Notifications as well (based on the flow below, how a notification would look like?). Client is open to suggestions of the layout of the screen.
2. Projects
2.1. List of Projects
The user will see the list of the projects he/she is engaged with. The projects will have the following statuses:
- Draft: The project has been initiated by the Project Admin and saved as draft.
- Created: The project creation has been finalized.
- Deleted: The project has been deleted.
2.2. Delete popup
Projects can be deleted as well, for which we would like you to create a confirmation screen and a success message as well. After deleting the project, they will still be seen in the system, so the user can create another project with the same settings only by a click on the link, saving a considerable amount of time with this function.
2.3. Copy to New Project
When the user opts for creating a new project based on a deleted one he can add the name of the new project and confirm his will to create a new project. Please provide a success message as well.
3. Create Project
When the user creates a project he will go through a series of steps. He can save the project at any step he likes as a draft. When finished with filling in all the information needed and has reviewed the same once again, he can create the project. It will change status from Draft to Created. The steps the user has to go through while creating the project are as follows:
3.1. Tech Stack
On the first screen of the project creation besides providing a name for the project, the user will have to select the technologies/tools to use by the respective project. He will need to make a decision about the following areas (for content please refer to the wireframe):
- Blockchain Platform
- API Layer
- UI Layer
- Offchain Database
- Other Components
3.2. Code Repo
The user has to add the repositories for the following areas of the project:
- UI Layer
- API Layer
- Blockchain Layer
- Git URL
- Git Credentials
3.3. Test Environment
The user has to specify the test environment as well for the project. For this he can add as many Blockchain organizations as he needs. He can also remove them one by one.
3.4. Templates
The user has an option to select one or more project templates that contain a end-to-end reference implementation for a particular blockchain platform. For the selected blockchain platform there will be one or more template names and their description provided, which will be available for selection.
3.5. Team
At last, the user can specify the team members as well. As a prerequisite, all the team members have to be registered on the Slingshot platform, so the user can select them from a dropdown. He can add as many users as he wants and also be able to remove them. He also has to set if the added members have admin rights and also if they need a cloud test environment assigned to them.
3.5. Review
As the last step, the user will review all the information he has given so far to make sure everything is correct and he can create the project (or still select Save as a Draft). When the project is created all the repos and all the environments are also created. Please provide a success message as well.
4. Project Details
This screen is available for the projects that are not in draft status any more, but have already been created. The details should include all project details (tech stack, code repo, team, organizations for test env etc.)
5. Dev Environment
5.1. List of Dev Environments
This screen shows all the assigned/created and requested Dev Environments that a user with project admin role has created. The user can also provision a new environment directly to a registered developer and an existing project, which will happen on the next screen/popup. The statuses of the items on the list can be as follows:
- Started
- Pending
- Stopped
As the statuses suggest, the actions on the items can be as follows:
- Start
- Stop
- Create
- Delete
- Get Credentials
5.2. Add Dev Environment
On this screen the user will select, from dropdown lists, the project and the developer for which and for whom he wants to create the new dev environment.
6. CI-CD Environment Details (read only for now)
This screen shows all the repo details per created projects. At this stage the client will only implement this screen as read only. Later on they would like to implement actions on this as well, so think about the scalability.
BRANDING GUIDELINES
- Follow the client’s attached branding guidelines.
DESIGN ASSETS
- Wireframes
FINAL DELIVERABLES
- All original source files
- Create files in Adobe Photoshop, Adobe XD or Sketch.
- Marvel Prototype -
- Upload your screens to Marvel App.
- Send your marvel app request to pere.viktoria@gmail.com
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
TARGET DEVICE
- Desktop: 1366px width
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.