Challenge Summary
Welcome to the “Topcoder Community Filters UI Design Challenge”. In this challenge we are looking to create a great user experience for Desktop and Mobile to quickly filter challenges related to different communities on Topcoder. Your design will be implemented as part of the current Topcoder challenge listing page.
Let us know if you have any questions!
1) Filtering Options on Challenge Listing Page (Desktop & Mobile)
2) Dashboard Updates (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Filtering Options on Challenge Listing Page (Desktop & Mobile)
2) Dashboard Updates (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
On Topcoder we have been creating some communities realated to different technologies such like:
- https://ios.topcoder.com/
- http://predix.topcoder.com/
- http://cognitive.topcoder.com/
Many challenges from different tracks like Studio, Development or Data Science; are related to these communities. Currently our challenge listing page do not have a way to filter and display challenges from those communities. Besides many members are registered to these commnitites but usually do not remember the names or the link access; that's why we need to create a widget on our Topcoder Dashboard so members can easily see on what communities they are registered.
Required Screens
1) Filtering Options on Challenge Listing Page (Desktop & Mobile)
- Basically we need you to update this filter dropdown element: http://take.ms/PX2wM and add a way to filter challenges for different communitites.
- Think on good UI/UX practices, do not make things too much difficult.
- You design should work for both Desktop and Mobile views.
- Use the current challenge listing page as your main layout. https://www.topcoder.com/challenges/
- Follow Topcoder branding. Do not reivent colors.
- Avoid the use of "Lorem ipsum dolor...." or "Dummy..." texts. Use real content from Topcoder.
2) Dashboard Updates (Desktop & Mobile)
- We need you to create a widget on our Dashboard page, so members can easily see on which communities they are registered.
- Think on titles like "My Communities" or "Topcoder Communities" where you list all of them and show on which are registered and which dont. You are free to propose what would be the best here.
- For layout and content reference use your Topcoder dashboard page: https://www.topcoder.com/my-dashboard/
- Follow Topcoder branding. Do not reivent colors.
- Avoid the use of "Lorem ipsum dolor...." or "Dummy..." texts. Use real content from Topcoder.
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use Topcoder current branding and web colors.
- Please use Roboto and Open Sans as your main fonts.
- Focus on the user experience.
- Think mobile first.
Submission Requirements
For all pages we will be very happy if you explore new ideas for improvements and new features! Start with the existing pages from Topcoder, and work your way through them. Analyze what are the current problems and explore possible solutions. Do not remove existing elements unless they are really a problem/not needed (explain why). We will be very happy if you explore new ideas for improvements and suggest new features for all the pages!
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Target Audience:
- Topcoder community members.
Judging Criteria:
- User Experience (30%)
- Cleanliness of your graphics and design. 30%)
- Creative thinking and problem solving (30%)
- How well you create design for Topcoder Challenges Details Page Redesign Application (10%)
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Let us know if you have any questions!
Round 1
Submit your initial designs for a checkpoint feedback:1) Filtering Options on Challenge Listing Page (Desktop & Mobile)
2) Dashboard Updates (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final designs with feedback already implemented:1) Filtering Options on Challenge Listing Page (Desktop & Mobile)
2) Dashboard Updates (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
On Topcoder we have been creating some communities realated to different technologies such like:
- https://ios.topcoder.com/
- http://predix.topcoder.com/
- http://cognitive.topcoder.com/
Many challenges from different tracks like Studio, Development or Data Science; are related to these communities. Currently our challenge listing page do not have a way to filter and display challenges from those communities. Besides many members are registered to these commnitites but usually do not remember the names or the link access; that's why we need to create a widget on our Topcoder Dashboard so members can easily see on what communities they are registered.
Required Screens
1) Filtering Options on Challenge Listing Page (Desktop & Mobile)
- Basically we need you to update this filter dropdown element: http://take.ms/PX2wM and add a way to filter challenges for different communitites.
- Think on good UI/UX practices, do not make things too much difficult.
- You design should work for both Desktop and Mobile views.
- Use the current challenge listing page as your main layout. https://www.topcoder.com/challenges/
- Follow Topcoder branding. Do not reivent colors.
- Avoid the use of "Lorem ipsum dolor...." or "Dummy..." texts. Use real content from Topcoder.
2) Dashboard Updates (Desktop & Mobile)
- We need you to create a widget on our Dashboard page, so members can easily see on which communities they are registered.
- Think on titles like "My Communities" or "Topcoder Communities" where you list all of them and show on which are registered and which dont. You are free to propose what would be the best here.
- For layout and content reference use your Topcoder dashboard page: https://www.topcoder.com/my-dashboard/
- Follow Topcoder branding. Do not reivent colors.
- Avoid the use of "Lorem ipsum dolor...." or "Dummy..." texts. Use real content from Topcoder.
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use Topcoder current branding and web colors.
- Please use Roboto and Open Sans as your main fonts.
- Focus on the user experience.
- Think mobile first.
Submission Requirements
For all pages we will be very happy if you explore new ideas for improvements and new features! Start with the existing pages from Topcoder, and work your way through them. Analyze what are the current problems and explore possible solutions. Do not remove existing elements unless they are really a problem/not needed (explain why). We will be very happy if you explore new ideas for improvements and suggest new features for all the pages!
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Target Audience:
- Topcoder community members.
Judging Criteria:
- User Experience (30%)
- Cleanliness of your graphics and design. 30%)
- Creative thinking and problem solving (30%)
- How well you create design for Topcoder Challenges Details Page Redesign Application (10%)
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.