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

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the “New & Improved Topcoder /tc Design Challenge”! In this challenge, we are looking to recreate the  www.topcoder.com/tc page which was used to inform members about what was going on in the community. This will be a responsive UI design challenge so you will focus on creating a new experience for both Desktop and Mobile devices.

Note: Any design tool is allowed in this challenge, not only Sketch.

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 checkpoint review. Feel free to add any screens which are necessary to explain your concept.
1. Topcoder /tc Design Challenge (desktop)

Round 2

Submit your initial design plus checkpoint feedback implemented. Feel free to add any screens which are necessary to explain your concept.
1. Topcoder /tc Design Challenge  (desktop + mobile)
 
CHALLENGE OBJECTIVES
  • Design a responsive desktop application
  • Create 2 screens
  • The goal is to have a single place where the members can find all the latest news about what’s going on at Topcoder to stay on top of things

AUDIENCE
  • Topcoder members of all tracks
  • Topcoder admins
  • Potential customers

PERSONA
  • Name: Mike
  • Occupation: Topcoder competitor
  • Goals:
    • Stay updated with Topcoder news to take advantage of the opportunities that come up such as new challenges, gigs, programs, etc
  • Frustrations:
    • Right now the information comes across different channels, such as Slack, Social media, Blog posts, newsletter, different Topcoder pages, so is difficult to keep track of all these
  • Wants:
    • A single place to find all the information listed above that contains the latest news

DESIGN GOALS & PRINCIPLES
  • Engaging, intuitive style that brings a new, fresh vibe to the site.
  • Keep a compact delivery of information
  • Branding should be considered for a certain level, discussed in the Branding section.

JUDGEMENT CRITERIA
  • 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 inline with the goals.

SCREENS/FEATURES
Many years ago, www.topcoder.com/tc was one of the most popular pages for the community. Here’s an example of how that looked. In time, the site went through various transformations, but now we would like to bring that page back in a more modern version.

While we have many elements to include, keep in mind to use a compact look and feel for the layout and think about the visual hierarchy. We’re open to your ideas for different layouts and levels, for 2-3 columns as well.

The page would include all the following elements:

Dynamic Content
Elements needed:
Manual Content
Note: these elements will be manually added by the team as they can’t be pulled in automatically with code.

Other Elements needed:
  • Latest news / news items
  • Topcoder Ad space (here we wish to show banners/ ads to promote different programs, events, etc.)
  • Latest newsletter link
  • Spotlight Member of the Month
  • Video embed of our Monday call
  • Contact form or email?
  • Shirt winning/contests opportunities
  • Surveys

Static Elements
New Items
Note: these elements might be there but not all the time. Plan your design with this in mind.
Elements needed:
  • Design and Development Tips & Tricks
  • Funny meme (like Ghe used to do)

We are open to your ideas for other content you think should be there.

Note: the items above are grouped by the way they need to be managed, however, you can group them in any other way, it makes sense from a member’s perspective and best UX.

If you think about the priority of the items above, their order is: Dynamic Content, New Items and then Manual Content .

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.
FORM FACTOR
  • Desktop - 1440 px width (When designing for the given display resolution, consider visitors with smaller screen resolutions as well like the laptop sizes for example (1366 x 768px)). Test your designs to see that plenty of information is visible above the fold for this size - 768px)
  • Mobile - 750 px width x height as much as needed

STOCK PHOTOS AND ICONS
  • Photos: use only free photos from the sites allowed by Topcoder or Topcoder images from our Flickr gallery.
  • Icons: use only icons that are free (based on Topcoder icons policy) without giving attribution, or create the icons yourself. If the icons are not free, we will require them to be replaced in the final fixes. You can also use the Streamline icon set.

MARVEL PROTOTYPE
We use Marvelapp to showcase your design to the team.
  • Ask for a Marvel project on the forum.
  • Upload your screens to Marvel, and include hotspots so that the client can see the interactions between your screens

FINAL DELIVERABLES
You have to submit a single zip file that includes the following 4 items:
  • Source.zip     
    • All original source files
      • Create files in Adobe Photoshop, Adobe XD, Sketch or Figma.
  • Submission.zip     
    • Your screens exported as PNGs
  • Declaration.txt     
    • A text file that contains all the notes about font usage, photo and icon declarations, and your Marvel project URL
  • Preview.jpg     
    • Create a JPG preview file of 1024 x 1024 p

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:

2021 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

  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • XD
  • Figma
  • XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30192114