Challenge Summary
Welcome to the "Bank API Marketplace Part 3 - Provider Flow - Design Challenge". This is the third stage of a series of challenges where we are looking into designing and building a white-label product for an API marketplace solution that our client would like to offer for their financial institution clients like banks. The API marketplace would be used by the financial institutions (FI) to list their own APIs and third-party providers’ APIs as well for developers who will build applications, which will be offered to be used by the FI’s customers.
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
Project Background
Objectives of the Proposed Tool
The goal of this tool is
User Roles
The system has 5 types of users. In this challenge only one, the developer is in scope.
Super Admin: Out of scope. Manages all user and organization permissions. Can see reports of all levels.
Organization admin: In scope. Organizations are entities which are the employers of both the providers and the developers. The bank itself is an organization (internal) and the third party businesses are the external organizations. The Organization admin can manage the users within the organization, can manage the published and/or subscribed APIs, so as the applications they developed. He will be able to see the revenue statistics of the items.
Provider: In scope. An API Provider will be able to upload his APIs to the marketplace, set the subscription term and start selling them. He will be able to see the revenue and consumption reports of only his APIs within the organization he belongs to.
Developer: Out of scope. The developer will be able to search the marketplace for APIs and see the details of those. He will be able to subscribe to the APIs he’d like to use in his developed application(s). He will be able to list his applications on the marketplace for the customers to download.
Customer: Out of scope. The customers will be the end users of the applications developed by the developers, using the APIs they subscribed for. They will be able to search for and download these applications.
User Story
Jack is an API developer, who works for an organization. To be able to offer/sell his APIs he joins the API marketplace and adds his APIs to the system and publishes them, so developers can find and acquire it. Donald is a developer, who works for a travel agency. They would like to develop an app for the agency that will be offered to download by our bank (the owner of the API marketplace) and it would help people to book holidays. This app would offer weather forecast, contacting the agency, payments etc. To be able to include all the functions, Donald will need APIs to handle everything the app needs. Initially, Jonathan, who is the IT manager of the travel agency creates an organization profile on the bank’s API marketplace. Then Donald also registers himself and adds the proposed application to the system. He browses the API marketplaces to find the most suitable ones, like a payment related API published by the bank itself, or APIs for messaging or acquiring weather forecast from external publishers. Once he finds the right APIs he can initiate subscribing to them. If he selects a payable plan, then he has to send a request to Jonathan to confirm the purchase. Once Donald finished his application, he can publish it through the marketplace, so as he can add consecutive versions’ information.
Screen Requirements
For this challenge, we are providing wireframes for you to understand the flow. We would like you to design the following screens. Do not follow or copy the wireframes. It's just for reference. Please use your creativity to design the screens.
02. Create API
The main role of the publisher is to add his APIs to the marketplace to sell. We would like you to create a screen flow for this task. Please note that the below flow is just a suggestion, you might come up with a better organization if you have one.
03. API Details
The API Details screen has already been covered in a previous challenge for the developer role, so you might want to reuse the layout, which should include the following information:
04. Organization Admin Dashboard
The Organization Admin will have an overview of all the APIs that the Providers of his organization uploaded and sell. For this user role, we would like you to come up with a Dashboard. Please note, that the same user can fulfill the role of a provider or a developer at the same time so please provide the necessary switch between the respective roles, dashboards. The user would be able to customize his dashboard. Keeping this in mind, please provide the dashboard with the following items:
Branding Guidelines
Please consider the below guidelines during your design process:
Target Audience
Judging Criteria
Your submission will be judged on the following criteria:
Final Deliverables
All original source files.
Marvel Prototype
We need you to upload your screens to Marvelapp.
Submission & Source Files
Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:
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
- UI design for a responsive web app
- Understand the problem and come up with a great solution.
- Desktop screens of 1366px width.
Round 1
For Round 1 please provide at least the following screens along with hotspots on your prototype.- 01. My APIs
- 02.01. Create API - Upload
- 02.02. Create API - Information
- 02.03. Create API - Documentation Upload
- 02.05. Create API - Subscription Plan
- 04. Organization Admin Dashboard
Round 2
For Round 2 please provide all the following screens along with hotspots on your prototype.- 01. My APIs
- 02.01. Create API - Upload
- 02.02. Create API - Information
- 02.03. Create API - Documentation Upload
- 02.04. Create API - Documentation Edit
- 02.05. Create API - Subscription Plan
- 02.06. Create API - Subscription Plan Edit
- 03. API Details
- 04. Organization Admin Dashboard
Project Background
- Our client offers IT and business process services worldwide for a large range of both leading and emerging businesses, among others for multinational banks. This time our client would like to build a white-label solution for these financial partners, which help them providing an API marketplace for their third-party API providers and developers.
- With the fast growing in the number of APIs (hundreds within an organization) and their availability from different sources makes it harder for application developers to find, and use them.
Objectives of the Proposed Tool
The goal of this tool is
- to provide a one-stop shop for available APIs,
- to help API providers to list their APIs, and make it possible for them to monetize them on a subscription basis
- to help developers search for, find and connect to APIs from the same place with ease along with monitoring their API consumption.
User Roles
The system has 5 types of users. In this challenge only one, the developer is in scope.
Super Admin: Out of scope. Manages all user and organization permissions. Can see reports of all levels.
Organization admin: In scope. Organizations are entities which are the employers of both the providers and the developers. The bank itself is an organization (internal) and the third party businesses are the external organizations. The Organization admin can manage the users within the organization, can manage the published and/or subscribed APIs, so as the applications they developed. He will be able to see the revenue statistics of the items.
Provider: In scope. An API Provider will be able to upload his APIs to the marketplace, set the subscription term and start selling them. He will be able to see the revenue and consumption reports of only his APIs within the organization he belongs to.
Developer: Out of scope. The developer will be able to search the marketplace for APIs and see the details of those. He will be able to subscribe to the APIs he’d like to use in his developed application(s). He will be able to list his applications on the marketplace for the customers to download.
Customer: Out of scope. The customers will be the end users of the applications developed by the developers, using the APIs they subscribed for. They will be able to search for and download these applications.
User Story
Jack is an API developer, who works for an organization. To be able to offer/sell his APIs he joins the API marketplace and adds his APIs to the system and publishes them, so developers can find and acquire it. Donald is a developer, who works for a travel agency. They would like to develop an app for the agency that will be offered to download by our bank (the owner of the API marketplace) and it would help people to book holidays. This app would offer weather forecast, contacting the agency, payments etc. To be able to include all the functions, Donald will need APIs to handle everything the app needs. Initially, Jonathan, who is the IT manager of the travel agency creates an organization profile on the bank’s API marketplace. Then Donald also registers himself and adds the proposed application to the system. He browses the API marketplaces to find the most suitable ones, like a payment related API published by the bank itself, or APIs for messaging or acquiring weather forecast from external publishers. Once he finds the right APIs he can initiate subscribing to them. If he selects a payable plan, then he has to send a request to Jonathan to confirm the purchase. Once Donald finished his application, he can publish it through the marketplace, so as he can add consecutive versions’ information.
Screen Requirements
For this challenge, we are providing wireframes for you to understand the flow. We would like you to design the following screens. Do not follow or copy the wireframes. It's just for reference. Please use your creativity to design the screens.
01. My APIs
The publisher can see all his APIs that have been registered in the system on this screen.
The publisher can see all his APIs that have been registered in the system on this screen.
- We would like to see the APIs on cards along with their names, logos, short descriptions, ratings, comments (with possible indication if there is a new comment), free or paid tags and links to see more details
- The user should be able to initiate uploading new APIs.
02. Create API
The main role of the publisher is to add his APIs to the marketplace to sell. We would like you to create a screen flow for this task. Please note that the below flow is just a suggestion, you might come up with a better organization if you have one.
- 02.01. Upload: The publisher can upload the Swagger/YAML File and the POSTMAN file on this screen and also have an opportunity to see the preview of the Swagger through a plugin (what is Swagger).
- 02.02. Information: The user can enter the basic information about the API here, including:
- API Name
- Context: This is a base url to which all API endpoints are relative
- Version
- Endpoint: This is a URL for an entry point of the API.
- Description
- 02.03. Documentation Upload: The user will be able to add documentation, which can be multiple articles, documents or even video tutorials. He should be able to delete any of the files if he changes his mind. On this screen there are 3 possible ways for the user to add these files as well as the user will be able to see a preview of the actual documentation file immediately:
- Drag & Drop the actual file
- Add it via a URL
- Create it within the app: This is a link to the next screen.
- 02.04. Documentation Edit: This screen provides a common editor, where the user can type in his documentation, insert images, URLs etc.
- 02.05. Subscription Plan: The user would see a default subscription plan with names, descriptions, prices and conditions which the user can edit if he wants.
- 02.06. Subscription Plan Edit: Please provide a way to edit the subscription plan details.
03. API Details
The API Details screen has already been covered in a previous challenge for the developer role, so you might want to reuse the layout, which should include the following information:
- Name of API
- Description
- Publisher name
- Organization name (the publisher belongs to)
- Paid or free tag
- Support contacts (e-mail, phone number)
- Support forum link
- A link to initiate subscription
- A download link (Swagger and POSTMAN)
For the provider role please include the following buttons/links:
- Depreciate
- Unpublish
- Manage Versions
- Edit
04. Organization Admin Dashboard
The Organization Admin will have an overview of all the APIs that the Providers of his organization uploaded and sell. For this user role, we would like you to come up with a Dashboard. Please note, that the same user can fulfill the role of a provider or a developer at the same time so please provide the necessary switch between the respective roles, dashboards. The user would be able to customize his dashboard. Keeping this in mind, please provide the dashboard with the following items:
- Metrics: Provide some KPIs for the user. These widgets will also work as controls for the below charts on click. Sample KPIs could be Total Revenue, Revenue Last Week, Growth.
- Chart(s): Provide meaningful information in the chart area along with a legend and filter for timeline.
Branding Guidelines
Please consider the below guidelines during your design process:
- We are providing the winning design of the first challenge, that you have to follow, so the UI is consistent throughout the whole application.
- You have to follow our client’s branding guidelines.
- Stock photos and stock icons are allowed from the approved sources.
Target Audience
- API and application developers and other IT professionals (as admins).
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts.
- How well do the designs align with the objectives of the challenge.
- Simplicity in the overall design and user experience.
- Cleanliness of screen design and user flow.
- Out of the Box Thinking
Final Deliverables
All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator, Sketch or Adobe XD
- Marvel prototype
Marvel Prototype
We need you to upload your screens to Marvelapp.
- Please send your marvel app request to pere.viktoria@gmail.com
- To be able to showcase your design to the client please provide hotspots on your prototype.
- You MUST include your Marvel app URL in your declarations.txt (in your marvel app prototype, click on share and then copy the link).
Submission & Source Files
Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:
- Source.zip – All original source files.
All source files of all graphics created in vector format in either Adobe Illustrator or any similar software should be saved as editable files.
- Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on the Challenge submission requirements stated above.
- preview.png – Your preview image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
- declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts used, links to the stock images and icons used and the link to your Marvel project.
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.