Challenge Summary
Welcome to the "Bank API Marketplace Part 2 - Developer Flow 2 - Design Challenge". This is the second 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: Out of 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: Out of 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: In 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
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 Application Wizard
The wizard will consist of 2 steps as follows (though if you can come up with a better organization we are open to it):
03. Application Details
Please show the above information (basic and app details form the wizard) in and organized, meaningful way. In addition, the following functions will be offered to the user on this screen:
04. Support
If the user needs some help regarding the platform, first he can browse the FAQ. Please show us how this would look like, with one question open. On this screen we would like to see the following things.
05. Developer Profile
This section will allow the user to see and manage all his information in the system. Please include the following items on these screens:
06. Notifications
Please show us how notifications would look like in the system. Please try to show more types of notifications.
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.03. My Applications - Grid View
- 02.01. Create Application Wizard - Basic Information
- 02.02. Create Application Wizard - App Details
- 03. Application Details
- 04. Support
- 05.01. Developer Profile - Profile Details
Round 2
For Round 2 please provide all the following screens along with hotspots on your prototype.- 01.01. My Applications - Empty State
- 01.02. My Applications - List View
- 01.03. My Applications - Grid View
- 02.01. Create Application Wizard - Basic Information
- 02.02. Create Application Wizard - App Details
- 03. Application Details
- 04. Support
- 05.01. Developer Profile - Profile Details
- 05.02. Developer Profile - Change password
- 05.03. Developer Profile - Manage Notifications
- 06. Notifications
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: Out of 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: Out of 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: In 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
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 Applications
The user will be able to see the list of his applications on this screen. Besides the list he can initiate application creation from this screen.
The user will be able to see the list of his applications on this screen. Besides the list he can initiate application creation from this screen.
- 01.01. Empty state: For the first time user please provide an empty state, when there are no applications added yet.
- 01.02. List View: The user will see all his applications that has already been added to the system. Each record will show the app icon, the name, the creation date, and the actions available for that app. Of course if you feel like something is missing and would be useful to add, do not hesitate to include it. Since the number of applications can be large, please provide pagination for the list.
- 01.03. Card View: The user can switch to a grid view of his applications, which would show the same content in a grid.
02. Create Application Wizard
The wizard will consist of 2 steps as follows (though if you can come up with a better organization we are open to it):
- 02.01. Basic information: On the first screen basic information is to be entered by the user about his new app:
- App name
- Callback URL
- App type (AISP or PISP)
- Icon uploading
- 02.02. App Details: on the second screen the following data is to be entered:
- App description
- App category
- App URL (in case of web app)
- App Update Details (Optional)
- Screenshot(s) Uploading
- App type (Free or Paid)
- Price (if type is paid)
03. Application Details
Please show the above information (basic and app details form the wizard) in and organized, meaningful way. In addition, the following functions will be offered to the user on this screen:
- Unpublish
- Manage Version: when a new version is to be offered be the developer, he can add its information here.
- Edit: The user will be able to edit the application information.
04. Support
If the user needs some help regarding the platform, first he can browse the FAQ. Please show us how this would look like, with one question open. On this screen we would like to see the following things.
- A search function for keywords.
- Categories filter, that would help the user to browse the FAQ.
- A list of common questions.
05. Developer Profile
This section will allow the user to see and manage all his information in the system. Please include the following items on these screens:
- 05.01. Profile Details: Basic information about the user will be shown here
- 05.02. Change password: Here he would be able to change his password
- 05.03. Manage Notifications: The user will be able to set what notifications he would like to get in what regularity and via which tools (in-app, e-mail)
06. Notifications
Please show us how notifications would look like in the system. Please try to show more types of notifications.
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.