Challenge Summary
Welcome to the Topcoder AI Hub Minisite Design Challenge!
In this challenge we are looking to leverage our design community to create a hub for all things artificial intelligence at Topcoder, including innovation challenges, agentic AI, learning etc.
Please read the challenge specifications carefully and let us know if you have any questions in the forums.
ROUND 1
Please provide the following screens for checkpoint along with your clickable Marvel prototype with hotspots.
- 1 - Home/Landing page (desktop)
- 2 - Customer page (desktop)
- 3 - Competitions page (desktop)
- 4 - Learning (desktop)
ROUND 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.
- 1 - Home/Landing page (desktop + mobile)
- 2 - Customer page (desktop + mobile)
- 3 - Competitions page (desktop + mobile)
- 4 - Learning (desktop + mobile)
CHALLENGE OBJECTIVES
- To design a minisite for AI related content at Topcoder in desktop and mobile format.
- To provide a seamless flow for our user types to get them up to speed with AI at Topcoder.
- Adhere to Topcoder’s latest branding as of December 2024.
- Important! For this challenge we accept designs created in Figma only.
AUDIENCE
- Existing Topcoder members interested in AI
- Potential members, tech enthusiasts
- Clients and potential sponsors
SCREENS/FEATURES
Please make sure your design includes the following screens/sections. We are open to your suggestions about the structure of the screens as long as the screens deliver the same content and allow for the same functionality that is required. Content of the pages can be found here.
1. Home/Landing Page
This is where the visitor will enter the AI Hub. This page can be bold in style and sizing, look visually appealing and engaging as it is inviting visitors to engage.
- Global header (same on all pages)
- Hero section
- Key Stats
- Short overview
- Get started section
- Success stories
- Footer (same on all pages)
2. Customer Page
This page will be shown when the visitor will click on the Engage with us CTA on the Home page. This page can be bold in style and sizing, look visually appealing and engaging as it is inviting visitors to engage. The page should include the following sections (content can be found in the attached document):
- Global header (same on all pages)
- Welcome section
- Engagement opportunities section
- Contact us
- Footer (same on all pages)
3. Competitions Page
A list of AI related competitions with meaningful data points. This page should be more compact with less bulky visulas, so that the visitor can quickly get to the important information right away.
- Global header (same on all pages)
- Competition search and filter: a lightweight way to search for and filter competitions. Include a search field, track selection, and a way to see past competitions. Please do not copy the current Topcoder challenge listing side panel, we need something way less complex for this application.
- List of active competitions including
- competition title,
- prize,
- deadline,
- number of participants,
- track: AI/ML, Development, Data Science,
- CTA for registering or to view the competition if one is already registered.
- Anything that you think would be useful.
- Footer (same on all pages)
4. Learning Page
A list of resources Topcoder offers in various AI related fields, like AGI, agentic AI or innovation.This page should be more compact with less bulky visulas, so that the visitor can quickly get to the important information right away. The type of content can be videos, text tutorials, or links to articles.
- Global header (same on all pages)
- Inviting hero section
- Search and filter section: a lightweight way to search for and filter courses.
- List of resources including data like
- Course or resource title (e.g. ‘Foundations of Agentic AI’, ‘AGI: Concepts and Possibilities’, ‘Innovation Pipeline Development’),
- level (beginner, intermediate, advanced),
- possibly an image representing the subject,
- short description,
- number of modules if applicable,
- length of the course, or the article to read,
- a CTA to start learning.
- Footer (same on all pages)
DEVICE SPECIFICATION
- Desktop - 1440 px width, height based on content
- Mobile - 393 px width, height based on content (iPhone 16)
BRANDING GUIDELINES & ASSETS
- IMPORTANT! Your design must use Octana Topcoder UI KIT.
- Use only Material Design icons in your design.
- Fonts: Figtree font family for headers and Nunito Sans font family for body texts.
- Topcoder Logo
- Topcoder design and assets references - Figma source included!
- Topcoder has recently updated its brand. You can view the refreshed website at https://www.topcoder.com (all pages before logging in). New site was just launched at the beginning of December 2024.
JUDGEMENT CRITERIA
- Creativity: Impactful - 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: Strict - carefully follow the provided guidelines and stick to them.
DESIGN TOOL
- Figma
STOCK PHOTOS AND ICONS
- For the icons and fonts, check the Branding Guidelines section. Other stock icons or fonts are not allowed in this challenge.
- Use only free images from the allowed sources or from Topcoder Flickr.
- Make sure to declare the links in your notes to avoid screening issues.
MARVEL PROTOTYPE
We use Marvelapp to showcase your design to our client.
- 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 created in Figma. It’s mandatory to locally download your source file and send it to us as part of your deliverables.
- Submission.zip: your screens exported as PNGs.
- Declaration.txt: a text file that contains all the notes about font usage, photo and icon declarations with links and your Marvel project URL.
- Preview.jpg: create a JPG preview file of 1024 x 1024 px.
FINAL FIXES
- This challenge will have 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.