Challenge Summary
Welcome to the FAST Topcoder My Team Concept Design Challenge!
In this challenge we are looking to create a page to show all the team members who will be working on a project for a client. The challenge is open to your ideas so we're looking forward to see the great concepts.
Don't hesitate to post any questions on forums!
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
When a client comes to Topcoder, he can have multiple challenges types launched for his project, or a group of individual members from different tracks can work on it.
We need to explore appealing visuals on what a potential screen of several (15-20) selected members who will work on a project will look like. The goal is to create a screen that represents the breakdown of a team into specific competency domains (designers, front-end developers, back-end developers, QA, data scientists) and skills (Visual, iOS, Android, wireframing, UX; JavaScript, Angular, HTML, CSS; API, AWS, CI/CD, microservices, lambda; Unit tests, structure, unstructured testing,etc.).
As this page will be shown in Connect, we’d like you to create a visually stunning interface that will fit within Connect UI perfectly.
Besides showing the entire team on a page, we’d also like to show additional details about each member when clicking on it, which can be taken from the user’s public profile about their skills or activity or they can show his performance over time on that track. We have attached some examples of information the client likes, please use those as guide, but don’t copy. Also think at the information to show for each track’s member. As this is a concept challenge, we are open to your suggestions on which type of information you’re showing and how you display it.
Actions:
From this page a user should be able to take the following actions:
Requirements:
The interface should:
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.
Branding
Input:
- TC GUI KIT (to re-use components in this project)
- Connect Project Designs (to get an idea of the look and feel of TC Connect)
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
Judging Criteria
- How appealing does the user interface looks ?
- How easy is to read the team information?
- Is the design consistent and follows the GUI 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.
In this challenge we are looking to create a page to show all the team members who will be working on a project for a client. The challenge is open to your ideas so we're looking forward to see the great concepts.
Don't hesitate to post any questions on forums!
Round 1
- My Team (desktop)
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
- My Team (desktop + mobile)
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
When a client comes to Topcoder, he can have multiple challenges types launched for his project, or a group of individual members from different tracks can work on it.
We need to explore appealing visuals on what a potential screen of several (15-20) selected members who will work on a project will look like. The goal is to create a screen that represents the breakdown of a team into specific competency domains (designers, front-end developers, back-end developers, QA, data scientists) and skills (Visual, iOS, Android, wireframing, UX; JavaScript, Angular, HTML, CSS; API, AWS, CI/CD, microservices, lambda; Unit tests, structure, unstructured testing,etc.).
As this page will be shown in Connect, we’d like you to create a visually stunning interface that will fit within Connect UI perfectly.
Besides showing the entire team on a page, we’d also like to show additional details about each member when clicking on it, which can be taken from the user’s public profile about their skills or activity or they can show his performance over time on that track. We have attached some examples of information the client likes, please use those as guide, but don’t copy. Also think at the information to show for each track’s member. As this is a concept challenge, we are open to your suggestions on which type of information you’re showing and how you display it.
Actions:
From this page a user should be able to take the following actions:
- See more details about a member and his performance
- Go to that member’s Topcoder profile page
Requirements:
- Use sample data from member profiles from Topcoder community (you can use the top results per the above technologies or come up with similar).
- Do not design overly unrealistic interfaces; for example - most of TC users do not have a profile picture.
- Do use only the publically available data from the user profiles
The interface should:
- Inspire confidence in the sample team that they are highly specialized at their field
- They can do the job for the customer
- Make the customer to start work with Topcoder
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.
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.
Input:
- TC GUI KIT (to re-use components in this project)
- Connect Project Designs (to get an idea of the look and feel of TC Connect)
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
Judging Criteria
- How appealing does the user interface looks ?
- How easy is to read the team information?
- Is the design consistent and follows the GUI 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.