IIN - API Storefront Portal Design Challenge

Welcome to "IIN - API Storefront Portal Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX for our new API Storefront portal. This portal will allow IIN Participants (Institutions/Users) to access relevant APIs. Participants can test, subscribe, and use APIs that are available in the web store. 

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!

Round 1

Submit your initial design for a Checkpoint Feedback
01) Landing Page
02) Login Page
03) Dashboard Page
04) API List Page
05) API Details Page
06) API Subscription/Integration Page
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt. 
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01) Landing Page
02) Login Page
03) Dashboard Page
04) API List Page
05) API Details Page
06) API Subscription/Integration Page
07) Report Page
08) Help Page
09) API Upload Page
10) Manage API Page 
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
BACKGROUND OVERVIEW

• The Interbank Information Network (IIN) offers services to IIN Participants to securely exchange information with each other
• An IIN Participant can be a Financial Institution or Multinational Corporation
• Services are offered via standalone web applications or through API connectivity
• As IIN grows its API offering across multiple applications/services, we require a consolidated view into all API services that are available to IIN Participants 
• IIN is expanding their API Capabilities across multiple platforms and programming languages
• Each application will have a distinct set of API's
• Institutions may leverage a variety of code formats to integrate with their back end systems (e.g. Java, Curl)
• As more APIs become available, IIN Participants will need to easily search for different types of APIs
• In this challenge, we want to:
  • Create an API storefront that allows IIN Participants to access relevant APIs
  • Provide descriptive and technical information on available API products and services 
  • Enable IIN Participants to test API code and subscribe to new API services

CHALLENGE GOAL

• Create the best UI/UX for a single repository application for accessing APIs and information for both business users and technical developers (IIN Participants)

DESIGN CONSIDERATION

• Simple, Clean, Professional, and Intuitive look and feel
• Simplicity to find any necessary information 
• Must be extremely user-friendly and intuitive, the user should never ask “what do I do next?”
• Best Practice for Responsive Web (Focus on Desktop for now)
• Easy to understand the flow from page to page
• Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)

CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=677655

USER WORKFLOW

• IIN Participant user navigates to IIN API store via a web browser where the user is able to view all APIs that are available to their institution
• User can view the API's their institution is currently subscribed to as well as view more information/test code for other API's available to their institution
• User must have an ability to test out code and subscribe to API services

OBJECTIVES

• Provide IIN Participants with a single repository for accessing API information for both business users as well as technical developers
• Show available API services that the institution has not yet subscribed to

SCREEN REQUIREMENTS
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.

01) Landing Page

• Think of this page as marketing page that will be showing the potential of this API StoreFront
• Need content that will attract User/IIN Participants to use this portal and actively engage with it
• Please feel free to be creative here!

02) Login Page

• To be able to use this portal's full features, user/IIN Participants need to login to the portal
• Ordinary login form required here, with some error control if user enters the wrong login credentials 
• Forgot password action? Registration?
• Non logged in user will be able to view Landing page, API Listing page, API details page, but in read-only mode (only view information, unable to test/subscribe/etc, to use the portal in full features, they need to login first)

03) Dashboard Page

• Show all user/IIN Participants log activity status summary in the application 
• Variation screens needed for first time user (no API subscribed) and existing user (some APIs subscribed)
• Recommendation of sets of APIs to create a fully working application for the user institution?
• Show APIs currently used, the API status, which applications the user’s institution are connected via API, etc 
• Instant subscribe to available API?
• List of potential APIs for the user’s institution
• List of most popular APIs
• Notification about API status or incoming maintenance, API’s updates schedule, etc?
• Show us your ideas for the best dashboard page!

04) API List Page

• User/IIN Participants will be able to view all API products available in the storefront
• Visual distinction between the API services that the institution is already leveraging vs. other API services that are available to that institution
• API Service Description - a few sentences describing what the API does
• Ability to categorize / tab APIs with a certain filter (e.g. Billing, Payments)
• The ability for a user to search for APIs based on filter
• Ability to categorize APIs that have a relation with their institution
• Ability to categorize APIs by type
• Some visual (icons/graphic) that visually describe the API’s capability
• Participants/User may leverage a variety of code formats to integrate with their back end systems (e.g. Java, Curl)
• As more APIs become available, IIN Participants will require a way to easily search for different types of API's

05) API Details Page

• User/IIN Participants will be able to drill down and see more information about specific APIs:
  • Background (mandatory) - API Service Description
  • Provider (mandatory) - name(s) of who is providing the service
  • Contact information (mandatory) - name/email address of API contact at the provider institution
  • Key Features/Benefits (mandatory) - field to list all benefits of the service
  • Use Cases (optional) - ability to provide additional business context or examples
  • Rating (optional) - view rating of the API
  • Total downloads (mandatory) - display totals number of downloads
  • API Specification (mandatory) - (1) view parameters of the API code, (2) provide IIN Participant users the ability to test out the code, (3) allow user to translate code into multiple languages (e.g. Javascript, java, perl, python, etc.), (4) provide an example for participant users to view, and (5) show a list of error code status / reason (need to make sure API specs include input/output schema definition)
  • Test Section: to simulate request response with some sample values
• By drilling down into each API service, the Participants/User is able to view a description of the service and view technical API components
• Non logged in user can access this page but with limited functionality (only able to see API information - read only access - need to create this screen)
• User should be able to check the API status and its log history
• What kind of applications that can use this API
• User will be able to view sample code to test with integration into their back end systems
• User will be able to see notification about API updates schedule
• Need to have section where user can see tag related to the API Products

06) API Subscription/Integration Page

• User/Participant should be able to subscribe to API services
• This page only available for user that have account and already logged in to the application 
• User needs to login to be able to subscribe into the specific API
• Show your suggestions on how to handle the subscription flow (subscription status, paid/free, subscribe for how long, show status for which plan the subscription has been made and when it is expiring)
• Sample from Stripe:

07) Report Page

• Ability to view at a IIN platform level the number of IIN Participants using each API service and the number of API calls that are made since inception and on a regular cadence (e.g. daily, monthly) 

08) Help Page

• FAQ
• Download documentation Manual 
• Videos Help
• Contact Us Form

09) API Upload Page

• This screen is for a developer that wants to upload their API into the Storefront (marketplace)
• The developer needs to fill and explain their API Products (same content as shown in API Details page above)
• Need to have a screen where a developer can upload/set their API products into the store

10) Manage API Page 

• This screen is for Admin and Developer where they can manage API related to them.
• The developer will be able to manage their API (edit their API information, disable it, delete it, etc)
• Admin will be able to manage all APIs (Review and Approve new API, See API Status performance in Storefront/marketplace, See API Information, etc)  

Important:

• Keep things consistent. This means all graphics styles should work together.
• All of the graphics should have a similar feel and general aesthetic appearance

 
MARVEL PROTOTYPE

• IMPORTANT!! Make sure your design is clickable to demonstrate the flow, this will be a plus point in the review phase
• We need you to upload your screens to Marvel App
• Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot) 
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

 
BRANDING GUIDELINES

• B2B friendly, more for a business audience less consumer. Primary users will be business users or technology developers from an institution
• Needs to be ADA compliant
• Font, Colors, Style selections are open to Designers (make sure it meet the B2B and ADA compliant request above)

DOCUMENTATION

• Sample API store.pdf (screenshot of sample visual API store for REFERENCES)

TARGET DEVICE

• Web/Desktop: 1366px width with Height adjusted accordingly

TARGET AUDIENCES

• IIN Participants:
  • Business users: care about the background key features and use cases for each API
  • Developers: care about the integration, data model, API specifications and error codes

JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • Overall idea and execution of concepts
  • How well does your design align with the objectives of the challenge
  • Execution and thoughtfulness put into solving the problem
  • Marvel clickable interactions!
  • The overall design and user experience
  • Cleanliness of screen design and user flow
  • Ease of use

 
SUBMISSION AND 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 image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback

 
Source Files

• All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as editable layer

 
FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors