Challenge Summary
Welcome to Topcoder - Capture Profile Traits Design Challenge
On this experimental design challenge you need to suggest and do some deep thinking on how we can capture additional user information at strategic points on the site. The goal is that we need to collect some additional user information across Topcoder community pages that will be added to a user’s profile. For example, if the user is interested in registering for a Blockchain challenge we may want to ask them questions about what mobile devices they have available for testing.
Please read the specification details below and let us know if you have questions
Important! You must strictly follow our Standard Topcoder UI Kit for this challenge submission.
Submission Requirements
For this Design Challenge, we will focus on collecting additional information for 2 user scenarios. However, it is important that your design concept is able to be easily leveraged in multiple places on the site, so please make sure it’s generic enough to be used in difference scenarios. The information captured will be included with the user’s Topcoder profile, but the design for that is not in scope.
User Story 1
- A user visit a certain page/flow on https://blockchain.topcoder.com/
- Then user asked to provide additional profile information.
- If user not logged in, there is option to join the the community page. This could be an example of where we could ask for more user information. Any other places?
User Story 2
- A user creates a project in connect.topcoder.com.
- At some point in the flow, we would ask them for things like company name, job title, etc.
Your primary jobs for this is challenge are:
- Where and when is the proper place in 2 scenarios above to ask our user to filled the additional information?
- How will the form design look?
- What fields need displayed? Please use some example fields to demonstrate that your solution will support a varying number and type of user traits.
- We can assume there will be some number fields we ask them for depending on where we present this additional informations questions.
- You should think about it generically so we can use the same design experience in other community places.
- What happens after user complete the form?
- Is your design possible to expand with more questions/data in the future?
- Create concept designs screen with notes that explains your solutions.
Design Submission Formats:
a). Screen Sizes:
- Follow Desktop Screen Size on Sketch File
b). Design theme, colors, typography.
Design Assets: https://drive.google.com/open?id=1pmc9-6Xwq7LSY1zIrSuplcz1Qhnzeq3O
- You must strictly use existing Topcoder UI Kit. Refer to existing Sketch file, navigate to UI Kit page.
- Create new Page specifically for this Topcoder
- Colors: is mandatory you follow only TC 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.
- Distances: all distances/paddings should be multiple of 5px
- Buttons: check the attached html specifications to see the colors and padding you should use for theme
- If you need some assets or have questions, let’s discuss in the forum.
- Navigate on Misc Examples sections to get familiar with some components https://community-app.topcoder-dev.com/examples/color-mixins
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- You MUST create Hotspot click flow on your MarvelApp
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Topcoder Members
Judging Criteria
- How well you create design Topcoder Communities Experimental Upgrade
- Cleanliness of your graphics and design.
- User Experience.
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 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.
On this experimental design challenge you need to suggest and do some deep thinking on how we can capture additional user information at strategic points on the site. The goal is that we need to collect some additional user information across Topcoder community pages that will be added to a user’s profile. For example, if the user is interested in registering for a Blockchain challenge we may want to ask them questions about what mobile devices they have available for testing.
Please read the specification details below and let us know if you have questions
Important! You must strictly follow our Standard Topcoder UI Kit for this challenge submission.
Round 1
Initial Topcoder - Capture Profile Traits Design on Desktop screen sizeRound 2
Final Topcoder - Capture Profile Traits Design on Desktop screen size combined with Checkpoint FeedbackSubmission Requirements
For this Design Challenge, we will focus on collecting additional information for 2 user scenarios. However, it is important that your design concept is able to be easily leveraged in multiple places on the site, so please make sure it’s generic enough to be used in difference scenarios. The information captured will be included with the user’s Topcoder profile, but the design for that is not in scope.
User Story 1
- A user visit a certain page/flow on https://blockchain.topcoder.com/
- Then user asked to provide additional profile information.
- If user not logged in, there is option to join the the community page. This could be an example of where we could ask for more user information. Any other places?
User Story 2
- A user creates a project in connect.topcoder.com.
- At some point in the flow, we would ask them for things like company name, job title, etc.
Your primary jobs for this is challenge are:
- Where and when is the proper place in 2 scenarios above to ask our user to filled the additional information?
- How will the form design look?
- What fields need displayed? Please use some example fields to demonstrate that your solution will support a varying number and type of user traits.
- We can assume there will be some number fields we ask them for depending on where we present this additional informations questions.
- You should think about it generically so we can use the same design experience in other community places.
- What happens after user complete the form?
- Is your design possible to expand with more questions/data in the future?
- Create concept designs screen with notes that explains your solutions.
Design Submission Formats:
a). Screen Sizes:
- Follow Desktop Screen Size on Sketch File
b). Design theme, colors, typography.
Design Assets: https://drive.google.com/open?id=1pmc9-6Xwq7LSY1zIrSuplcz1Qhnzeq3O
- You must strictly use existing Topcoder UI Kit. Refer to existing Sketch file, navigate to UI Kit page.
- Create new Page specifically for this Topcoder
- Colors: is mandatory you follow only TC 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.
- Distances: all distances/paddings should be multiple of 5px
- Buttons: check the attached html specifications to see the colors and padding you should use for theme
- If you need some assets or have questions, let’s discuss in the forum.
- Navigate on Misc Examples sections to get familiar with some components https://community-app.topcoder-dev.com/examples/color-mixins
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- You MUST create Hotspot click flow on your MarvelApp
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Topcoder Members
Judging Criteria
- How well you create design Topcoder Communities Experimental Upgrade
- Cleanliness of your graphics and design.
- User Experience.
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 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.