Challenge Summary
Challenge Summary
Welcome to the Topcoder Bug Hunt Design Challenge!
In this challenge we are looking to create a dashboard to show statistics for Bug Hunt to show the amazing results of our challenges to our clients.
Don't hesitate to post any questions on forums!
1. Dashboard (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1. Dashboard (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Design Problem
Our community is doing a fantastic job identifying and finding bugs in applications as part of our Bug Hunt challenges. Now we need a better way to surface the results to our end clients so they can easily be amazed at the results of our challenges!
In this design competition you will be responsible for create a one page dashboard that will eventually fit into the Connect platform to illustrate the results of one or more bug hunt challenges.
For this challenge, is important you follow the Topcoder Connect GUI KIT and you have to work in Sketch to be able to reuse the components from there. This dashboard page, will stay in Connect so we want to keep consistency across all Connect pages.
Right now we have a similar dashboard for the Marathon Matches, but keep in mind this dashboard MUST match Connect look and feel, so you have to follow the Topcoder Connect GUI KIT and work in Sketch to be able to reuse the components from there. We want to keep consistency across all Connect pages so we have included a couple of design pages in Connect for style reference (widget style, layout etc.)
On this dashboard a user can see the information related to one or more challenges. When a client runs a bug hunt challenge, we want to show him the following data in real time:
We have attached a document with sample data/charts.
Branding
- TC GUI KIT
- Connect Projects Designs
- Data.xls
Stock Artwork & Icons
- Stock photos are allowed for this challenge
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive web:
- Desktop: 1280px width with height adjusted accordingly
- Mobile: 375px width with height adjusted accordingly
Note: you can use same font sizes from desktop to mobile on 375px and then export at 2x size to look good.
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder Customers
- Topcoder Admins
- Topcoder Project Managers
- Topcoder Copilots
Judging Criteria
- How easy is to read are the stats?
- Is the design consistent and follows the UI from desktop designs?
- Hierarchy and organization of content
- Overall design aesthetics
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Sketch. Layers should be named and well organized.
Welcome to the Topcoder Bug Hunt Design Challenge!
In this challenge we are looking to create a dashboard to show statistics for Bug Hunt to show the amazing results of our challenges to our clients.
Don't hesitate to post any questions on forums!
Round 1
Submit your initial design for a Checkpoint Feedback1. Dashboard (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App 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 Updates1. Dashboard (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Design Problem
Our community is doing a fantastic job identifying and finding bugs in applications as part of our Bug Hunt challenges. Now we need a better way to surface the results to our end clients so they can easily be amazed at the results of our challenges!
In this design competition you will be responsible for create a one page dashboard that will eventually fit into the Connect platform to illustrate the results of one or more bug hunt challenges.
For this challenge, is important you follow the Topcoder Connect GUI KIT and you have to work in Sketch to be able to reuse the components from there. This dashboard page, will stay in Connect so we want to keep consistency across all Connect pages.
Right now we have a similar dashboard for the Marathon Matches, but keep in mind this dashboard MUST match Connect look and feel, so you have to follow the Topcoder Connect GUI KIT and work in Sketch to be able to reuse the components from there. We want to keep consistency across all Connect pages so we have included a couple of design pages in Connect for style reference (widget style, layout etc.)
On this dashboard a user can see the information related to one or more challenges. When a client runs a bug hunt challenge, we want to show him the following data in real time:
- Status of the challenge (time frame) number of identified issues, number of accepted issues, # of registrants, # of submitters (similar to the bar on the marathon match)
- Geography Map: to see the locations of all participants around the world, show us a better map with relevant information & coloring on it
- Number of issues by severity (P1, P2, P3, P4,P5): chart (could be a bar chart type, but see what works best)
- Number of issues by browser (Chrome, Firefox, Internet Explorer, Safari): chart (can be a stacked bar chart type, but see what works best)
- Number of issues by status (Open, Accepted, Closed): chart (can be a stacked bar chart type, but see what works best)
- Number of issues by label (Accepted, Accessibility #1, Accessibility #2, Accessibility #3, Accessibility #6, Accessibility #7, Android v.5, Android v.6, Android v.7, Android v.8, Android v.8.1, Can't Reproduce, Crash, Duplicate, Functional, Incomplete, Invalid, UI, UX/Enhancement, UX/Enhancement Accepted, Won't Fix): chart (can be a stacked bar chart type, but see what works best)
We have attached a document with sample data/charts.
Branding
- Colors: is mandatory you follow the exact Topcoder colors from the GUI KIT
- Fonts: use Roboto font as that is the standard font we are using for the new Topcoder site and have the text only in the TC colors (shades of gray).
- Icons: you are free to use stock icons but only from Nucleo.
- Buttons: check the attached html specifications to see the colors and padding you should use for them
- Important: keep all distances as multiple of 5px
- If there is something else you need or have questions, ask the in the forum.
- TC GUI KIT
- Connect Projects Designs
- Data.xls
Stock Artwork & Icons
- Stock photos are allowed for this challenge
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive web:
- Desktop: 1280px width with height adjusted accordingly
- Mobile: 375px width with height adjusted accordingly
Note: you can use same font sizes from desktop to mobile on 375px and then export at 2x size to look good.
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder Customers
- Topcoder Admins
- Topcoder Project Managers
- Topcoder Copilots
Judging Criteria
- How easy is to read are the stats?
- Is the design consistent and follows the UI from desktop designs?
- Hierarchy and organization of content
- Overall design aesthetics
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Sketch. Layers should be named and well organized.
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.