Challenge Summary
Welcome to Topcoder Settings Profile Additional Traits Design Challenge
We just received the new look of Topcoder Settings Profile page on previous challenge, this time we need your help to add some additional sections on Settings Profile page.
For this challenge we need you to think about how to extending Member Profiles page with some additional sections explained below.
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.
1). Hardware & Software
2). Account
Note: Feel free to submit more screens for early feedback
1). Hardware & Software
2). Account
General
- For this challenge, we need you to re-use existing Topcoder UI Kit. Refer to existing Sketch file.
- Keep things consistent. This means all graphic styles should work together.
- Your submissions result must look as one set with Topcoder Settings Profile page.
- Think about how these additional sections added to current Settings Profile page.
- We will add more additional informations in the future, we need your design allows for future growth.
- As possible create the icon/logo/etc as vector format
- Suggest any proper sample content for every sections below.
- Create some sample add that will display more than 1 item for Mobile, Gaming Console, Browsers, Accessories, Hobbies etc
Design Assets: https://drive.google.com/open?id=1pmc9-6Xwq7LSY1zIrSuplcz1Qhnzeq3O
Additional Traits Requirements
1). Hardware & Software
Application Hardware
- Desktop
- Gaming Console
- Mobile
- Web
- Other
Web and Desktop
- Operating System
- OS Version
- OS Language
- Firewall
- Antivirus
- Antispyware
- Browsers
- Accessories
Mobile and Tablet
- Handset Manufacturer
- Handset Model
- Handset OS
- Wireless Carrier
2). Account
- Years of Experience
- Native Languages
- Location
- Industries
- Hobbies
IMPORTANT! TC UI KIT Branding
- 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 them
- If there is something else you need or have questions, ask the in the forum.
Navigate on Misc Examples sections:
https://community-app.topcoder-dev.com/examples/color-mixins
Design Submission Formats:
a). Screen Sizes:
Follow Sketch file screen sizes for Desktop, Tablet & Mobile
b). Design theme, colors, typography.
- Design Branding: Follow Topcoder branding
- Fonts: Please use Topcoder fonts
- Color palette: Please use Topcoder color theme
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 improve existing Topcoder Settings Profile Design
- 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 either Adobe Photoshop/Illustrator/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.
We just received the new look of Topcoder Settings Profile page on previous challenge, this time we need your help to add some additional sections on Settings Profile page.
For this challenge we need you to think about how to extending Member Profiles page with some additional sections explained below.
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 Settings Profile Additional Traits for these following features on Desktop/Tablet/Mobile screen size1). Hardware & Software
2). Account
Note: Feel free to submit more screens for early feedback
Round 2
Final Topcoder Settings Profile Additional Sections for these following features on Desktop/Tablet/Mobile screen size combined with Checkpoint Feedback1). Hardware & Software
2). Account
General
- For this challenge, we need you to re-use existing Topcoder UI Kit. Refer to existing Sketch file.
- Keep things consistent. This means all graphic styles should work together.
- Your submissions result must look as one set with Topcoder Settings Profile page.
- Think about how these additional sections added to current Settings Profile page.
- We will add more additional informations in the future, we need your design allows for future growth.
- As possible create the icon/logo/etc as vector format
- Suggest any proper sample content for every sections below.
- Create some sample add that will display more than 1 item for Mobile, Gaming Console, Browsers, Accessories, Hobbies etc
Design Assets: https://drive.google.com/open?id=1pmc9-6Xwq7LSY1zIrSuplcz1Qhnzeq3O
Additional Traits Requirements
1). Hardware & Software
Application Hardware
- Desktop
- Gaming Console
- Mobile
- Web
- Other
Web and Desktop
- Operating System
- OS Version
- OS Language
- Firewall
- Antivirus
- Antispyware
- Browsers
- Accessories
Mobile and Tablet
- Handset Manufacturer
- Handset Model
- Handset OS
- Wireless Carrier
2). Account
- Years of Experience
- Native Languages
- Location
- Industries
- Hobbies
IMPORTANT! TC UI KIT Branding
- 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 them
- If there is something else you need or have questions, ask the in the forum.
Navigate on Misc Examples sections:
https://community-app.topcoder-dev.com/examples/color-mixins
Design Submission Formats:
a). Screen Sizes:
Follow Sketch file screen sizes for Desktop, Tablet & Mobile
b). Design theme, colors, typography.
- Design Branding: Follow Topcoder branding
- Fonts: Please use Topcoder fonts
- Color palette: Please use Topcoder color theme
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 improve existing Topcoder Settings Profile Design
- 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 either Adobe Photoshop/Illustrator/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.