Challenge Summary
Welcome to the Enhanced Profiles Design Challenge! The goal of Enhanced Profiles is to provide our users with useful data about their skills and code data, all statistics that we expect to increase engagement and satisfaction for our members. Coderbits and topcoder data should coexist on the profile to provide a holistic, high-level overview of a member.
In this challenge we have provided you with wireframes to explain what we have in mind, as well as [topcoder] branding guidelines. We are looking for you to help us with designing the user interface by providing great graphics and visuals.
Let us know if you have any questions!
Round 1
Submit your design for a Checkpoint feedback
1. Upper right section
2. Middle tabs
3. Summary, Coderbits data
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus Checkpoint feedback
1. Upper right section
2. Middle tabs
3. Summary, Coderbits data
4. Profile Builder
5. Identified Skills
6. User States
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
[topcoder] acquired a company called coderbits.com and want to integrate the information on their profiles.
For this challenge, we want to re-skin Coderbits profiles to abide by topcoder design and simplify the way we present topcoder member data. We also aim to retire Coderbits as an entity.
We are looking for the [topcoder] design Community to help us design the user interface based on the provided wireframes.
Supporting Documents:
- TC GUI Toolkit (TC_Web_GUI_Kit.zip)
- User Guide to topcoder GUI KIT (User Guide to topcoder GUI KIT.pdf.zip)
- Use the new TC-branded AAF header (New AAF Header.zip)
- Screenshots for existing profile builder and identified skills (Screenshots.zip)
- Explained Wireframes (TC-profiles-annotated-wireframes.pdf.zip)
- Wireframe (http://mbb9s2.axshare.com) or (TC-profiles-complete-wireframes.pdf.zip)
- Coderbits profile examples:
- Developer: https://coderbits.com/thabo
- Designer: https://coderbits.com/axioma
Screen Size:
- Desktop: 1024px and height as required.
Required Screens & States:
- Refer to the provided wireframes (remember to treat these wireframes as guidance)
1. Upper right section:
- How it works
- The upper right section will show the ratings of the 2 challenge types with the greatest number of wins. If there is no rating then display the wins. Data Science challenges do not have wins, for this, compare and display competitions.
- Example: If a member has 10 Assembly wins and 14 SRM competitions, display the SRM Rating.
2. Middle tabs:
- The pie charts are purely linked data that a member has to authorize in order for the profile to display the information. If a member has no linked data here, default to best challenge type. If a member has no topcoder or linked data, show nothing. If a member has not participated in a challenge type, do not show that tab.
- Member overview – default
- Coderbits data
- The pie charts will appear in two different orders depending on what linked account information is available. This is already built into Coderbits so the logic will stay the same.
- Design
- Design grid (portfolio)
- Development
- Shows only challenge types that have ratings
- Left side is alphabetical order
- Rating History is open by default, but will change depending on what the user last clicked on
- Data Science
- Shows only challenge types that have ratings
- Left side is alphabetical order, but will change depending on what the user last clicked on
- Rating History is open by default
3. Summary, Coderbits data:
- All imported from Coderbits
- If no data, show nothing
- Badges
- topcoder badges should appear on the profile page in the same style as Coderbits badges. In the “Awards and Badges” section.
4. Profile Builder:
- Please refer profile builder.png
- This is the tool for users to link their accounts to Coderbits. This will live in topcoder Account Settings. The user should be able to link the following accounts:
- Topcoder
- 24 Pull Requests
- Apple iOS App Store
- Apple Mac App Store
5. Identified Skills:
- Please refer identified skills.png
- Users have the ability to hide certain skills from their profile. We want to maintain this. This will live in topcoder Account Settings:
- We will populate the page with the list of member skills.
- There will be checkboxes on each skill with the ability to hide that skill from view on their profile
6. User States:
- User has not participated in challenges and has no Coderbits data, blank profile - Hide the upper right section, middle tab section and lower summary sections. Only visible data is the Member photo and basic info.
- User has not participated in any challenges - Hide the upper right section and all the tabs. The pie charts will be the only visible middle section and will not have a tab. Lower section will exist.
- User does not have Coderbits information - Show the upper right section and all the relevant Challenge type tabs. Hide "Member Overview" tab and lower summary section
- User has no photo - Show a stock photo
- User opts out of displaying total winnings - Hide winnings
- User has no quote - hide quote
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target User:
- Community members.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Quality.
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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 may ask you to update your design or graphics based on checkpoint feedback.
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.