Topcoder Dashboard Concept Design Challenge

Welcome to Topcoder Dashboard Design Challenge! In this challenge we are looking to get your ideas about how the Topcoder dashboard should look and what information should it contain. As you, our designers are part of the target audience, we are looking to your help to great a great user experience for the entire community

Note: this challenge is NOT a Sketch only, you can use any tool you wish.
We are offering 8 prizes x $50 for you to win.

Round 1

Submit your initial design for a Checkpoint Feedback:

• Dashboard (empty and filled state)

- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App 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:

• Dashboard (empty and filled state)

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

• Redesign and improve the Topcoder dashboard page
• 1 desktop screen with different states
• Screen size 1440px

Project Background

• The purpose of this project is to create a better Topcoder dashboard, than the current one, to satisfy the member needs considering different tracks and member roles
• We would like you to think about the dashboard experience in details and research how other platforms are doing it like Upwork, Devpost, Challenge.gov, Codechef, Hackerearth, etc.
• We also opened a discussion forum for all the members across all tracks to let them share their idea. We have added most of their requests in the specifications, but feel free to go through the forums to get more context.

Objectives

• With this redesign, we are looking to make the dashboard page, more useful for a member.
• Imagine you are logging on the site and then you are taken to this page: it should show you at first glance the stuff you really need to take care of today, and where you should do it.
• The different sections of the dashboard will all have actionable items for the user to interact with to perform the actions he need
• Although we are listing some items we wish to see in this challenge, at this point we are looking for more concepts and ideas. We are going to refine this later.

Dashboard Page
We already have a previous design that we like some aspects of it and we want to come up with something better this time: https://marvelapp.com/9a6f114/screen/46707369 . We like that this design is based on modules and we wish to keep this approach for the future but fit the new Topcoder look and feel. If you look at his page, you will see that there is a lot of overlapping with the member’s profile page.

The dashboard page should show relevant information to me, things I need to act on when I am logged in or news I should see, while the profile page, it’s showing more an exterior view of my Topcoder performance like badges, winning experience, skills, etc.

Here are a couple of things that we would like to keep (add) on the dashboard:

Banner dashboard (this will use to show announcements from Topcoder – it’s what we have now on the dashboard)

Relevant Work Adds

• This area will allow the customer to promote opportunities from their side such as work opportunities, challenges, etc.

Status

• The ability to add a status update which will display on the profile
• Your followers will also be able to see this in their activity timeline
• The user will have an option to decide who the audience is (which people can see the post) like for example: your followers, entire community, etc.

User Profile

• Photo of the member
• Topcoder Handle

Badges

• We will not include a list of the badges the user has currently won as that will be visible on profile page but we do want to show the Next Milestones for him
• Next Milestones: will show how many challenges/points does a user has to win to get to his next achievement (like for example for Algorithm, to change from a yellow member to a red member, or for design how many challenges a user needs to win to overpass next person in the UI Design Wins leaderboard)

Publications

• This will  include latest relevant THRIVE articles and blog articles published that are relevant to the members

Challenges
This is definitely one of the most important sections and should have:

• My challenges with the ability:
  • To filter per roles (competitor, copilot, observer, screener, reviewer, etc.)
  • Highlight challenges for which deadline is approaching and have links to sub-systems to take action
• Recommended challenges based on skills
• Upcoming challenges for the track I compete in

Newsfeed/Activity Timeline
The timeline will show everything relevant to me, either news or challenges, forums posts etc. 
Things to include:

• Important news (what's happening in Topcoder)
• Upcoming Topcoder events & challenges for all tracks
• Announcements
• News related to another person I am following (like if I am following iamtong and he just won a challenge, I should see a timeline entry about this)
• Show the forums I am following and if there are new replies there
• Each timeline entry should have the ability to upvote and comment, as well as stop seeing feeds from that person

Upcoming Deadlines
show a list of actionable items related to my next deadlines : ike for example I am registered for a challenge and then I should see the challenge name, time left until deadline and a submit button.

TCO20 widget
TCO is an important motivation element for members as many members are working hard to win the trip so we would like to see more relevant data to that. Things to show:

• How am I doing on TCO leaderboards? How many points/challenges I have now and how many I need to win to get a trip?
• If a member competes on different tracks should be shown separately
• Include a link to what TCO is for members who don’t know

Who to Follow

• Shows a list of members I might be interesting in following

Followers and Following:

• We’d like a widget to see which members I am following and which are following me + follow back and for the members I am following have the option to unfollow

Latest Win

• Show the latest challenge a member won and what did he achieve: as in won $1500, 360 TCO points and advanced in the overall leaderboard
• For the Algorithm rounds you could show how many points the member achieved and if his rating color changed or ranking increased/ decreased

We would like the user to have the option to order all this modules as he likes on the page (drag and drop).

The above are just a couple of things we wish to include. Feel free to come up with other suggestions on what we should add to the dashboard page.  
Also keep in mind to design the dashboard with empty states of the modules as well as filled state.

Size
Width x height: 1440px x height as needed

Branding Guidelines
Please consider the below guidelines during your design process:

• Your design should follow theTopcoder GUI KIT in big lines, but we're not looking for perfection. You can see the GUI KIT and new style here and here and download it from here.
• Please use the new navigation and footer from the GUI kit for your screens. The other regions on the screen are yours to create.
• Stock photos and stock icons are allowed from the approved sources, as long as you declare them.

Target Audience

• New and experienced Topcoder members throughout all the tracks we have
• Copilots, Challenge architects, Project Managers
• Customers

Judging criteria
Your submission will be judged on the following criteria:

• How well you plan the user experience and capture your ideas visually.
• Overall idea and execution of concepts.
• How well you implement the challenge requirements.

Marvel Prototypes
For this challenge you should submit your designs in Marvel. You can request one in the forums or email at keyla. blue1@gmail.com


Stock Photography and Icons
Stock Photography is allowed as per Topcoder policy: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
Stock Icons are allowed as per Topcoder policy: https://help.topcoder.com/hc/en-us/articles/360007546013-Policy-for-Icons-in-Design-Submissions

Final Deliverables

• Source.zip – All original source files.

• Submission.zip – PNG/JPG files

• Preview.png – Your preview image

• Declarations.txt – All your declarations and notes

Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall color