Challenge Summary
Welcome to “Poseidon Developer Portal Design Concept Challenge”. The goal of this challenge is to design a portal for our customer, Poseidon, where the developers can find how to download and use the Poseidon APIs and SDK.
Overview:
Please read the challenge specification carefully and let us know if you have any questions.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
- Use the same MarvelApp prototype you received in checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt" Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Project Background
Background Information
Our client, Poseidon is a is a cloud-based digital payment solution that makes it easy for their customers to make payments, collect rewards on purchases and send money to friends and family. Now, they are looking to create a platform where the developers can search for the APIs and SDKs and see guides on how to use them to create applications.
An API (Application Programming Interface) is used for building an application software. It contains a set of clearly defined functions/ methods for communication between different software components.
A SDK (Software Development Kit) is a toolbox that contains libraries, components, APIs, rules for developing software. EasuUse make the SDKs available to developers in order to help them easily integrate with their services.
Below are the screens we would like to tackle for this workflow. This is a concept challenge, so feel free to improve as you see fit each of these pages content.
To use as inspiration you can check several developers sites who are planned with the same scope in mind.
Keep in mind we are looking for your ideas and creativity here on how best to design this site!
1. Landing Page
When the user lands on this page he should get an overview of what the entire portal is about and how he can use it at the best. The following sections should be displayed:
2. APIs List
This page will include all existing APIs with grouped by the category:
This page will include an option for the user to get his API Key. In order to get the API Key, the user will have to subscribe to a payment plan. This will be a separate page.
Each API will include the following details:
The developers has the option to search for a specific API by name or filter the list of APIs by Category or User Type. The Users to use this application are:
3. API Details
Where the user goes into the details of an API he will see the following:
The Mobile app developer will be downloading the Poseidon iOS and/or Android SDKs to develop a mobile app for one of Poseidon's customers. The Systems Integrator (SI) will be integrating the Poseidon platform with our APIs on behalf of a Poseidon customer.
4. Get API Key
In order to get the API Key, the user will have to subscribe to a payment plan. This will be a separate page.
This will include the following information:
How to buy:
1. Create your account
5. Blog
The blog page will have a list of articles related to APIs where the user can search / filter for a specific article. Each article will include:
6. Article Details
As the user wishes to read more, he will get into the details of an article and here he will see the same details as above with the entire content for the article. In addition to this he will also be able to get to recent/ related blog articles.
7. Forums
The forums will contain a list of threads opened by developers on various topics (can be grouped by category). You can use as reference this example. Each thread will include:
The user will have the option to search for a thread of filter by category and he can also go into the thread details to see what that is about, or comment on it or upvote.
8. Support
On support page, the user can see frequently asked questions and he can also email support in case he didn’t find his answer there.
9. Login
This page includes the fields of email and password for the user to input his credentials. In addition he can also reset his password and has the option to register (in case he didn’t do it before) and can subscribe to receive notifications.
10. My Projects (logged-in user)
Once he logged in, the user can see a list of existing projects he has created and the status they are in. This will basically be a table with the following fields: project name, status, role (eg. full access), creation date, certificate status. The user will also have the option to create a new project.
11. Create New Project (logged-in user)
At the top of this page, there should be a mention that the user has to get his own private key to start creating a project. That will be a link to Get API Key page.
To create a new project the user will have to go through selecting few APIs. You can use this example for the content.
12. Project Details (logged-in user)
The user can see the details of the previously created project in non-editable form (you can see an example here of an option to display the page, but it’s totally up to you how you show it).
13. Account Settings
While the user is still logged in he can edit his username, password, change his email address or update his notifications preference on this page.
Branding Guidelines
The style of the portal should follow the site branding elements.
Target Audience
Poseidon Developers
Judging Criteria
Your submission will be judged on the following criteria:
Size:
Stock Photography and Icons
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 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 colours) or modify overall colours.
Overview:
- User interface design
- 11-15 unique screens
- Responsive web application
Please read the challenge specification carefully and let us know if you have any questions.
Round 1
Submit your initial designs for checkpoint review of the following pages:- Landing Page
- APIs List
- API Details
- Get API Key
- Blog
- Article Details
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final designs plus checkpoint feedback implemented for:- Landing Page
- APIs List
- API Details
- Get API Key
- Blog
- Article Details
- Forums
- Support
- Login
- My Projects (logged-in user)
- Create New Project (logged-in user)
- Project Details (logged-in user)
- Account Settings (logged-in user)
- Use the same MarvelApp prototype you received in checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt" Important!
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03).
Project Background
- The purpose of this project is to develop a portal where Poseidon developers can come and find the APIs they need easily to develop the mobile apps.
- The developers will also have the option to create their own account and make a new project or ask questions on forums
- The portal will include a Blog page, with several articles which have the purpose to guide the developers even more
Background Information
Our client, Poseidon is a is a cloud-based digital payment solution that makes it easy for their customers to make payments, collect rewards on purchases and send money to friends and family. Now, they are looking to create a platform where the developers can search for the APIs and SDKs and see guides on how to use them to create applications.
An API (Application Programming Interface) is used for building an application software. It contains a set of clearly defined functions/ methods for communication between different software components.
A SDK (Software Development Kit) is a toolbox that contains libraries, components, APIs, rules for developing software. EasuUse make the SDKs available to developers in order to help them easily integrate with their services.
Below are the screens we would like to tackle for this workflow. This is a concept challenge, so feel free to improve as you see fit each of these pages content.
To use as inspiration you can check several developers sites who are planned with the same scope in mind.
Keep in mind we are looking for your ideas and creativity here on how best to design this site!
1. Landing Page
When the user lands on this page he should get an overview of what the entire portal is about and how he can use it at the best. The following sections should be displayed:
- Logo: Poseidon Developer Center (just create a simple logo)
- Menu: Home, APIs, Blogs, Forums, Login, Search option
- APIs Categories
- Latest Blog Articles (and option to see them all)
- Have a Question? / Ask Support
- Option to download the Poseidon SDK
- Anything else?
2. APIs List
This page will include all existing APIs with grouped by the category:
- Commercial
- Data & Analytics
- Identity and Security
- Offers and Benefits
- Payment Methods
- Loyalty Points
- Trials
This page will include an option for the user to get his API Key. In order to get the API Key, the user will have to subscribe to a payment plan. This will be a separate page.
Each API will include the following details:
- API Name
- Short Description
- Overview Link
- Documentation Link
The developers has the option to search for a specific API by name or filter the list of APIs by Category or User Type. The Users to use this application are:
- Poseidon Clients
- Merchant
- Developer
3. API Details
Where the user goes into the details of an API he will see the following:
- API name
- Short description - 1-2 lines
- Pricing
- Who is the user this API can be used by (acquirer, issuers, merchant, mobile developer, systems integrator)
- Option to start a project with this API and View Documentation
- Option to download the API
- Detailed description of the API
- Key features of the API
- How does it work
- Anything else to add and make this page more exciting? Up to you!
The Mobile app developer will be downloading the Poseidon iOS and/or Android SDKs to develop a mobile app for one of Poseidon's customers. The Systems Integrator (SI) will be integrating the Poseidon platform with our APIs on behalf of a Poseidon customer.
4. Get API Key
In order to get the API Key, the user will have to subscribe to a payment plan. This will be a separate page.
This will include the following information:
How to buy:
1. Create your account
- Signing up with your email and set up your subscription.
- Get your API keys in ‘API keys’ tab of your settings
2. Subscribe
- Choose the appropriate type of subscription in the Price-list and tap ‘Subscribe’ OR sign in and subscribe on the ‘Billing plans’ section.
- We accept:
- Payment through LPC
- Credit card or debit card
- Wire transfer (for a long-term subscription, please contact our support team for details)
- We do not accept:
- Checks
- Cash
3. Activate an API key
The API key is activated automatically within a couple of hours after we receive a payment from you.
We send you a confirmation email with API endpoints and helpful information.
NOTE! We strongly recommend you to use your unique API key {appid=} in each JSON call. It helps us to authorise a request from your application and process it appropriately.
4. Other useful information
The API key is activated automatically within a couple of hours after we receive a payment from you.
We send you a confirmation email with API endpoints and helpful information.
NOTE! We strongly recommend you to use your unique API key {appid=} in each JSON call. It helps us to authorise a request from your application and process it appropriately.
4. Other useful information
5. Blog
The blog page will have a list of articles related to APIs where the user can search / filter for a specific article. Each article will include:
- Article title
- Preview image
- Short description of the article
- 1-2 sentences from the beginning of the article
- Author
- The number of likes and comments
- The user should have the option to read more details of the article
6. Article Details
As the user wishes to read more, he will get into the details of an article and here he will see the same details as above with the entire content for the article. In addition to this he will also be able to get to recent/ related blog articles.
7. Forums
The forums will contain a list of threads opened by developers on various topics (can be grouped by category). You can use as reference this example. Each thread will include:
- Thread title
- Short description
- Status - answered/ unanswered
- Number of views and comments
- Author
- Date
The user will have the option to search for a thread of filter by category and he can also go into the thread details to see what that is about, or comment on it or upvote.
8. Support
On support page, the user can see frequently asked questions and he can also email support in case he didn’t find his answer there.
9. Login
This page includes the fields of email and password for the user to input his credentials. In addition he can also reset his password and has the option to register (in case he didn’t do it before) and can subscribe to receive notifications.
10. My Projects (logged-in user)
Once he logged in, the user can see a list of existing projects he has created and the status they are in. This will basically be a table with the following fields: project name, status, role (eg. full access), creation date, certificate status. The user will also have the option to create a new project.
11. Create New Project (logged-in user)
At the top of this page, there should be a mention that the user has to get his own private key to start creating a project. That will be a link to Get API Key page.
To create a new project the user will have to go through selecting few APIs. You can use this example for the content.
12. Project Details (logged-in user)
The user can see the details of the previously created project in non-editable form (you can see an example here of an option to display the page, but it’s totally up to you how you show it).
13. Account Settings
While the user is still logged in he can edit his username, password, change his email address or update his notifications preference on this page.
Branding Guidelines
The style of the portal should follow the site branding elements.
Target Audience
Poseidon Developers
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- Cleanliness of screen design and user flow
- How easy to use is for the developers to find the API they need and how easy they understand to use it
Size:
- Responsive web design: 1200 px width x height as much as needed
Stock Photography and Icons
- You can use stock photography as icons as per Topcoder Rules.
MarvelApp Presentation
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30108356
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
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 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 colours) or modify overall colours.
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.