Challenge Summary
Welcome to “Topcoder Member Programs Page Design Challenge”! In this challenge, we are looking for your help to redesign the existing Member Programs page on the Topcoder website. The Member Programs page is intended for Topcoder Community Members (both existing and potential) to share programs that Topcoder and its partners have created for Topcoder members as additional benefits beyond the software design and development challenges and gigs. The page is also important for us to show potential sponsors or partners ways to engage.
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!
Note: This challenge requires only one screen to design (for both desktop and mobile), based on our current branding guidelines. You are allowed to use Sketch, Adobe XD or Figma to design the source files in this challenge.
Round 1
Submit your initial designs for checkpoint feedback:
- 01 Member Programs Page - Desktop
Round 2
Submit your final designs with all checkpoint feedback implemented:
- 01 Member Programs Page - Desktop
- 02 Member Programs Page - Mobile
Challenge Objective
- Redesign 1 screen for both desktop and mobile views
- Content and functionality based on the screen requirements
- Open to creative ideas to improve the user experience
Project Background
- You will be redesigning only one screen for Member Programs on Topcoder Community website. This screen showcases current and past programs created by Topcoder and its partners for Topcoder community members. See existing screen for reference.
- We want to add functionality to filter between active and past programs.
- Sponsored: We would like the new design to have an ability to showcase featured/highlighted or sponsored programs.
- We are open to your thoughts on the wording. We feel any large programs or sponsored events should stand out and draw in a Member’s attention.
- We are looking for 1-2 sponsored programs and are preferably shown under a specific section, they can be larger in size than other program details. These are usually newly introduced programs and/or being atively promoted.
- Featured programs would be the second tier. When we have a featured program, they will have different constraints, either we want to bring attention to it or its part of a promotion/set of challenges.
- Order of precedence: Sponsored Programs > Featured Programs > All Programs.
- We would like an area where we could simply display Topcoder Community sponsor logos.
- We want to be able to browse the programs based on categories. For e.g. Technologies, Fun, Sponsors etc.
- We are open to exploring new page layouts, less scrolling, (fast loading!) a design that works for you (the user of this page) and you don’t need to necessarily have to stick with card layout.
Exploration Score
In terms of expectations, we would like to measure the concept against the following in the one to ten scale:
Creativity: 8
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 8
- 1: low-fidelity design, wireframe, or plain sketch
- 10: finished looking visual design
Exploration: 10
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
Branding: 7
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
Screen Requirements
01 Member Programs Page - Desktop
Use existing screen as reference to understand the functionality, and include the following functionalities/features on this screen.
- Global and Top navigation: Use this from existing design
- We don’t need the banner at the top (i.e. page title “Member programs” and its description)
- Programs to be displayed as cards. Each program card to have -
- Program title. Example: “ADOBE & TOPCODER COVID CHALLENGE SERIES”
- Program description. Example: “Adobe Document Cloud is partnering with Topcoder to host a series of challenges on the Topcoder platform to develop new digital solutions that can help public services agencies and educational institutions stay resilient in a post COVID world.”
- Program thumbnail. Refer to the existing screen.
- We need the ability to filter between active and past programs.
- Sponsored programs: to be displayed differently from the other program cards. Possibly in bigger size than the other program cards.
- Featured programs: Preferably in top row of the other program cards.
- See above in "Project Background section to understand sponsored and featured programs.
- It will be ideal to have both sponsored and featured programs above the fold.
- Ability to browse the programs based on categories. For e.g. Technologies, Fun, etc.
- Ability to search and sort. Sorting can be based on date added or alphabetical
- Footer: Retain the footer from existing design.
- Keep in mind that the same screen needs to have a mobile view (below)
02 Member Programs Page - Mobile
This is the mobile view for the previous screen, i.e. 01 Member Programs Page - Desktop.
- You can open the existing screen on a mobile phone or in responsive design mode in desktop browser to look at the mobile view.
- Global and Top navigation: Retain the header from existing design
- Rest of the functionality remains same as the previous screen, but optimised for mobile view.
- Footer: Retain the footer from existing design.
Target Audience
- Topcoder community members
Branding Guidelines
- Follow Topcoder brand guidelines. You can check out the branding guidelines at Topcoder Brand Guideline or the defined GUI KIT, and learn how to use it here.
- While we want you to follow the provided GUI kit, it’s fine if it’s not pixel perfect and that’s why we are allowing to use other design tools as well such as Adobe XD and Figma, in addition to Sketch which we currently use.
- Typography: Use Barlow Family - Regular and Condensed for headings and Roboto for paragraphs.
Size
- Desktop: Minimum 1366px width and height adjusted accordingly.
- Mobile: 428 x 926 px (or 1284 x 2778 px @3x)
- Mobile size is based on aspect ratio for iPhone 12 Pro Max.
Judging Criteria
Your submission will be judged on the following criteria:
- Fulfillment of provided objectives
Marvel Prototype
- We need you to upload your screens to Marvel App
- Please request for marvel app in the challenge forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
Stock Artwork
- Photos and icons are allowed to be used as per Topcoder Policy.
Submission and Source Files
- Submission File
- Submit all JPG/PNG image files based on Challenge submission requirements stated above
- Source File
- All source files of all graphics created in either Adobe XD or Sketch or Figma and saved as an editable layer
- Declaration File
- Declaration files document contains the following information:
- Stock Photos Name and Source Links from an allowed sources
- Stock Art/Icons Name and Source Links from an allowed sources
- Fonts Name and Source Links source from an allowed source
- MarvelApp share link for review
Final Fixes
As part of the final fixes phase, you may be asked to modify certain content or elements to bring your design in consistent to Topcoder branding guidelines.
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.