Challenge Summary
Welcome to the "Banks API Marketplace - Customer Flow - Design Challenge". This is the fourth 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. Moving forward, we are looking for the best designs for the customer screens in this challenge.
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
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 provide 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.
The developed applications then will be offered to the FI’s clients through the marketplace in a searchable fashion throughout several categories.
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.
User Story
Daniela likes travelling, so she is planning a trip with her friends. She realised that her bank now offers applications regarding not only financial services but also a large variety of travel related services among others. To make organising easier she registers to her banks app store and browsing for related applications, like weather forecast, bookings, currency converters, etc. She downloads the right apps, so she can prepare the best trip ever.
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 App Store
This is the home of all the apps offered. The user can either get here by searching for a keyword - so it also serves as a search result page - or by navigating here. Please consider the already designed screens for this one as well. Please provide the following elements:
03 App Details
The App Details screen will provide a more detailed understanding of the application for the user. Think of any app stores, what information is being shared. Please consider the previous challenges’ designs when designing this screen to make sure that the layouts and styles would work together. The app store will offer apps that are available on other app stores so the Downoad button will take the user to an external link. We would like to see at least the following information on this screen:
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
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.
- 4 desktop screens of 1366px width with interactions.
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 provide 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.
The developed applications then will be offered to the FI’s clients through the marketplace in a searchable fashion throughout several categories.
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.
- to allow customers search and download applications developed.
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: 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: In 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
Daniela likes travelling, so she is planning a trip with her friends. She realised that her bank now offers applications regarding not only financial services but also a large variety of travel related services among others. To make organising easier she registers to her banks app store and browsing for related applications, like weather forecast, bookings, currency converters, etc. She downloads the right apps, so she can prepare the best trip ever.
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 Customer Dashboard
This is the landing page of the marketplace for the customers of the financial institution, who would like to search for, learn about and download applications (that have been published by developers using APIs). The dashboard should include the following elements:
This is the landing page of the marketplace for the customers of the financial institution, who would like to search for, learn about and download applications (that have been published by developers using APIs). The dashboard should include the following elements:
- Global Navigation with links to the Dashboard, the App Store, My Applications and Support.
- Banner for promotion
- App Cards in 3 groups: top rated apps, recommended apps, most popular apps. The cards should at least show the name and logo of the app, price if any, the date of publishing and the rating. We are looking forward to your further ideas regarding the content of the app cards. What information would help the customer in selecting/finding the apps they are looking for? Please consider the cards designed in the previous challenges.
- Search: Provide a search feature so the user can start to browse the apps if the suggested ones are not adequate.
02 App Store
This is the home of all the apps offered. The user can either get here by searching for a keyword - so it also serves as a search result page - or by navigating here. Please consider the already designed screens for this one as well. Please provide the following elements:
- Provide a filter function so that the user can refine the search results.
- App cards, similar to those on the Dashboard.
03 App Details
The App Details screen will provide a more detailed understanding of the application for the user. Think of any app stores, what information is being shared. Please consider the previous challenges’ designs when designing this screen to make sure that the layouts and styles would work together. The app store will offer apps that are available on other app stores so the Downoad button will take the user to an external link. We would like to see at least the following information on this screen:
- Name of the app
- Logo of the app
- Short description
- Rating
- Screenshots
- Detailed description
- Reviews with rating filter
- Price or free tag
- Download button
- Related apps (cards)
Please consider the below guidelines during your design process:
- You have to follow our client’s branding guidelines.
- We are sharing the previous designs for the same platform on the forum.
- Stock photos and stock icons are allowed from the approved sources.
Target Audience
- Bank clients
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.
- How well it works with the previous challenges' designs.
- 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.