Challenge Summary
Welcome to "Supply Chain Blockchain Platform UI Design Challenge", on this challenge you will be working on creating the initial concepts of a responsive web based desktop application platform that will host the Supply Chain Blockchain platform details. It will have 3 main sections:
1) Landing - Live Networks
2) Ready Solutions
3) Custom Development
4) Dashboard
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1) Landing - Live Networks
2) Ready Solutions
3) Custom Development
4) Dashboard
- Important: As part of your final submission, you must update your submission to MarvelApp.
- Use the same MarvelApp prototype you received in checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Project Background
A large company has been leading the way for the next generation of blockchain initiatives across the global supply chain networks. The supply chain network spans across almost all major industries: manufacturing, consumers, healthcare, government/regulatory, insurance, finance etc. and has numerous challenges that can be addressed using blockchain.
We believe that people need to see and hear more about real production-grade blockchain solutions so that they can be convinced of the potential of the technology. This web page will be the home for this company Supply Chain platform to showcase all the success stories, ready-to-use and production-ready solutions and an avenue to incorporate these solutions within their organizations.
Design Problem
The main aim of the site is to engage the visitors with blockchain-related success stories, and to build a new lead generation channel for the company. This challenge also includes a dashboard view to manage all the lead requests coming in from the open website.
Workflow
The overall process can be resumed in the following two steps:
Part 1
This is the key requirement of the challenge. You should focus on creating an interactive webpage to display all its offerings and flexibility. The visitor should be allowed to pick and choose the components they like, and place corresponding requests against them. Please note that this is an open page with no logins, so all the visitor’s choices should be captured in their final contact us form.
There is no restriction on the number of screens as long as the basic purpose of the website is fulfilled. Think of this website as an app store with multiple categories or sections:
Each of the above sections is expected to maintain a parallel running contact us form; with the dynamic selections made by the visitor – across the networks and solutions. The visitor can make any changes to his selections at any time, and upon completion submit the request to the company. Besides all the prior selections, the contact us form will capture the following:
This part involves creating a corresponding screen for the company employees to handle the inflow of the requests from Part 1. The dashboard is login based.
Key Areas to Focus on
- Visitor can browse through the list of existing networks, If they like, they can choose to join one or more of the networks.
- They can also choose to create a new network of their own
- They can then choose one or more ready-made solutions to deploy in their new network
- They can also choose to create a new custom solution specific to their need
- All the details (network and solutions) are dynamically captured, consolidated and submitted to the company along with the Visitor’s details*.
*You as designer are free to recommend the best way to capture and represent these details in the contact form.
- Focus on cleand and minimalist design, a good example of what is expected are the Apple and Google Play store.
- Avoid the usage of too many stocks images and use more stock icons. Try to keep things simple as possible.
Required Screens/Features
While the following screens are a starting point, please feel free to add any other screen that actually improves your UX based on your concept.
1) Landing - Live Networks (Part 1)
A list of successfully deployed blockchain-based supply chain networks, from around the world. The initial view should show a minimum of 8 such networks with a browsing provision for many more as they get added. Each network will have the following basic details:
A. Name of the network: Network A, B, C, etc. (with possible website link)
B. Parties to the network: CorpA, CorpB, CorpB, etc. (can be logos or names or both)
C. Network Owner/Governing Body: CorpA and CorpB (this can either be through some visual cue or a separate text section)
D. Network description (4-5 lines)
E. Option for the visitor to enquire about or join the network; AND/OR request the company to create their own new network
2) Ready Solutions (Part 1)
A list of production-grade ready supply chain solutions. The initial view should show a minimum of 8 such solutions, with a browsing provision for more as they get added. Each solution will have the following basic details:
A. Name of the solution
B. Challenge addressed by the Solution: 3-4 lines
C. Benefits expected by the Solution: 3-4 lines
D. Option for the visitor to either add a combination of solutions to their existing network AND/OR create a new network using a combination of available solutions
3) Custom Development (Part 1)
It will be similar to Ready Solutions where the user can add more customization to the existing solutions. Here the visitor has an option to complement any of their existing selections with any custom solution development requests if they so choose. The visitor will need to enter the following details:
A. Name of the custom solution
B. Challenge they want to address
5) Dashboard (Part 2)
The dashboard will be a ticketing based system where it will have multiple sections, with filter and search options against each field corresponding to that section. Each section should initially show top 10 requests each – with subsequent pagination option.
User agnostic section:
A. New Requests: all new requests from the PART 1 website will be logged in here. It will show the following details:
- Request number (non-editable)
- Client name (non-editable)
- Email ID (non-editable)
- Company name (non-editable)
- Industry (non-editable)
- The user can choose a line item to get more details within it or assign it to self. User should be able to open multiple requests simultaneously across multiple windows.
The user can choose a line item to get more details within it or assign it to self. User should be able to open multiple requests simultaneously across multiple windows.
User assigned specific sections: this has requests assigned specific to the logged-in user.
B. New Networks section: It will have two sub-sections. The user has the option to edit the network details, status, and comments against any of the requests.
B.1 Existing Solutions:
C.1 Existing Solutions:
Each section should be individually downloadable.
The outcome of any search result against any section should be downloadable.
Individual request details with its complete history should be downloadable.
The dashboard should also showcase some visual representation of the red/green/yellow statuses.
Target Users
- Public Access for the customer (Without Login) (Part 1)
- Company Team (With Login) (Part 2)
Form Factors
For this challenge you will be working on creating the design concepts for this form factor:
Responsive Desktop Web Application: Standard 1280px width and height increased if necessary.
The design should be modular so that it can be easily adapted to tablet or mobile devices in the future.
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or XD.
- Marvel Prototype:
We need you to upload your screens to Marvel App.
Please send your marvel app request to challenge copilot in the forum using the correct thread for this.
You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
- Live-Networks section: Hosts a list of successfully running and live networks from around the world. The viewer may choose to either enquire about or join any of the networks.
- Ready solutions section: Hosts a list of ready-made supply chain solutions. The viewer may choose to create a new network using a combination of these solutions.
- Custom development section: The viewer may here request to build a new solution (not already present in the ready-made section) based on their need.
Round 1
For the first round provide the initial designs for the following screens:1) Landing - Live Networks
2) Ready Solutions
3) Custom Development
4) Dashboard
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
For the first round provide the final designs for the following screens:1) Landing - Live Networks
2) Ready Solutions
3) Custom Development
4) Dashboard
- Important: As part of your final submission, you must update your submission to MarvelApp.
- Use the same MarvelApp prototype you received in checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Project Background
A large company has been leading the way for the next generation of blockchain initiatives across the global supply chain networks. The supply chain network spans across almost all major industries: manufacturing, consumers, healthcare, government/regulatory, insurance, finance etc. and has numerous challenges that can be addressed using blockchain.
We believe that people need to see and hear more about real production-grade blockchain solutions so that they can be convinced of the potential of the technology. This web page will be the home for this company Supply Chain platform to showcase all the success stories, ready-to-use and production-ready solutions and an avenue to incorporate these solutions within their organizations.
Design Problem
The main aim of the site is to engage the visitors with blockchain-related success stories, and to build a new lead generation channel for the company. This challenge also includes a dashboard view to manage all the lead requests coming in from the open website.
Workflow
The overall process can be resumed in the following two steps:
Part 1
This is the key requirement of the challenge. You should focus on creating an interactive webpage to display all its offerings and flexibility. The visitor should be allowed to pick and choose the components they like, and place corresponding requests against them. Please note that this is an open page with no logins, so all the visitor’s choices should be captured in their final contact us form.
There is no restriction on the number of screens as long as the basic purpose of the website is fulfilled. Think of this website as an app store with multiple categories or sections:
- Live networks.
- Ready Solutions
- Custom development
Each of the above sections is expected to maintain a parallel running contact us form; with the dynamic selections made by the visitor – across the networks and solutions. The visitor can make any changes to his selections at any time, and upon completion submit the request to the company. Besides all the prior selections, the contact us form will capture the following:
- Name of the visitor
- Company of the visitor
- Email-id of the visitor
- Industry
This part involves creating a corresponding screen for the company employees to handle the inflow of the requests from Part 1. The dashboard is login based.
Key Areas to Focus on
- Visitor can browse through the list of existing networks, If they like, they can choose to join one or more of the networks.
- They can also choose to create a new network of their own
- They can then choose one or more ready-made solutions to deploy in their new network
- They can also choose to create a new custom solution specific to their need
- All the details (network and solutions) are dynamically captured, consolidated and submitted to the company along with the Visitor’s details*.
*You as designer are free to recommend the best way to capture and represent these details in the contact form.
- Focus on cleand and minimalist design, a good example of what is expected are the Apple and Google Play store.
- Avoid the usage of too many stocks images and use more stock icons. Try to keep things simple as possible.
Required Screens/Features
While the following screens are a starting point, please feel free to add any other screen that actually improves your UX based on your concept.
1) Landing - Live Networks (Part 1)
A list of successfully deployed blockchain-based supply chain networks, from around the world. The initial view should show a minimum of 8 such networks with a browsing provision for many more as they get added. Each network will have the following basic details:
A. Name of the network: Network A, B, C, etc. (with possible website link)
B. Parties to the network: CorpA, CorpB, CorpB, etc. (can be logos or names or both)
C. Network Owner/Governing Body: CorpA and CorpB (this can either be through some visual cue or a separate text section)
D. Network description (4-5 lines)
E. Option for the visitor to enquire about or join the network; AND/OR request the company to create their own new network
2) Ready Solutions (Part 1)
A list of production-grade ready supply chain solutions. The initial view should show a minimum of 8 such solutions, with a browsing provision for more as they get added. Each solution will have the following basic details:
A. Name of the solution
B. Challenge addressed by the Solution: 3-4 lines
C. Benefits expected by the Solution: 3-4 lines
D. Option for the visitor to either add a combination of solutions to their existing network AND/OR create a new network using a combination of available solutions
3) Custom Development (Part 1)
It will be similar to Ready Solutions where the user can add more customization to the existing solutions. Here the visitor has an option to complement any of their existing selections with any custom solution development requests if they so choose. The visitor will need to enter the following details:
A. Name of the custom solution
B. Challenge they want to address
5) Dashboard (Part 2)
The dashboard will be a ticketing based system where it will have multiple sections, with filter and search options against each field corresponding to that section. Each section should initially show top 10 requests each – with subsequent pagination option.
User agnostic section:
A. New Requests: all new requests from the PART 1 website will be logged in here. It will show the following details:
- Request number (non-editable)
- Client name (non-editable)
- Email ID (non-editable)
- Company name (non-editable)
- Industry (non-editable)
- The user can choose a line item to get more details within it or assign it to self. User should be able to open multiple requests simultaneously across multiple windows.
The user can choose a line item to get more details within it or assign it to self. User should be able to open multiple requests simultaneously across multiple windows.
User assigned specific sections: this has requests assigned specific to the logged-in user.
B. New Networks section: It will have two sub-sections. The user has the option to edit the network details, status, and comments against any of the requests.
B.1 Existing Solutions:
- Request number (non-editable)
- Client name (non-editable)
- Email ID (non-editable)
- Company name (non-editable)
- Industry (non-editable)
- Solutions (can be multiple)
- Network details
- Network Status (Text + Red/Green/Yellow)
- Solution Status (Text + Red/Green/Yellow) – against each solution line item
- Comments
- History with timestamps
- Request number (non-editable)
- Client name (non-editable)
- Email ID (non-editable)
- Company name (non-editable)
- Industry (non-editable)
- Solutions (can be multiple)
- Network Status (Text + Red/Green/Yellow)
- Solution Status (Text + Red/Green/Yellow) – against each solution line item
- Comments
- History with timestamps
C.1 Existing Solutions:
- Request number (non-editable)
- Client name (non-editable)
- Email ID (non-editable)
- Company name (non-editable)
- Industry (non-editable)
- Solutions (can be multiple)
- Network Details (non-editable)
- Solution Status (Text + Red/Green/Yellow) – against each solution line item
- Comments
- History with timestamps
- Request number (non-editable)
- Client name (non-editable)
- Email ID (non-editable)
- Company name (non-editable)
- Industry (non-editable)
- Solutions (can be multiple)
- Network Details (non-editable)
- Solution Status (Text + Red/Green/Yellow) – against each solution line item
- Comments
- History with timestamps
Each section should be individually downloadable.
The outcome of any search result against any section should be downloadable.
Individual request details with its complete history should be downloadable.
The dashboard should also showcase some visual representation of the red/green/yellow statuses.
Target Users
- Public Access for the customer (Without Login) (Part 1)
- Company Team (With Login) (Part 2)
Form Factors
For this challenge you will be working on creating the design concepts for this form factor:
Responsive Desktop Web Application: Standard 1280px width and height increased if necessary.
The design should be modular so that it can be easily adapted to tablet or mobile devices in the future.
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or XD.
- Marvel Prototype:
We need you to upload your screens to Marvel App.
Please send your marvel app request to challenge copilot in the forum using the correct thread for this.
You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
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.