Challenge Summary
How To Compete In This Challenge
Competing in Topcoder design challenges is easy.
• First, register for the challenge by selecting the “Register” button in the top right.
• Second, review this challenge spec which provides details on what you’ll need to design.
• Third, please review this step-by-step guide on competing
Welcome to the Topcoder Community Profile Design Challenge!
In this challenge we are looking to redesign the Topcoder members profile, in the web format, to show the complete range of member’s capabilities. This new layout will accommodate for profile evolution from newbie to veteran member.
1. Member Profile – Designer (newbie and veteran)
2. Member Profile – Developer (newbie and veteran)
3. Member Profile – Data Scientist (newbie and veteran)
4. Member Profile – Algorithmer (newbie and vetera
1. Member Profile – Designer (newbie and veteran)
2. Member Profile – Developer (newbie and veteran)
3. Member Profile – Data Scientist (newbie and veteran)
4. Member Profile – Algorithmer (newbie and veteran)
Background Overview
We want to update and improve the profile system on Topcoder. At this moment we are revising the ideas and we want to reach out to the Topcoder community to provide them with the opportunity to suggest improvements and point out problems with the current profiles. If you want to send us feedback of what is not working and would you like to see updates, please feel free to post a response to the challenge forum! This is your chance to be heard!
As for you the designers, we bring this exciting opportunity to be part of the creation of the new profiles. Help design this new profile which will be used by entire Topcoder community (more than 1 million members) and see your work results on our site every day.
The profile page we have now is looking like this:
Designer: https://www.topcoder.com/members/iamtong/
Developer: https://www.topcoder.com/members/thomaskranitsas/
Data Scientist (Marathon Match track): https://www.topcoder.com/members/wleite/
Algorithmer: https://www.topcoder.com/members/scott_wu/
We want to explore it more by designing specific content modules related to:
1. Biographical data:
2. Challenge performance statistics – overview mode.
If you check the 4 different profiles from above, you will see that each of them is showing specific statistics related to the challenges a user participated, based on their active track.
Explore and see how competitive development (Marathon Matches, SRMs) stats are differently than typical design/development challenges. Explore different ideas to show where the competitor stands in relation to the track (standing from the top, who are the other members with similar ranking, etc.). This is very open for explorations and concepts - we need new fresh crazy ideas, but based on solid thinking about the story behind the data. Do not randomly throw “good looking” graphs if they are not scientifically true.
3. Skills (internal) – this is a new section we want to add. How would you represent the capabilities profile of a user based on the work they did on Topcoder? We had some concepts for Connect and we would like to take those into account and see further development:
- https://marvelapp.com/8fjf8ch/screen/42564229
- https://marvelapp.com/8g30hc7/screen/42765172
- https://marvelapp.com/4841d00/screen/42759447
(We have attached the source files for these designs to this challenge so you can reuse and improve the concepts).
4. Skills (external) – this is the place where we want to connect the Topcoder profile with other skills profiles like Dribbble/Behance for designers, Git for developers, Kaggle for data scientists, Codeforce for algorithmers.
5. Achievements – on Topcoder and outside, a member will take great pride in his achievements and these should be displayed by:
a. Using badges – giving you a couple of examples, but don’t focus too much on designing them as this will be the scope of another challenge
b. Showing TCO achievements, besides showing TCO current points for current period you can also show other achievements as:
c. Publications – some members are writing blog articles or have research publications
d. Other recognitions for working on top projects, being a star member of community, etc.
e. Overall wins numbers
6. Role Responsibilities - certain members achieve status of reviewers, copilots, screeners. Show us how would you represent that on the profile page.
7. Members Activity – allow the members to follow other members and see a feed of their activities. The more followers a member has, the higher is his reputation.
We’d like all users to complete their profile so this would provide members with contractor opportunities as well as show recommended challenges, so this indicator should be visible on the page.
Besides what we have listed here, what features would be beneficial for a profile on Topcoder?
Perhaps show work information or education, hobbies or Topcoder communities the user is part of, languages spoken, etc. What are the things we are missing today and you would like to see? This is a topic open for suggestions. Be creative and offer features that would enhance the value of a profile on Topcoder. We are looking for your ideas here and creativity is one of the main criteria you will be judged for on this challenge.
IMPORTANT: Redesign the profile layout to accommodate for profile evolution from newbies to veterans. Design for desktop only. Aim to build an interesting and easy to read profile page. Think about visual hierarchy, scannability, color, typography. We have to consider that not all profile contain the same amount of data. Your layout system should be modular to allow a profile with minimum data and one with maximum data to both look very good!
Design the profile with all the evolution steps in mind:
1. Seed: newly registered member
2. Sprout: New member with minimum data
3. Budding: Some activity in several tracks, low standing
4. Flowering: Active and following other members, communities, TCO competitor
5. Ripening: Ultimate user profile with advanced roles - copilot, reviewer.
We’d like to see the profile pages designed for a designer, developer, marathon matcher, algorithmer both for newbie level with few data and as well as for veteran member with lots of data who can have advanced roles too.
For this challenge, is important you follow the latest 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 should design your own icons for this challenge. No 3rd party site is allowed. We're looking for icon exploration as well.
- 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 General GUI KIT.sketch (to re-use components in this project). Note: use the attached file as it’s the latest version of the GUI KIT where we have been updated the gray/black colors to new ones.
- Topcoder User Settings.sketch (you can use the header and footer from here)
- My Team Connect Member Profile.sketch (have a start point for the Skills internal section)
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: 1366 px width with height adjusted accordingly
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 Members
- Topcoder Customers
- Topcoder Admins
Judging Criteria
- How easy is to scan for the information on the user profile?
- Does the layout looks good for a new member and a veteran one?
- 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.
Competing in Topcoder design challenges is easy.
• First, register for the challenge by selecting the “Register” button in the top right.
• Second, review this challenge spec which provides details on what you’ll need to design.
• Third, please review this step-by-step guide on competing
Welcome to the Topcoder Community Profile Design Challenge!
In this challenge we are looking to redesign the Topcoder members profile, in the web format, to show the complete range of member’s capabilities. This new layout will accommodate for profile evolution from newbie to veteran member.
Round 1
Submit your initial design for a Checkpoint Feedback1. Member Profile – Designer (newbie and veteran)
2. Member Profile – Developer (newbie and veteran)
3. Member Profile – Data Scientist (newbie and veteran)
4. Member Profile – Algorithmer (newbie and vetera
Round 2
Submit your Final Design plus Checkpoint Updates1. Member Profile – Designer (newbie and veteran)
2. Member Profile – Developer (newbie and veteran)
3. Member Profile – Data Scientist (newbie and veteran)
4. Member Profile – Algorithmer (newbie and veteran)
Background Overview
We want to update and improve the profile system on Topcoder. At this moment we are revising the ideas and we want to reach out to the Topcoder community to provide them with the opportunity to suggest improvements and point out problems with the current profiles. If you want to send us feedback of what is not working and would you like to see updates, please feel free to post a response to the challenge forum! This is your chance to be heard!
As for you the designers, we bring this exciting opportunity to be part of the creation of the new profiles. Help design this new profile which will be used by entire Topcoder community (more than 1 million members) and see your work results on our site every day.
The profile page we have now is looking like this:
Designer: https://www.topcoder.com/members/iamtong/
Developer: https://www.topcoder.com/members/thomaskranitsas/
Data Scientist (Marathon Match track): https://www.topcoder.com/members/wleite/
Algorithmer: https://www.topcoder.com/members/scott_wu/
We want to explore it more by designing specific content modules related to:
1. Biographical data:
a. About
b. Quotes
c. Tags
d. Avatar
e. Country
f. Additional historical data from the profile (last active, account age, location, etc.)
b. Quotes
c. Tags
d. Avatar
e. Country
f. Additional historical data from the profile (last active, account age, location, etc.)
2. Challenge performance statistics – overview mode.
If you check the 4 different profiles from above, you will see that each of them is showing specific statistics related to the challenges a user participated, based on their active track.
Explore and see how competitive development (Marathon Matches, SRMs) stats are differently than typical design/development challenges. Explore different ideas to show where the competitor stands in relation to the track (standing from the top, who are the other members with similar ranking, etc.). This is very open for explorations and concepts - we need new fresh crazy ideas, but based on solid thinking about the story behind the data. Do not randomly throw “good looking” graphs if they are not scientifically true.
3. Skills (internal) – this is a new section we want to add. How would you represent the capabilities profile of a user based on the work they did on Topcoder? We had some concepts for Connect and we would like to take those into account and see further development:
- https://marvelapp.com/8fjf8ch/screen/42564229
- https://marvelapp.com/8g30hc7/screen/42765172
- https://marvelapp.com/4841d00/screen/42759447
(We have attached the source files for these designs to this challenge so you can reuse and improve the concepts).
4. Skills (external) – this is the place where we want to connect the Topcoder profile with other skills profiles like Dribbble/Behance for designers, Git for developers, Kaggle for data scientists, Codeforce for algorithmers.
5. Achievements – on Topcoder and outside, a member will take great pride in his achievements and these should be displayed by:
a. Using badges – giving you a couple of examples, but don’t focus too much on designing them as this will be the scope of another challenge
- Design Hero (placing in 10 challenges)
- MVP Member
- Fun Challenge Expert (placing in 15 fun challenges)
- Avid blogger (writing 10 blog posts)
- MVP Member
- Fun Challenge Expert (placing in 15 fun challenges)
- Avid blogger (writing 10 blog posts)
b. Showing TCO achievements, besides showing TCO current points for current period you can also show other achievements as:
- TCO finalist
- TCO champion
- TCO trip winner
- TCO Spirit Award
- TCO champion
- TCO trip winner
- TCO Spirit Award
c. Publications – some members are writing blog articles or have research publications
d. Other recognitions for working on top projects, being a star member of community, etc.
e. Overall wins numbers
6. Role Responsibilities - certain members achieve status of reviewers, copilots, screeners. Show us how would you represent that on the profile page.
7. Members Activity – allow the members to follow other members and see a feed of their activities. The more followers a member has, the higher is his reputation.
We’d like all users to complete their profile so this would provide members with contractor opportunities as well as show recommended challenges, so this indicator should be visible on the page.
Besides what we have listed here, what features would be beneficial for a profile on Topcoder?
Perhaps show work information or education, hobbies or Topcoder communities the user is part of, languages spoken, etc. What are the things we are missing today and you would like to see? This is a topic open for suggestions. Be creative and offer features that would enhance the value of a profile on Topcoder. We are looking for your ideas here and creativity is one of the main criteria you will be judged for on this challenge.
IMPORTANT: Redesign the profile layout to accommodate for profile evolution from newbies to veterans. Design for desktop only. Aim to build an interesting and easy to read profile page. Think about visual hierarchy, scannability, color, typography. We have to consider that not all profile contain the same amount of data. Your layout system should be modular to allow a profile with minimum data and one with maximum data to both look very good!
Design the profile with all the evolution steps in mind:
1. Seed: newly registered member
2. Sprout: New member with minimum data
3. Budding: Some activity in several tracks, low standing
4. Flowering: Active and following other members, communities, TCO competitor
5. Ripening: Ultimate user profile with advanced roles - copilot, reviewer.
We’d like to see the profile pages designed for a designer, developer, marathon matcher, algorithmer both for newbie level with few data and as well as for veteran member with lots of data who can have advanced roles too.
For this challenge, is important you follow the latest 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 should design your own icons for this challenge. No 3rd party site is allowed. We're looking for icon exploration as well.
- 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 General GUI KIT.sketch (to re-use components in this project). Note: use the attached file as it’s the latest version of the GUI KIT where we have been updated the gray/black colors to new ones.
- Topcoder User Settings.sketch (you can use the header and footer from here)
- My Team Connect Member Profile.sketch (have a start point for the Skills internal section)
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: 1366 px width with height adjusted accordingly
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 Members
- Topcoder Customers
- Topcoder Admins
Judging Criteria
- How easy is to scan for the information on the user profile?
- Does the layout looks good for a new member and a veteran one?
- 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.