Challenge Summary
Welcome to ModulTrade - Responsive Website Concept Design Challenge.
ModulTrade is introducing a trade ecosystem where micro, small and medium enterprises can meet, commit and execute trade globally, affordably and trustfully, avoiding the common complexity of trade-related operations. We need your help to come up with a design solution that helps making our 3-step trade process simple and convenient for our end users (meeting, committing and executing a trade ~ see our website).
Best of luck!
2. Meet: Marketplaces
3. Meet: Create Proposal (Desktop and Mobile views)
4. Commit: Negotiate and Conclude a Contract (Desktop view only)
6. Execute: Additional Services (Desktop view only)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Login/Register
2. Meet: Marketplaces
3. Meet: Create Proposal
4. Commit: Negotiate and Conclude a Contract
5. Commit: Follow Up
6. Execute: Additional Services
7. Execute: Payment Service
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to create a design solution for a responsive website that clearly shows the workflows and the look and feel of the ModulTrade front-end processes.
You are provided with workflows and user stories to take as reference when creating your solution. We’re looking forward to seeing innovative ideas around the flow and best practices to engage the user into a smooth experience through the whole process. You’re encouraged to think out of the box and come up with alternative proposals to those flows.
Design Goals
ModulTrade should be regarded as the “all you need to trade” solution, i.e. a collection of core features and addon functionality (plugins) for buyers and sellers to meet, commit to a trade (e.g. negotiate contract terms, sign a contract) and execute a trade (e.g. initiate money transfer, provide tracking number, follow up trade execution, act on exceptions and order additional services that are outside the trade flow). These steps should be simple to perform.
One of the main goals is to have a design solution that proposes an efficient, user-friendly, clear and convenient implementation of the 3 major steps of the Modultrade process (see flow diagrams attached):
1. Meet.
2. Commit.
3. Execute.
We expect you to think critical, be creative, look beyond borders, but also be reasonable and pragmatic. As for the style, it should convey the feeling of reliability, truthfulness, easy and efficient to use and finally happiness. See attached corporate style guide for reference.
User Roles & General Workflow
There are two users that interact in the application: buyer and seller. See attached diagram for reference. It’s worth to highlight again that this is the initial vision and you are encouraged to propose an alternative solution.
- Seller can generate a “Trade with ModulTrade” link through the ModulTrade website/marketplace. Some sellers have their own webstores where they post quotes for goods they supply, others use marketplaces like indiamart or ebay. Sellers would place the generated ModulTrade link in their webstores so buyers can choose to trade using ModulTrade service (something like “Pay with Paypal”).
- Buyer chooses a seller (through the mentioned links above (MT marketplace/ 3rd marketplaces/ sellers webstores).
- Buyer can negotiate certain parts of a contract, e.g. the trade price, volume, terms and conditions (e.g. delivery date, payment date, etc.).
- Buyer/Seller can have several round of negotiation until they reach an agreement and commit to the terms agreed.
- Buyer/Seller can choose and use additional 3rd party services needed for trade execution. It should happen in the screen "Execute" (for example buy logistics services, tax or accounting services, etc).
- Buyer/Seller can sign the contract (digitally).
- Once an agreement is achieved, buyer can accept/execute the transaction. Buyer can also reject seller's counterproposal, just like seller can reject buyer's. So at some point both parties have identical actions available to them.
- Buyer/Seller can monitor the contract execution.
Screens Requirements
Overall
- The laid out screen requirements below are an initial approach. It’s not mandatory to follow them, it just showcases the importance of the overall process: meet, commit and execute. Again, you are encouraged to group the features and flow in the way you consider would benefit the most the process goal.
- Your solution must showcase the workflow of both users, seller and buyer.
- During the whole process your pages should include ModulTrade logo with standard layout that can be reusable (common header, footer, multi-language switch support, login/logout).
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Login/Register (applicable to buyer and seller)
User should be able to login/register in the site to use the ModulTrade services.
User should be requested for email and password. User should be able to login through LinkedIn or Google.
2. Meet: Create Proposal (applicable to seller)
This is the first step in a trade process for a seller who wishes to sell via ModulTrade platform.
You can think of a proposal as an unsigned contract. Seller can specify initial terms of the contract such as:
- Company and legal address.
- Type of goods sold and amount.
- Price.
- Other terms and conditions.
There should be an action somewhere to take the user to “Add Additional Services” (requirement #6).
After filling the fields the seller presses a “generate” button/link to get a html code snippet of “Trade with ModulTrade” button which they can embed into external webstores/marketplaces of their choice. In addition, the published good appears on ModulTrade internal marketplace (step 3).
This is a good sample of legal document creation process. We would like some intuitive process for this.
3. Meet: Marketplaces (applicable for buyer)
This is the first step in a trade process for a buyer. User gets to see a public internal marketplace of ModulTrade. It is a catalog page, accessible by everyone, but usable by buyers.
User can see/interact with proposals published by ModulTrade sellers. On this category/section, user would see proposals with its corresponding publisher information (MT seller), details and action button to start the trade.
User can see/interact with proposals published by external sellers to MT (partners). On this category/section, user would also see proposals with its corresponding publisher information (MT seller), details and action button to start the trade.
For both scenarios, when buyer clicks “Trade with ModulTrade” button (on MT or 3rd marketplaces), he is asked to register or log in (step 1) unless already logged in the system. Otherwise, buyer initiates negotiation over a contract (step 4).
This page should be ModulTrade branded.
4. Commit: Negotiate and Conclude a Contract (applicable for both)
The goal of this part of the workflow is to reach mutual agreement to transact (i.e. both parties are ready to conclude a contract) through several steps and features. An authenticated Buyer or Seller can perform actions to negotiate the terms.
- User can receive notifications of each other’s activities/changes .
- User can accept initial contract proposal by clicking "Accept". If “Accept” is clicked, the trade contract is created and registered into the ModulTrade smart-contract blockchain platform. User should be notified and also provided with an option to print the final/accepted document.
- If “Reject” is clicked, the process ends. User involved would be notified of the declining decision.
- In case user wants to engage into contract negotiation (e.g. propose different price, volume, delivery or payment dates, other terms and conditions of a contract) he clicks "Counter-propose".
- After initiating a counter-proposal, basically user can modify the fields of the initial contract, so then the seller (initial contract creator) could see the proposed changes.
- Please note that we used price, volume, dates as an example of the fields that can be negotiated, but you can decide yourself what exact fields you want to show as negotiable and how to show them. We want a demo of a concept and the exact fields matter less as long as they are reasonable.
This is an example of the process while MT solution will be easier to use ~ https://www.youtube.com/watch?v=2fgNJ8uVILg&feature=youtu.be
Outcome of this process: confirmation that contract is concluded, confirmation that funds are blocked on the Buyer's account (credit card or e-wallet).
5. Commit: Follow Up (applicable for both)
This would be some sort of light dashboard or management page where Buyer and Seller can:
- See a prominent action link that takes users to Proposal creation (“Create Proposal”, step 2).
- See a listing of all contracts engaged into.
- View details of each contract. In the details view the user can see the “Add Additional Services” action.
- Respective contract terms and statuses. For proposals: draft, negotiation. For contracts: Initiated, Paid, Delivered, Delivery Exception, Terminated, Completed.
- Expected time of completion
- Link to order/purchase additional 3rd party services (just create the links to the actions):
-- Obtain financing.
-- Create customs declarations.
-- Create tax declarations.
-- Buy insurance.
6. Execute: Additional Services - a platform for 3rd party trade related service
The goal of this process is to allow choosing additional services from partners to help execute trade transaction such as payments, accounting, invoicing, financing, etc. Also, every user can place an offer for trade related service.
This screen should present a list of services to choose from, for example:
- Payments.
- Logistic service.
- Insurance
- Tax.
- Bookkeeping.
- Custom Declarations.
If “Custom Declarations” are selected, user should see a filled in PDF (the PDF itself is out of scope, create a mockup/dummy placeholder) based on the description of goods/services in the contract between a seller and a buyer. User should be able to download or print this added service (PDF).
All additional services should include a related pricing. In this case, we’re using ModulTrade coin called “MTR”. Example, Adding Custom Declarations costs 10 MTR, user should be aware and confirm payment.
7. Execute: Payment Service
Payment confirmation of a contract and additional services added to a contract. Basically, completion of #4.
User should want to work with MTR as it allows easily to pay for goods and services.
Users should be taken through a payment process, allowing the entrance of payment options to buy the required MTR for the chosen goods or services.
Users have options to work with Business credit cards, MTR (ModulTrade crypto coin), other cryptocurrencies.
User should be prompted with credit card details, e-wallet details, billing address, etc. As well as a visible summary of what he is paying for.
Display this workflow through some screens.
Branding Guidelines
- Follow color palette and branding of the website overall. Your concept branding should feel part of the same family, but feel free to deviate in certain parts if you strongly believe it is worth it.
- Primary font for titles and subtitles should be the same as the logo, Montserrat. We recommend using another font for body text/content. See more information in the attached guideline.
- Logo provided.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop source files: 1280dp width. Height as much as needed.
- Mobile source files: 375dp width. Height as much as needed.
- Exported JPG/PNG screens must be delivered at @1x and @2x. In case of desktop, it would be 1280px (@1x) and 2560px (@2x). In case of mobile, it would be 375px (@1x) and 750px (@2x).
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
SMEs (Small and Medium-sized Enterprises) engaged in B2B trade, with focus on cross-border trade of goods and services.
Judging Criteria
- Does the application implement the desired steps in the trade process (meet, commit, execute) in a convenient way?
- Does the application create the feeling of adding value?
- Does the application feel trustable?
- Is the application easy to use?
- Does the application create a feeling of efficiency.
- The views can be smoothly integrated into existing ModulTrade website .
- Are mobile-first considerations appropriately applied to the design concept?
- Cleanliness of your graphics and design.
- The design follows the branding guidelines.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
ModulTrade is introducing a trade ecosystem where micro, small and medium enterprises can meet, commit and execute trade globally, affordably and trustfully, avoiding the common complexity of trade-related operations. We need your help to come up with a design solution that helps making our 3-step trade process simple and convenient for our end users (meeting, committing and executing a trade ~ see our website).
Best of luck!
Round 1
Submit your design for a checkpoint feedback.2. Meet: Marketplaces
3. Meet: Create Proposal (Desktop and Mobile views)
4. Commit: Negotiate and Conclude a Contract (Desktop view only)
6. Execute: Additional Services (Desktop view only)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback (ALL VIEWS ~ Desktop and Mobile).1. Login/Register
2. Meet: Marketplaces
3. Meet: Create Proposal
4. Commit: Negotiate and Conclude a Contract
5. Commit: Follow Up
6. Execute: Additional Services
7. Execute: Payment Service
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to create a design solution for a responsive website that clearly shows the workflows and the look and feel of the ModulTrade front-end processes.
You are provided with workflows and user stories to take as reference when creating your solution. We’re looking forward to seeing innovative ideas around the flow and best practices to engage the user into a smooth experience through the whole process. You’re encouraged to think out of the box and come up with alternative proposals to those flows.
Design Goals
ModulTrade should be regarded as the “all you need to trade” solution, i.e. a collection of core features and addon functionality (plugins) for buyers and sellers to meet, commit to a trade (e.g. negotiate contract terms, sign a contract) and execute a trade (e.g. initiate money transfer, provide tracking number, follow up trade execution, act on exceptions and order additional services that are outside the trade flow). These steps should be simple to perform.
One of the main goals is to have a design solution that proposes an efficient, user-friendly, clear and convenient implementation of the 3 major steps of the Modultrade process (see flow diagrams attached):
1. Meet.
2. Commit.
3. Execute.
We expect you to think critical, be creative, look beyond borders, but also be reasonable and pragmatic. As for the style, it should convey the feeling of reliability, truthfulness, easy and efficient to use and finally happiness. See attached corporate style guide for reference.
User Roles & General Workflow
There are two users that interact in the application: buyer and seller. See attached diagram for reference. It’s worth to highlight again that this is the initial vision and you are encouraged to propose an alternative solution.
- Seller can generate a “Trade with ModulTrade” link through the ModulTrade website/marketplace. Some sellers have their own webstores where they post quotes for goods they supply, others use marketplaces like indiamart or ebay. Sellers would place the generated ModulTrade link in their webstores so buyers can choose to trade using ModulTrade service (something like “Pay with Paypal”).
- Buyer chooses a seller (through the mentioned links above (MT marketplace/ 3rd marketplaces/ sellers webstores).
- Buyer can negotiate certain parts of a contract, e.g. the trade price, volume, terms and conditions (e.g. delivery date, payment date, etc.).
- Buyer/Seller can have several round of negotiation until they reach an agreement and commit to the terms agreed.
- Buyer/Seller can choose and use additional 3rd party services needed for trade execution. It should happen in the screen "Execute" (for example buy logistics services, tax or accounting services, etc).
- Buyer/Seller can sign the contract (digitally).
- Once an agreement is achieved, buyer can accept/execute the transaction. Buyer can also reject seller's counterproposal, just like seller can reject buyer's. So at some point both parties have identical actions available to them.
- Buyer/Seller can monitor the contract execution.
Screens Requirements
Overall
- The laid out screen requirements below are an initial approach. It’s not mandatory to follow them, it just showcases the importance of the overall process: meet, commit and execute. Again, you are encouraged to group the features and flow in the way you consider would benefit the most the process goal.
- Your solution must showcase the workflow of both users, seller and buyer.
- During the whole process your pages should include ModulTrade logo with standard layout that can be reusable (common header, footer, multi-language switch support, login/logout).
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Login/Register (applicable to buyer and seller)
User should be able to login/register in the site to use the ModulTrade services.
User should be requested for email and password. User should be able to login through LinkedIn or Google.
2. Meet: Create Proposal (applicable to seller)
This is the first step in a trade process for a seller who wishes to sell via ModulTrade platform.
You can think of a proposal as an unsigned contract. Seller can specify initial terms of the contract such as:
- Company and legal address.
- Type of goods sold and amount.
- Price.
- Other terms and conditions.
There should be an action somewhere to take the user to “Add Additional Services” (requirement #6).
After filling the fields the seller presses a “generate” button/link to get a html code snippet of “Trade with ModulTrade” button which they can embed into external webstores/marketplaces of their choice. In addition, the published good appears on ModulTrade internal marketplace (step 3).
This is a good sample of legal document creation process. We would like some intuitive process for this.
3. Meet: Marketplaces (applicable for buyer)
This is the first step in a trade process for a buyer. User gets to see a public internal marketplace of ModulTrade. It is a catalog page, accessible by everyone, but usable by buyers.
User can see/interact with proposals published by ModulTrade sellers. On this category/section, user would see proposals with its corresponding publisher information (MT seller), details and action button to start the trade.
User can see/interact with proposals published by external sellers to MT (partners). On this category/section, user would also see proposals with its corresponding publisher information (MT seller), details and action button to start the trade.
For both scenarios, when buyer clicks “Trade with ModulTrade” button (on MT or 3rd marketplaces), he is asked to register or log in (step 1) unless already logged in the system. Otherwise, buyer initiates negotiation over a contract (step 4).
This page should be ModulTrade branded.
4. Commit: Negotiate and Conclude a Contract (applicable for both)
The goal of this part of the workflow is to reach mutual agreement to transact (i.e. both parties are ready to conclude a contract) through several steps and features. An authenticated Buyer or Seller can perform actions to negotiate the terms.
- User can receive notifications of each other’s activities/changes .
- User can accept initial contract proposal by clicking "Accept". If “Accept” is clicked, the trade contract is created and registered into the ModulTrade smart-contract blockchain platform. User should be notified and also provided with an option to print the final/accepted document.
- If “Reject” is clicked, the process ends. User involved would be notified of the declining decision.
- In case user wants to engage into contract negotiation (e.g. propose different price, volume, delivery or payment dates, other terms and conditions of a contract) he clicks "Counter-propose".
- After initiating a counter-proposal, basically user can modify the fields of the initial contract, so then the seller (initial contract creator) could see the proposed changes.
- Please note that we used price, volume, dates as an example of the fields that can be negotiated, but you can decide yourself what exact fields you want to show as negotiable and how to show them. We want a demo of a concept and the exact fields matter less as long as they are reasonable.
This is an example of the process while MT solution will be easier to use ~ https://www.youtube.com/watch?v=2fgNJ8uVILg&feature=youtu.be
Outcome of this process: confirmation that contract is concluded, confirmation that funds are blocked on the Buyer's account (credit card or e-wallet).
5. Commit: Follow Up (applicable for both)
This would be some sort of light dashboard or management page where Buyer and Seller can:
- See a prominent action link that takes users to Proposal creation (“Create Proposal”, step 2).
- See a listing of all contracts engaged into.
- View details of each contract. In the details view the user can see the “Add Additional Services” action.
- Respective contract terms and statuses. For proposals: draft, negotiation. For contracts: Initiated, Paid, Delivered, Delivery Exception, Terminated, Completed.
- Expected time of completion
- Link to order/purchase additional 3rd party services (just create the links to the actions):
-- Obtain financing.
-- Create customs declarations.
-- Create tax declarations.
-- Buy insurance.
6. Execute: Additional Services - a platform for 3rd party trade related service
The goal of this process is to allow choosing additional services from partners to help execute trade transaction such as payments, accounting, invoicing, financing, etc. Also, every user can place an offer for trade related service.
This screen should present a list of services to choose from, for example:
- Payments.
- Logistic service.
- Insurance
- Tax.
- Bookkeeping.
- Custom Declarations.
If “Custom Declarations” are selected, user should see a filled in PDF (the PDF itself is out of scope, create a mockup/dummy placeholder) based on the description of goods/services in the contract between a seller and a buyer. User should be able to download or print this added service (PDF).
All additional services should include a related pricing. In this case, we’re using ModulTrade coin called “MTR”. Example, Adding Custom Declarations costs 10 MTR, user should be aware and confirm payment.
7. Execute: Payment Service
Payment confirmation of a contract and additional services added to a contract. Basically, completion of #4.
User should want to work with MTR as it allows easily to pay for goods and services.
Users should be taken through a payment process, allowing the entrance of payment options to buy the required MTR for the chosen goods or services.
Users have options to work with Business credit cards, MTR (ModulTrade crypto coin), other cryptocurrencies.
User should be prompted with credit card details, e-wallet details, billing address, etc. As well as a visible summary of what he is paying for.
Display this workflow through some screens.
Branding Guidelines
- Follow color palette and branding of the website overall. Your concept branding should feel part of the same family, but feel free to deviate in certain parts if you strongly believe it is worth it.
- Primary font for titles and subtitles should be the same as the logo, Montserrat. We recommend using another font for body text/content. See more information in the attached guideline.
- Logo provided.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop source files: 1280dp width. Height as much as needed.
- Mobile source files: 375dp width. Height as much as needed.
- Exported JPG/PNG screens must be delivered at @1x and @2x. In case of desktop, it would be 1280px (@1x) and 2560px (@2x). In case of mobile, it would be 375px (@1x) and 750px (@2x).
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
SMEs (Small and Medium-sized Enterprises) engaged in B2B trade, with focus on cross-border trade of goods and services.
Judging Criteria
- Does the application implement the desired steps in the trade process (meet, commit, execute) in a convenient way?
- Does the application create the feeling of adding value?
- Does the application feel trustable?
- Is the application easy to use?
- Does the application create a feeling of efficiency.
- The views can be smoothly integrated into existing ModulTrade website .
- Are mobile-first considerations appropriately applied to the design concept?
- Cleanliness of your graphics and design.
- The design follows the branding guidelines.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.