Challenge Summary
Welcome to "API Marketplace Design Concept Challenge". In this challenge, we need to create several screen/features for our new API Marketplace platform. 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!
1) Login Screen
2) Dashboard Screen
3) Admin Screen
4) New API Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1) Login Screen
2) Dashboard Screen
3) Admin Screen
4) New API Screen
5) Edit ADI Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create several layout screens for our new Marketplace that transforms selected APIs into a Responsive HTML5 driven website. These new screens needs to be intuitive, provides clear and clean UI/UX to the app user.
Challenge Goals
Create the best possible UI/UX for all of the system and process APIs that are being built. This would centralize the library and create a common UI framework.
Use Case
#1 Navigate to get API that was populated via WebApps API
Wireframes "APIMarket-UC1.jpg"
- User logs into API MarketPlace.
- Thumbnail images of each API available to the user is shown.
- When selected the image resizes to show a Title and Description of the API as well as a "RUN" button.
- They click run.
- The window again resizes so the entire API interface is now available. Depending on the API there will be text boxes or dropdowns to detail specific data.
- Click OK to run the API or Clear to reset the paramater input to default.
- Results are showin the same window.
#2 Add a new API to the library
Wireframes "APIMarket-UC2.jpg"
- User logs into API MarketPlace.
- Navigate to the gear icon to open the admin screen. (Only if permissions allow)
- Admin screen pops up showing a list of current APIs available as well as an "Add New API" button.
- After clicking the "Add New API" button the current screen changes showing fields required to create a new API listing.
- Next the new API data will be filled in and accepted.
- The screen will change again to showing the API list with newly added API shaded.
Design Consideration
- We want to focus on Mobile App.
- The rough hand sketch wireframes attached should be used for CONTENT ONLY.
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Easy to understand flow from page to page.
- Each page is not overcrowded with information
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=618632
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.
1) Login Screen
- Simple logo for the API Marketplace
- Ordinary login form (username/password)?
- Register link
- Some slider carousel explaining API Marketplace benefit?
2) Dashboard Screen
- Default screen once user logged in to the App.
- Show all available API for the user.
- The API should be created as card/blocks.
- Each card/block will be represented by a thumbnail that looks like an example of the API purpose itself.
- Each block is defined via RESTful JSON object. (Will place example of JSON here).
- Indicator of API status (Up/Down)
- Show statistic of API usage? Any other features? Show us your ideas!
Use API:
- When one of the API get selected the image resizes to show a Title and Description of the API as well as a "RUN" button.
- Clicking on the block will pop it up in a hover window that allows access to the web app itself.
- The window again resizes so the entire API interface is now available. Depending on the API there will be text boxes or dropdowns to detail specific data.
- Click OK to run the API or Clear to reset the paramater input to default.
- Results are showin the same window.
Request New API:
- User can request new API to their dashboard
- Show list of all API in the marketplace and ability to check their purpose
- "Request" button
- Once the API added, there should be some notification or make the API highlighted so user can notice
3) Admin Screen
- Needs to provide buttons to Add, Edit and Delete APIs.
- This should be created as a list view.
- Ability to check status of API (Up/Down/etc)
- Ability to checking on details of API
- Simplicity to check current users that use the API
4) New API Screen
- Add a new API to the marketplace.
- Navigate to the gear icon to open the admin screen. (Only if permissions allow)
- Requires text fields icon uploads and a submit and cancel button.
5) Edit ADI Screen
- Edit APIs currently within the marketplace.
- The same entry fields should be available that were available in the New API Screen.
Important:
- DO NOT COPY the wireframes, it should be used as your references only
- Keep things consistent. This means allgraphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvelapp request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Documentation
- Wireframes (Rough Sketch)
- API sample data (json format)
Target Device
- iPhone, 750px x 1334px
- Android, 1080px x 1920px
Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Colors: Primary Blue #25408f, Secondary Teal #008396, Hover-over dark grey #7b7b7b
- Font and Style Open to designers
Target Audience
- Internal staff
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 the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Submission & 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/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.
Round 1
Submit your initial design for a Checkpoint Feedback (iPhone + Android)1) Login Screen
2) Dashboard Screen
3) Admin Screen
4) New API Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates (iPhone + Android)1) Login Screen
2) Dashboard Screen
3) Admin Screen
4) New API Screen
5) Edit ADI Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create several layout screens for our new Marketplace that transforms selected APIs into a Responsive HTML5 driven website. These new screens needs to be intuitive, provides clear and clean UI/UX to the app user.
Challenge Goals
Create the best possible UI/UX for all of the system and process APIs that are being built. This would centralize the library and create a common UI framework.
Use Case
#1 Navigate to get API that was populated via WebApps API
Wireframes "APIMarket-UC1.jpg"
- User logs into API MarketPlace.
- Thumbnail images of each API available to the user is shown.
- When selected the image resizes to show a Title and Description of the API as well as a "RUN" button.
- They click run.
- The window again resizes so the entire API interface is now available. Depending on the API there will be text boxes or dropdowns to detail specific data.
- Click OK to run the API or Clear to reset the paramater input to default.
- Results are showin the same window.
#2 Add a new API to the library
Wireframes "APIMarket-UC2.jpg"
- User logs into API MarketPlace.
- Navigate to the gear icon to open the admin screen. (Only if permissions allow)
- Admin screen pops up showing a list of current APIs available as well as an "Add New API" button.
- After clicking the "Add New API" button the current screen changes showing fields required to create a new API listing.
- Next the new API data will be filled in and accepted.
- The screen will change again to showing the API list with newly added API shaded.
Design Consideration
- We want to focus on Mobile App.
- The rough hand sketch wireframes attached should be used for CONTENT ONLY.
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Easy to understand flow from page to page.
- Each page is not overcrowded with information
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=618632
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.
1) Login Screen
- Simple logo for the API Marketplace
- Ordinary login form (username/password)?
- Register link
- Some slider carousel explaining API Marketplace benefit?
2) Dashboard Screen
- Default screen once user logged in to the App.
- Show all available API for the user.
- The API should be created as card/blocks.
- Each card/block will be represented by a thumbnail that looks like an example of the API purpose itself.
- Each block is defined via RESTful JSON object. (Will place example of JSON here).
- Indicator of API status (Up/Down)
- Show statistic of API usage? Any other features? Show us your ideas!
Use API:
- When one of the API get selected the image resizes to show a Title and Description of the API as well as a "RUN" button.
- Clicking on the block will pop it up in a hover window that allows access to the web app itself.
- The window again resizes so the entire API interface is now available. Depending on the API there will be text boxes or dropdowns to detail specific data.
- Click OK to run the API or Clear to reset the paramater input to default.
- Results are showin the same window.
Request New API:
- User can request new API to their dashboard
- Show list of all API in the marketplace and ability to check their purpose
- "Request" button
- Once the API added, there should be some notification or make the API highlighted so user can notice
3) Admin Screen
- Needs to provide buttons to Add, Edit and Delete APIs.
- This should be created as a list view.
- Ability to check status of API (Up/Down/etc)
- Ability to checking on details of API
- Simplicity to check current users that use the API
4) New API Screen
- Add a new API to the marketplace.
- Navigate to the gear icon to open the admin screen. (Only if permissions allow)
- Requires text fields icon uploads and a submit and cancel button.
5) Edit ADI Screen
- Edit APIs currently within the marketplace.
- The same entry fields should be available that were available in the New API Screen.
Important:
- DO NOT COPY the wireframes, it should be used as your references only
- Keep things consistent. This means allgraphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvelapp request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Documentation
- Wireframes (Rough Sketch)
- API sample data (json format)
Target Device
- iPhone, 750px x 1334px
- Android, 1080px x 1920px
Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Colors: Primary Blue #25408f, Secondary Teal #008396, Hover-over dark grey #7b7b7b
- Font and Style Open to designers
Target Audience
- Internal staff
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 the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Submission & 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/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.
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.