TC Member Profile Page - Rating Details Design Challenge

Welcome to "TC Member Profile Page - Rating Details Design Challenge". In this challenge, we need you to comes up with a creative way and provide the best UI/UX that can offer seamless information experience about rating on Topcoder member’s profile page so people/user that doesn’t have much background in Topcoder can easily understand on how our Rating system works and able to see how awesome our members actually are! 

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial design for a Checkpoint Feedback

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt. 
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

BACKGROUND OVERVIEW

• On the current Topcoder member profile pages, where there are ratings (if the members ever compete in any challenges), we don't have much information that explains on how the rating was calculated.
• The current information on the Member’s Profile Page is not very friendly to the viewer that doesn’t have much experience in Topcoder and don’t understand how our ratings work
• We want to add something to the page so people can understand easily what those ratings mean and how impressive our members can be!  
• What would the design look like to help people understand (for example, Referencing THRIVE articles, tooltips, etc)

DESIGN CONSIDERATION

• You MUST use Sketch tool to be able to work on this challenge
• Keep the existing layout structure as much as possible, we want MINIMAL design changes
• Your design needs to follow our latest guidelines STRICTLY
• Focus on the UI/UX interactions on how this application should work. What should the user see and experience when opening the Member pages? How to make people easily understand the content?

CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=718951

EXISTING USER FLOW

•  “01 TC Profile - Rating.png”, here is our current TC Member Profile page, there are two tabs on the main page, Statistic, and Challenge tabs
• Clicking Challenge tabs will show information about all challenges that the members ever participated in the specific tracks (04 TC Profile - Challenge Details.png)
• Clicking the Statistic Tabs will show the following information:
  • Current member ratings from the latest challenge they participated 
  • It also shows general information of the member participation status (ranking, percentile, challenges, wins, reliability, etc) 
  • The general Information change depends on the track they participated - Development track might have different information from Data Science track or Design track
  • There is a graph showing rating history below the general information, it shows all the challenges that the member ever participated in. If user hover one of the dots in the rating history graph, it will show tooltip contains information about the past challenge that the member participated (where they get the rating from - “02 TC Profile - Rating Tooltip.png)
  • Below the rating history graph, we can see member details information about their past competition history for a specific track in Topcoder
  • In the right top above the rating history graph, there are also tabs to see how rating distributed for that specific track, clicking the “View Rating Distribution” tab will show graph contain this information (03 TC Profile - Rating Distribution.png)

SCREEN/FEATURE REQUIREMENTS

• In this challenge, we want to add more rating information to the TC Member Profile pages, please see the request below:
  • We want to show general rating information to the viewer when they reach the member’s profile page. Put yourself as a user that doesn’t have much experience in Topcoder and then arrive in one of our awesome member profile pages, how can you make the experience in this page more seamless for this kind of user? How to make them understand the content on this page easily?
  • For Reliability Rating, we want to design a way to show the following information:
    • "Member profiles reflect reliability factors for the last 15 projects in each track. The reliability factor is calculated as the percentage of the last 15 projects that a member registers for in which that same member presents a timely submission that passes review. The projects before the first passing submission do not count against a member’s reliability history. Separate reliability ratings are kept for each track. Some of the tracks have unrated past projects that do not count for the reliability rating in this track." 
    • We also want to be able to link to this article: https://www.topcoder.com/thrive/articles/Development%20Reliability%20Ratings%20and%20Bonuses 
  • For other statistics and ratings, we want to design a way to show a link to this article, https://www.topcoder.com/thrive/articles/Ratings  
  • Some example, we're thinking a quick tooltip that shows when the user hovers over a username to show rating level (this way user will not confuse about the meaning of the colors):
    • Red = Distinguished
    • Yellow = Superior
    • Blue = Advanced
    • Green = Intermediate
    • Gray = Beginner
  • We want your creativity to accomplish the above request, do not just simply put a hyperlink to the THRIVE, think about how we can present this in a creative way
  • These are the member profile pages that should be affected with the new request:
    • https://www.topcoder.com/members/sky_ 
    • https://www.topcoder.com/members/Sky_/details/?track=DEVELOP&subTrack=CODE 
    • https://www.topcoder.com/members/Sky_/details/?track=DEVELOP&subTrack=CODE&tab=challenges 
  • Got more ideas to make the experience more awesome? Feel free to do the exploration and show it to us!

IMPORTANT

• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App.
• Please send your marvel app request in the challenge forum
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)

 
BRANDING GUIDELINES
Google Drive: https://drive.google.com/drive/folders/1lRo2gnO1D5WqChVR6bPKwhLyWRbv5AP3?usp=sharing

TARGET DEVICES

• Web/Desktop Device - Follow the minimum width in the sketch file provided

TARGET AUDIENCES

• World Wide Internet Users that don’t have much background info about Topcoder

JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • The overall idea and execution of concepts
  • How well does your design align with the objectives of the challenge
  • Execution and thoughtfulness put into solving the problem
  • The overall design and user experience

 
SUBMISSION AND 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 an 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.