BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$50‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "Topcoder Community New Member Experience". This challenge will focus on redesigning the current experience for some of our most visited pages for the Topcoder community = the “Start” and the “Learn” pages. This will be a responsive UI design challenge so you will focus on creating a new experience for both Desktop and Mobile devices.

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 designs for checkpoint feedback
1) Start (Desktop)
2) Learn (Desktop)

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 designs with all checkpoint feedback implemented
1) Start (Desktop and Mobile)
2) Learn (Desktop and Mobile)

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

 
CHALLENGE OBJECTIVES
  • The redesign of the current “Start” and the “Learn” pages.
  • The goal is to simplify the UX and create a solid UI that can work without too many differentiations on Desktop and Mobile devices.
  • Make your design to work responsive naturally. Every element and interaction should be easy to see and use in mobile devices

BACKGROUND OVERVIEW
  • For 20 years, thousands of developers, designers, and algorithm competitors from all around the world have joined Topcoder. We have two pages that serve as a trigger of information for those who want to start competing and join our community.
  • We are looking to make the Start and Learn pages feel more engaging while still being easy to use and navigate. We would like to avoid the long scrolling pages and make sure a user quickly understands their options at Topcoder.
  • Have in mind that these pages will be visited by new members, they are our target; users who probably won't know how Topcoder works. So think of the best UX while designing these two pages.

DESIGN GOALS & PRINCIPLES
  • Easy to use interface, The design should follow the current branding guides provided in this challenge. So please make sure your design is consistent and feels like a part of the whole application.
  • Less scrolling and all important concepts, ideas above the fold. OR if the design must scroll lead the user to scroll (have it be natural to scroll).
  • This challenge is really open in the matter of how you want to propose the best experience for these pages.
  • Provide a cleaner layout and better content organization for the Learn page, that easily allow new users to know about what Topcoder is and what it has to offer.
  • Focus on creating the best UX for these pages. So you don’t need to strictly follow the design guidelines for Topcoder, you must follow the colors and fonts but still consider we are providing free room to explore UX.

EXPLORATION SCORE
  • Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
  • Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
  • Aesthetics: Hi-fidelity design; provide a top-notch finished-looking visual design.
  • Branding: Flexible - follow the provided guidelines and suggest improvements where seem appropriate and in line with the goals.

TARGET AUDIENCE
  • Topcoder New Members
PERSONA
  • Name: Alex
  • Occupation: Design and Developer, new at Topcoder, wants to start competing
  • Goals:      
    • Wants to know what is Topcoder, and learn how he can start competing
    • Wants to improve his current skills.
  • Frustrations:      
    • Currently, it is hard to find information about how to start competing or if there are any open positions for freelancers (Gigs).
    • He is afraid to start competing due to the lack of good information that shows him how to compete and increase his confidence.

DOCUMENTATION
DESIGN GUIDELINES
At this point, we are going through a redesign of the Topcoder community site from the presentation style to a more practical approach where data can be easier to find without lots of scrolling. Keep in mind to follow these guidelines:
  • Keep things compact, no need for large spacings between sections or waves, etc
  • Content visibility above the fold: most of our users are using laptops of 1366 x 768px resolution. When looking at the content above the fold, show as much as possible to get the user engaged. Note: our navigation is 1440 px width.
  • The site should load faster: that means for design to use images only when needed
  • Smaller fonts: when keeping things more compact is fine to use smaller headings from our GUI KIT and the regular font size more than the large sizes as we have now

SCREEN REQUIREMENTS
01) Start Page
The goal of the page will be to lead members where to go next. They have already registered, activated, and are then redirected to this page.
  • What is next?
  • What do you want to do today?
    • Compete
    • Build Skills
    • Learn
    • Get a Gig
  • Get to know Topcoder:
    • Competitive Programming: Battle against some of the greats in the world in Algorithm Competitions or Single Round Matches (SRMs)
    • Complete your Topcoder Profile: Complete your profile, add skills, and track your progress in Skill Builder competitions and Challenges
    • Join the Conversation, Topcoder chat: Meet like-minded people, connect and chat with other Topcoder members in the forums

2) Learn
Currently, this page has different information regarding what Topcoder is, how to compete, and what the community has to offer; however, the layout and content organization is not the best. There is too much white space that doesn't actually provide any useful information to the competitors.

The following is the structure we would like to see for this page:
  • Learn, Earn, Compete
  • Register Button
  • Community Strong Video

EARN MONEY
  • Find a Challenge - Write code, create designs, test your skills  [Find a Challenge]
  • Get Gig Work - Apply for freelance/work from home gigs [Browse Gigs]

LEARN
  • Build Your Skills - Get stronger with Skill Builder Competitions [Find a competition]
  • Start Learning - Hundreds of workshops and tutorials [Go to Thrive]

COMPETE
  • Competitive Programming - Battle against some of the greats in the world [Start Competing]
  • Earn a Trip - Travel to our annual Topcoder Open event [Go to TCO]

CONNECT
  • Meet Your People - Connect and chat with other members [Explore Forums]
  • Weekly Call - Every Monday, meet the team and hear what’s new [Register Here]

This structure is not mean to be used as an exact guide, you are free to propose and innovate ways for this layout to make it feel unique and engaging.

TARGET DEVICES
  • Web/Desktop: 1366px x 768px The majority of our competitors use this resolution.
  • Mobile: 375px x and height adjusted if necessary.

STOCK PHOTOS AND ICONS
Photos: use only free photos from the sites allowed by Topcoder  or Topcoder images from our Flickr gallery.

Streamline Icon Set:
https://drive.google.com/drive/folders/1AWR5-6Eb1x3b25Eq8bGhuesZkQD8KPzA?usp=sharing

SUBMISSION AND SOURCE FILES
Submission File
  • Submit JPG/PNG image files based on Challenge submission requirements stated above
  • MarvelApp link for review and to provide feedback
  • Declaration files document contains the following information:     
    • Stock Photos Name and Links from allowed sources
    • Stock Art/Icons Name and Links from allowed sources
    • Fonts Name and Links source from allowed sources
    • Full Details of the Topcoder Policy can be found in this LINK

Source Files
All source files of all graphics created in Sketch, Figma, Photoshop, Illustrator and XD 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

 

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2022 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Sketch
  • Adobe XD
  • Figma

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30203700