Challenge Summary
Welcome to "Acme Supply Chain Platform UI Design Challenge", on this challenge you will be working on creating the initial designs of a responsive web based desktop application platform that serve as a modular, customizable, industry agnostic Blockchain based platform for supply chains of the future.
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!
01 Landing Page
03 Dashboard
04 Network
05 Create Network
- 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.)
01 Landing Page
02 Login / Registration Forms
03 Dashboard
04 Network
05 Create Network
06 Deployments
07 Solutions & Business Modules
- 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
CHALLENGE OBJECTIVES
You will work on designing the high fidelity user interfaces for a web based desktop application that will use blockchain based technology for supply chains of the future. While this will be a responsive web based application, you will be focused on creating only the desktop interfaces, have in mind that mobile screens might be required in the future.
AUDIENCE
Enterprise customers that work directly on companies from different fields such like: TPL, Manufacturer, Distributer, Warehouse Retailer, Service Provider, etc.
DESIGN GOALS & PRINCIPLES
Below are some of the goals:
USER STORY
REQUIRED FEATURES
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters):
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:
01 Landing Page
This the first screen that user sees once lands on this application
We need to provide the following links in the main navigation menu. Please notice that we are not designing these pages:
Provide a simple and elegant infographic for “Product Monitoring and Traceability” using the sample content provided in the mockup. (Check forum for supporting material)
There are 4 main call to actions in this page:
02 Login / Registration Forms
These two pages can have the same UI design but the information shown in the forms will be a bit different:
Login
Sign Up
Once the user successfully access this application they should be able to see a dashboard look like page with this information:
04 Network
Users can access this page to filter and see the full data of a network. There are 3 ways to filter this information:
Each of these filter parameters will show/hide different information or actions based on the chosen criteria. For eg. Network initiators and founding organizations have the same functionalities like Invite members, Exit Consortium, Change pricing plans, deactivate users and change business modules. Network members have options like exit consortium, Propose new solutions.
The tabular data to represent the networks are:
Users should be able to expand each network to see the full information and available actions to perform.
In expandable or detail view, they should able to see following information
From this page the users can also launch the “Create Network” section.
05 Create Network
This section will allow users to create new networks. It is basically splitted in a 3 steps wizard style feature. Even when the wireframes are shown as a modal page, you can explore better UX solutions for this.
The 3 steps to create a network are divided like this:
06 Deployments
Once a user “joins” a consortium by accepting an invitation, they will be able to see the “log” of that action on this page.
This log style page, will provide the user with extra information about the network just joined and will be able to see technical information such as API, server credentials, etc.
This is just a view only page. No actions required here. But keep a filter for showing networks as initiator and as a member of a particular org.
For content please refer to the wireframe page. (Check forum for supporting material)
07 Solutions & Business Modules
This page serves as a setup panel to enable or disable the different business modules and applications available to each network.
Have in mind that users might be able to quickly perform these actions by receiving invitations from other organizations, so the notification panel should be also visible and accessible from these pages.
They need to take actions based on the role they have on each network.
For eg. As an initiator or founding org, they can change business ad solutions. Also they can approve or reject if someone else on his network proposed new business and solutions.
As a member of an organization, they can propose new business and solutions.
IMPORTANT
Wireframe attached is very basic and just for understanding the flow. Do not copy. Please come up with a better workflow for this problem.
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
Please use the branding guidelines provided in the forum.
You need to work with these colors only. DO NOT ADD new colors beyond the ones detailed in the branding material.
Also provided reference screenshots for branding purpose.
REFERENCES & WIREFRAME
We are providing (in forum) two screens from a previous project that might help you understand what the client is expecting. DO NOT COPY these designs, use them as reference only.
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
Desktop: 1440px (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, XD, Sketch, or Figma and saved as an editable layer
Declaration File
Declaration files document contains the following information:
FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths
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!
Round 1
Submit your initial designs for the checkpoint review. Feel free to add any screens which are necessary to explain your concept01 Landing Page
03 Dashboard
04 Network
05 Create Network
- 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 Landing Page
02 Login / Registration Forms
03 Dashboard
04 Network
05 Create Network
06 Deployments
07 Solutions & Business Modules
- 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
CHALLENGE OBJECTIVES
- The purpose of this project is to develop a desktop application that will be used as Product Monitoring & Traceability Platform.
- The objective of the project is to design a modern and intuitive responsive web application.
- Improve the UX beyond the wireframes.
- 7 Screens.
You will work on designing the high fidelity user interfaces for a web based desktop application that will use blockchain based technology for supply chains of the future. While this will be a responsive web based application, you will be focused on creating only the desktop interfaces, have in mind that mobile screens might be required in the future.
AUDIENCE
Enterprise customers that work directly on companies from different fields such like: TPL, Manufacturer, Distributer, Warehouse Retailer, Service Provider, etc.
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
- Developer friendly and easy to build designs
USER STORY
- Alice is a global company leader. She accesses this web application and sees what it has to offer with the information from the landing page.
- She is interested and joins the app by registering and fulfilling her company information.
- Alice uses this application to connect with other companies and consortiums.
- Alice starts by creating networks with other companies and consortiums.
- She also receives invitations to connect with other companies and consortiums. These invitations arrive through a notification panel.
- Alice can track important details from other other companies and consortiums by accessing the deployments section page.
- Same user has multiple user roles (Initiator, Founding Org Member and Network Member) depending upon the scenario.
REQUIRED FEATURES
- Intuitive experience for end customers
- Developer friendly and easy to build designs
- Improve the UX beyond the provided wireframes
- Layouts should be easy to translate to a mobile design in the future
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters):
- Creativity: 8
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
- Aesthetics: 10
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
- Exploration: 8
- 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: 5
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
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:
01 Landing Page
This the first screen that user sees once lands on this application
We need to provide the following links in the main navigation menu. Please notice that we are not designing these pages:
- Solutions : Cold Chain Tracking, Product Provenance, Anti Counterfeiting
- Industries: Healthcare, Manufacturing, CPG, Food Services
- Platform Services: Ecosystem Services, Advisory & Consulting, Application Services
Provide a simple and elegant infographic for “Product Monitoring and Traceability” using the sample content provided in the mockup. (Check forum for supporting material)
There are 4 main call to actions in this page:
- Access demo
- Sign up (Registration)
- Sign in (Login)
- Contact us
02 Login / Registration Forms
These two pages can have the same UI design but the information shown in the forms will be a bit different:
Login
- Password
- Need the “Login via verifiable credentials” button. Do not need to design any flow for this.
Sign Up
- Organization Name
- Organization Address
- Organization Account Email Address
- Password
- Organization Type (Dropdown)
- Manufacturer
- TPL
- Distributer
- Warehouse Retailer
- Service Provider
Once the user successfully access this application they should be able to see a dashboard look like page with this information:
- Consortium summary
- Notifications
- Top 5 members
- Consortium networks. This can be a grid, list or a combination of both. There is not a minimum number or maximum number of networks. So design having in mind that users might have from one to hundreds networks connections.
- We have two types of networks listed in this page. Network created by them and the network which they were invited to join. It will be good if you differentiate both in various colors.
- There should view all networks option, which will redirect them to the network page.
- Use the content provided in the wireframe page. (Check forum for supporting material)
04 Network
Users can access this page to filter and see the full data of a network. There are 3 ways to filter this information:
- As a network Initiator
- As a Founding Organization
- As a network member
Each of these filter parameters will show/hide different information or actions based on the chosen criteria. For eg. Network initiators and founding organizations have the same functionalities like Invite members, Exit Consortium, Change pricing plans, deactivate users and change business modules. Network members have options like exit consortium, Propose new solutions.
The tabular data to represent the networks are:
- Network name
- Purpose
- Founding organization
- Organization type
- # participants
- Created date
Users should be able to expand each network to see the full information and available actions to perform.
In expandable or detail view, they should able to see following information
- Description
- Solution and Business Modules. Users should be able to edit/change or propose based upon network type. It will redirect them to solution and Business module page and they need to enter justification comments
- Pricing plan (Basic, Standard, Premium)
- Region
From this page the users can also launch the “Create Network” section.
05 Create Network
This section will allow users to create new networks. It is basically splitted in a 3 steps wizard style feature. Even when the wireframes are shown as a modal page, you can explore better UX solutions for this.
The 3 steps to create a network are divided like this:
- Consortium information
- Application setup
- Invite members
06 Deployments
Once a user “joins” a consortium by accepting an invitation, they will be able to see the “log” of that action on this page.
This log style page, will provide the user with extra information about the network just joined and will be able to see technical information such as API, server credentials, etc.
This is just a view only page. No actions required here. But keep a filter for showing networks as initiator and as a member of a particular org.
For content please refer to the wireframe page. (Check forum for supporting material)
07 Solutions & Business Modules
This page serves as a setup panel to enable or disable the different business modules and applications available to each network.
Have in mind that users might be able to quickly perform these actions by receiving invitations from other organizations, so the notification panel should be also visible and accessible from these pages.
They need to take actions based on the role they have on each network.
For eg. As an initiator or founding org, they can change business ad solutions. Also they can approve or reject if someone else on his network proposed new business and solutions.
As a member of an organization, they can propose new business and solutions.
IMPORTANT
Wireframe attached is very basic and just for understanding the flow. Do not copy. Please come up with a better workflow for this problem.
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
Please use the branding guidelines provided in the forum.
You need to work with these colors only. DO NOT ADD new colors beyond the ones detailed in the branding material.
Also provided reference screenshots for branding purpose.
REFERENCES & WIREFRAME
We are providing (in forum) two screens from a previous project that might help you understand what the client is expecting. DO NOT COPY these designs, use them as reference only.
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
Desktop: 1440px (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, XD, Sketch, or Figma and saved as an editable layer
Declaration File
Declaration files document contains the following information:
- Stock Photos Name and Links from allowed sources
- Stock Art/Icons Name and Links from allowed sources
- Fonts Name and Links source from allowed sources
- 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
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.