Challenge Summary
Welcome to Topcoder Member Profile Design Updates Challenge
The goal of this challenge is to improve the usability and UI of the existing Topcoder Member Profile. We need you to think about the extending Member Profiles page with some requirements explained below.
Please read the specification details below and let us know if you have questions
1). User can change their own email.
2). Move “Skill Picker” page to “Profile Settings“
3). Additional Demographic
4). User Settings
Note: Feel free to submit more screens for early feedback
1). User can change their own email.
2). Move “Skill Picker” page to “Profile Settings“
3). Additional Demographic
4). User Settings
Design Page Requirements
General
- For this challenge, we need you to re-use existing Topcoder Design Branding
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- These are some features we need to improve on current Member Profile page:
1). User can change their own email.
- Currently, users are not able to change their own email. We do this via the admin tool after the user sends a support request.
- Provide a standard flow for the user to change their own email via the profiles settings page: https://www.topcoder.com/settings/account/
-- Use the same validation that accounts.topcoder.com app uses
-- The process flow should include a verification email that asks the user to confirm the change. Email should not be changed until they confirm the change by clicking on a confirmation link in the email (or a similar verification flow).
2). Move “Skill Picker” page to “Profile Settings”
- When a new user signs up for TC, after they activate their account we push them to https://www.topcoder.com/skill-picker/.
- Instead of pushing them to that separate page, let’s push them to their profile settings: https://www.topcoder.com/settings/profile/. We’ll need to make sure we’re capturing the same info on the profile settings that we have on the skill picker. Once we do this, we should deprecate the separate skill picker page.
3). Additional Demographic
- We would like to capture additional demographic information such as School, t-shirt size, education level, etc. We will define an initial list of attributes, but this should be architected in a flexible way so we can add fields relatively easily.
- We also need to support some kind of logical segmentation/grouping of this data. For example, we may want to ask the user to fill in all of their QA Profile data which could include a specific set of fields.
Example extended demographic fields:
- Gender
- Birth year
- Highest grade level completed
- Looking for Employment?
- Primary Interest in TopCoder
- Industry
- Current Job Title
- Purchasing Role
- Company Spending on IT
- Company Revenue
- Primary Area of Interest
- College Major Description
- Employer
- College Major
- Graduation Year
- Clubs / Organizations
- School Name
- Currently Employed
- Ethnic Background
- Shirt Size
User Settings:
- Show/hide earnings
- Opt-ins
- Payment preferences
Design Submission Formats:
a). Screen Sizes:
- Desktop Screen Size: 1280px(w) × Height up to your design
- Tablet Screen Size: 780px(w) × 1024px(h)
- Mobile Screen Size(Retina): 750px(w) × 1330px(h)
b). Design theme, colors, typography.
Design Assets: https://drive.google.com/open?id=1pKkA87x4zZLS6N4_LaJz8i64z1uT0Zyb
- 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 Member 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.
The goal of this challenge is to improve the usability and UI of the existing Topcoder Member Profile. We need you to think about the extending Member Profiles page with some requirements explained below.
Please read the specification details below and let us know if you have questions
Round 1
Updated Topcoder Member Profile Design for these following features on Web/Tablet/Mobile screen size1). User can change their own email.
2). Move “Skill Picker” page to “Profile Settings“
3). Additional Demographic
4). User Settings
Note: Feel free to submit more screens for early feedback
Round 2
Final Topcoder Member Profile Design for these following features on Web/Tablet/Mobile screen size combined with Checkpoint Feedback1). User can change their own email.
2). Move “Skill Picker” page to “Profile Settings“
3). Additional Demographic
4). User Settings
Design Page Requirements
General
- For this challenge, we need you to re-use existing Topcoder Design Branding
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- These are some features we need to improve on current Member Profile page:
1). User can change their own email.
- Currently, users are not able to change their own email. We do this via the admin tool after the user sends a support request.
- Provide a standard flow for the user to change their own email via the profiles settings page: https://www.topcoder.com/settings/account/
-- Use the same validation that accounts.topcoder.com app uses
-- The process flow should include a verification email that asks the user to confirm the change. Email should not be changed until they confirm the change by clicking on a confirmation link in the email (or a similar verification flow).
2). Move “Skill Picker” page to “Profile Settings”
- When a new user signs up for TC, after they activate their account we push them to https://www.topcoder.com/skill-picker/.
- Instead of pushing them to that separate page, let’s push them to their profile settings: https://www.topcoder.com/settings/profile/. We’ll need to make sure we’re capturing the same info on the profile settings that we have on the skill picker. Once we do this, we should deprecate the separate skill picker page.
3). Additional Demographic
- We would like to capture additional demographic information such as School, t-shirt size, education level, etc. We will define an initial list of attributes, but this should be architected in a flexible way so we can add fields relatively easily.
- We also need to support some kind of logical segmentation/grouping of this data. For example, we may want to ask the user to fill in all of their QA Profile data which could include a specific set of fields.
Example extended demographic fields:
- Gender
- Birth year
- Highest grade level completed
- Looking for Employment?
- Primary Interest in TopCoder
- Industry
- Current Job Title
- Purchasing Role
- Company Spending on IT
- Company Revenue
- Primary Area of Interest
- College Major Description
- Employer
- College Major
- Graduation Year
- Clubs / Organizations
- School Name
- Currently Employed
- Ethnic Background
- Shirt Size
User Settings:
- Show/hide earnings
- Opt-ins
- Payment preferences
Design Submission Formats:
a). Screen Sizes:
- Desktop Screen Size: 1280px(w) × Height up to your design
- Tablet Screen Size: 780px(w) × 1024px(h)
- Mobile Screen Size(Retina): 750px(w) × 1330px(h)
b). Design theme, colors, typography.
Design Assets: https://drive.google.com/open?id=1pKkA87x4zZLS6N4_LaJz8i64z1uT0Zyb
- 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 Member 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.