Challenge Summary
Welcome to Topcoder - Community Leaderboards Wireframe Challenge. In this challenge, we are looking to wireframe a new 'community leaderboards' page for the new www.topcoder.com that will be used for main tracks (Design, Development, Data Science) that help show to show overall member competition and also motivate the member to perform better, reach their goals.
At the end of this wireframe challenge, we are looking to have a complete solution for the User Experience and flow of the application.
We are excited to see your submissions..!
Round 1
Submit your initial wireframes for Checkpoint feedback
Notes.jpg: Any comments about your design for the Client
Round 2
Your Final wireframes for all the required page with all checkpoint feedback implemented.
Notes.jpg: Any comments about your design for the Client
The purpose of this challenge is to create wireframes based on the below given requirements. We need leaderboards on the new topcoder.com site to show member competition performance so that:
- Members can have a sense of accomplishment and bragging rights
- Members can be motivated to perform better and reach goal
- People (members, staff, press, etc) can have data to refer to about our member base
- [topcoder] can have an accurate picture of member trends
- Members will be accessing a new page within www.topcoder.com to access the leaderboards page
Wireframe Expectations:
- Your wireframe design needs to be fresh, innovative, engaging and easy to understand.
- Think on how to create an intuitive user experience.
- We want to move away from the “excel” table design we have been using on [topcoder] for years. We need a fresh design with engaging features.
Required Functionalities:
We are looking for you to create the leaderboards for each of the track (Design, Development and Data Science). Please go through the features described below to learn more on the expected features..
1) The leaderboards should be shown on a single page with filtering options that allow users to see different leaderboard views.
- Tabs are acceptable.
- Leaderboard should allow users to quickly see who is “on top” within the community and allow filtering of the data.
2) We want to be able to show snippets of leaderboards on the homepage and/or community home page and landing pages. “Top 5 Competitors in the Development Track Today” or “Members Rising in the Rankings”, etc.
- Please show a page with these widgets
3) The leaderboards should always show the following elements:
- member handles
- member photos (photo should somehow be shown, maybe on hover?)
- ranking numbers
- timeline
- Top Ten within each leaderboard view should be more prominent than the rest of the rankings
- pagination with options to view 25, 50 and 100 rankings at a time
- a link somewhere to the TCO leaderboards for current TCO year
4) Leaderboards would be a rolling 30 days, 90 days and one year.
- We want to avoid where the leaderboard disappears to zero at the start of the month, quarter or year.
5) We want some fun interactive features that allow the user to see additional information in addition to the filtering options:
- When you click on a member’s handle/your own handle, you should be able to see comparisons highlighted like:
*** members this user usually competes against
*** members within the same country
- We are looking for your ideas on other fun ways we could show and play with the data? Graphs? Charts?
Examples:
These are just for your references, please DO NOT COPY
http://visual.ly/interactive-leaderboard?view=true
http://www.bloomberg.com/visual-data/industries/detail/computer-hardware
http://www.masters.com/en_US/scores/
6) Users should be able to view the data by:
- “community view” - use filters to view overall community rankings
- “personal view” - use filters to see where they are in relation to everyone else.
7) Filters for “community view”
- Highlight members who have moved placements recently
- Show entire community ranking
*** ability to filter by track
*** ability to filter by country
8) Filters for “personal view”
- What’s my ranking within entire community?
- What’s my ranking in relation to members who compete primarily in the track that I also primarily compete in?
- What’s my ranking in relation to members I “follow”?
Target Audience:
- [topcoder] Admins, Members and also any general user.
Judging Criteria:
Your submission will be judged on the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.