Submit a solution
The challenge is finished.

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
  • 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:
  • 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)
Branding Guidelines
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
  • 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:
  • – 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. 
  • – 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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.


2020 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "" file.
  3. Place all of your source files into a "" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.


All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit


ID: 30120710