Topcoder Member Profile UI Design Concept Challenge

Welcome to the "Topcoder  Member UI  Design  Concept Challenge". 

In this challenge, your objective is to redesign the Member Profile Page for Topcoder.

• Target device: desktop and mobile

• 1-3 screen in both sizes depending on your design

• Provide a creative and informative Member profile page design

Challenge Background

The purpose of the Topcoder member profile is for our community members to show off their history and skills. It's a page they should be proud to share with potential employers, with friends, and on social media. 

This is the one page where Topcoder members will go to and which represents them to many different audiences. 

A new purpose of this member profile will be for our customers looking to work with our community members. We want them to be able to easily decipher top talent based on skills, resume, and experience.

Round 1

Submit your initial designs and any notes you might have for checkpoint review:

01) Main profile (Web only)

01A) Profile Subsections (specialized profile) (Web Only)

Round 2

Submit your Final submissions:

01) Main profile (Web and Mobile)

01A) Profile Subsections (specialized profile) (Web and Mobile)

01B) Talent as a Service (TaaS) section (Web and Mobile)

Challenge Objectives

• The current Member profile page is very basic and does not carry the available information we have for members.

• The purpose of this challenge is to redesign the Member Profile page to make it creative and useful to draw information about Topcoder members.

• We need the information to be organized in a clean uncluttered way. It needs to appeal to all the audiences.

• While you redesign the Member Profile page, please make sure you incorporate the existing header and footer of Topcoder into your design so that we know how your design blends into the existing website for consistency. You can find the header and footer here

Audience

• The audience to this page will be all the users accessing Topcoder website including the community members like yourself, Topcoder staff members, Clients looking to shortlist members for Gig work, and visitors from outside of Topcoder.

Screen / Feature Requirements

01) Main profile  

The main profile page of a Topcoder community member that will show the overall details of the member. Here is a list of items that can be shown as a part of the profile:

 

01A) Profile Subsections (specialized profile)

The subsections within the main profile page will carry detailed information related to the member’s participation in the different tracks offered at Topcoder (Design, Development, Data Science, Algorithm track) as well as details of the Copilot activities if the member is a copilot. The table below shows the potential items that will can be part of these subsections:

  Note: we wish to see the detailed pages of these screens as well. It’s up to you how you represent them, as a separate page or on the same page, etc.
 

01B) Talent as a Service (TaaS) section

This section will display detailed information about the member’s participation and statistics with gig work. The table below shows the potential items that will can be part of this section

  
Here is a potential profile design that you can look at to start with: https://marvelapp.com/prototype/9agh55a/screen/46461484  
Please note that we do NOT want something like the current profile but are looking for something new and interesting.

Branding Guidelines

• As this challenge is focused more on the concept design, following the Topcoder GUI KIT doesn’t matter too much, however at a high level, you should use green buttons and Roboto and Barlow Condensed fonts. Everything else is up to you. This will not be a judging criterion.

  • GUI KIT

  • Marvel Guidelines

Judging Criteria Score

• Creativity: 8 points

  • [1: barely new ideas]

  • [10: a utopian design with features not proven to be able to be fully implemented]

• Aesthetics: 8 points

  • [1: low-fidelity design, wireframe or plain sketch]

  • [10: top-notch finished looking visual design]

• Exploration: 10 points

  • [1: strictly follow an existing reference or production guideline]

  • [10: open to alternative workflows/features not listed here that would help the overall design]

• Branding: 2 points

  • [1: don’t care at all about the branding just functionality]

  • [10: without a properly branded product there is no success]

Target Devices

• Desktop: 1440px Width. Height depending on your design

• Mobile: 750px Width.  Height depending on your design

Marvel Projects

• Upload your screens to the Marvel App.

• Ask in the forums for the Marvel projects (Web and Mobile)

• Include your both Marvel app URL as a text file in the root folder of your final submission. Label it “MarvelApp URL”.

Stock Photos and Icons

• Icons and photos are allowed as per Topcoder policy 

• Fonts: use Roboto font family for regular text and Barlow/Barlow Condensed for titles

Final Submission Guidelines

Create an archive with all 3 items below:

• An archive called Source.zip file to include:     

  • All original source files created in Sketch, XD, Figma, Photoshop, etc.

• An archive called Submission.zip file to include:     

  • All your design files in PNG or JPG format

  • MarvelApp link for review and to provide feedback

  • Your declaration files to include any notes about fonts usage, photo and icon declaration, and link to your Marvel project

• Create a JPG preview file of 1024 x 1024 px