Challenge Summary
Welcome to the “Topcoder NASA Community UI Design Challenge''! The scope of this challenge is to create a site dedicated to Topcoder members who are interested in working on NASA challenges. At a high level, the site will host all NASA challenges that are running on Topcoder’s website from UI Design and Development challenges to Data Science ones.
CHALLENGE OBJECTIVES
PROJECT OVERVIEW
USER STORY
AUDIENCE
PROJECT BACKGROUND
NASA is very excited to continue working with Topcoder and as more projects would be coming in the future, we’d like to have a dedicated site for the members who are interested in the NASA challenges. This page would include information about the current NASA challenges, past challenges, and future challenges. Members can also connect with other designers, developers, data scientists with the same interests, either on slack or on forums.
The page will be accessed from desktop and mobile and should be easy to scan the information for.
DESIGN GOAL & PRINCIPLES
SCREENS REQUIREMENTS
Landing Page / Minisite:
In this challenge, we need to design a page for the Topcoder NASA Community. This page will contain all the important information a member needs to know about upcoming work at Topcoder related to NASA. The landing page will live under the Topcoder site, so you can reuse the Topcoder navigation and footer.
The landing page will have to include the content for the following sections:
Note: it’s up to you how you order the listed sections, don’t need to follow the order above. Also if you have any other ideas for things that would be useful to have on such a page, you are welcome to add them.
Feel free to do research on other websites that host such challenges. One example of the sites we like is this one (do not copy).
Description and sample content for each section:
1. Intro
2. Active Challenges
This page will show all the active challenges that are running now. Keep in mind the situation where we might have a large or a small number of them for showing scrolling or other options.
For each challenge we should see:
When the user clicks on an active challenge, that will take him/her to the challenge details on Topcoder site (there’s no need to design a separate section for this here, just have a link).
3. Upcoming Challenges
This will contain a list of all the upcoming challenges. It will have a description of what the challenge is about to get the member’s interest. If the user clicks on the link to see more, it would take him to the forum post.
4.Completed Challenges
This area will include a list of past challenges. When the user clicks on a completed challenge to see more details it will take him/her to the existing challenge details page.
5. Total Historic Prize Payouts
This will show the total amount of prizes paid to members at all times. Feel free to include any other stats to make this section more interesting.
6. Leaderboard
This leaderboard will show the top-ranking members based on their wins, which will show as points, similar to the TCO leaderboards we have now.
Each table entry will include:
7. Connect
This section is about members being able to connect to other members interested in NASA challenges. We will have a forum link for this and also a slack channel that should be included here, with a link for joining these.
8. FAQ & Resources
Here we will see a list of questions that are most asked by members such as and resources:
FAQ Examples:
Resources: can include links to Thrive articles related to NASA, any case studies we have on Topcoder about NASA, any promotions articles from NASA, etc
If you have any other ideas about how to make this page better, we’re excited to see them!
DEVICE SPECIFICATIONS
BRANDING GUIDELINES
In this challenge, you should follow the Topcoder brand only. What does this mean to you?
Important to know:
STOCK ART
FINAL DELIVERABLES
Create an archive with all 4 items below:
CHALLENGE OBJECTIVES
- Responsive Web Application
- To create 2 screens (desktop + mobile)
- To provide complete information about the challenges NASA that will run on Topcoder as well as about the members winning them
- Use Topcoder branding
Round 1
Submit your initial design for Checkpoint Feedback:- Topcoder NASA Community Landing Page (Desktop)
Round 2
Submit your Final Design plus Checkpoint Updates:- Topcoder NASA Community Landing Page (Desktop + Mobile)
PROJECT OVERVIEW
- The purpose of this page is to have one place where the Topcoder member interested in NASA work can find all the upcoming challenges as well as past challenges. The members can also connect with each other.
- Topcoder team will use this page to promote it in the community to increase awareness and participation in the NASA challenges
- The information should be easy to scan at a glance so the readers can quickly get a good understanding of the problem
USER STORY
- Name: Anakin
- Occupation: Topcoder Data Scientist Competitor
- Goals:
- Quickly learn about the upcoming challenges for NASA and connect with other members interested in this
- Frustrations:
- Can’t find all the information about the upcoming NASA challenges on the site
- Wants:
- A page to see the upcoming challenges and past NASA challenges, and connect with other Topcoder members who have the same interest
AUDIENCE
- Topcoder designers, developers, and data scientists interested to work on NASA challenges
- Anyone online who might be interested to read and work on NASA challenges
- Users will land at this page, either from social media or an email marketing campaign or from the Topcoder site
PROJECT BACKGROUND
NASA is very excited to continue working with Topcoder and as more projects would be coming in the future, we’d like to have a dedicated site for the members who are interested in the NASA challenges. This page would include information about the current NASA challenges, past challenges, and future challenges. Members can also connect with other designers, developers, data scientists with the same interests, either on slack or on forums.
The page will be accessed from desktop and mobile and should be easy to scan the information for.
DESIGN GOAL & PRINCIPLES
- Simple and clean design over complex and flashy
- Content hierarchy - think about the priority of information. What are the most important things for the user? The user should be able to check this page and easily understand what this page is about, what challenges are upcoming, which ones are closed etc.
- Topcoder branding is mandatory. NASA branding should not be included, just use space images to show the theme
SCREENS REQUIREMENTS
Landing Page / Minisite:
In this challenge, we need to design a page for the Topcoder NASA Community. This page will contain all the important information a member needs to know about upcoming work at Topcoder related to NASA. The landing page will live under the Topcoder site, so you can reuse the Topcoder navigation and footer.
The landing page will have to include the content for the following sections:
- Intro
- Active Challenges
- Upcoming Challenges
- Completed Challenges
- Total Historic Prize Payouts
- Leaderboard
- Connect
- FAQ & Resources
Note: it’s up to you how you order the listed sections, don’t need to follow the order above. Also if you have any other ideas for things that would be useful to have on such a page, you are welcome to add them.
Feel free to do research on other websites that host such challenges. One example of the sites we like is this one (do not copy).
Description and sample content for each section:
1. Intro
- Title: “Topcoder NASA Community”
- The tagline “Exciting opportunities to help solve tough problems from NASA!”
- We’d like to have a Call to action to sign up for updates named “Sign up to get notified about new challenges" / “Get Updates”.
2. Active Challenges
This page will show all the active challenges that are running now. Keep in mind the situation where we might have a large or a small number of them for showing scrolling or other options.
For each challenge we should see:
- Challenge name
- Start date and end date
- Challenge type: design, development, data science
When the user clicks on an active challenge, that will take him/her to the challenge details on Topcoder site (there’s no need to design a separate section for this here, just have a link).
3. Upcoming Challenges
This will contain a list of all the upcoming challenges. It will have a description of what the challenge is about to get the member’s interest. If the user clicks on the link to see more, it would take him to the forum post.
4.Completed Challenges
This area will include a list of past challenges. When the user clicks on a completed challenge to see more details it will take him/her to the existing challenge details page.
5. Total Historic Prize Payouts
This will show the total amount of prizes paid to members at all times. Feel free to include any other stats to make this section more interesting.
6. Leaderboard
This leaderboard will show the top-ranking members based on their wins, which will show as points, similar to the TCO leaderboards we have now.
Each table entry will include:
- Rank
- Handle
- Points number
7. Connect
This section is about members being able to connect to other members interested in NASA challenges. We will have a forum link for this and also a slack channel that should be included here, with a link for joining these.
8. FAQ & Resources
Here we will see a list of questions that are most asked by members such as and resources:
FAQ Examples:
- How to join the NASA challenges?
- Can I include the NASA design/code in my portfolio?
- How do I know when a challenge is launched?
- What are NASA vehicles?
Resources: can include links to Thrive articles related to NASA, any case studies we have on Topcoder about NASA, any promotions articles from NASA, etc
If you have any other ideas about how to make this page better, we’re excited to see them!
DEVICE SPECIFICATIONS
- Desktop: width: 1440 px x height as much as needed
- Mobile (responsive application): width: 320 px x height as much as needed. You should export your designs for presentation and in Marvel at 2X.
BRANDING GUIDELINES
In this challenge, you should follow the Topcoder brand only. What does this mean to you?
- Follow Topcoder branding for font typography, buttons, colors, layouts, buttons and theme.
- Branding guidelines about Topcoder typography can be viewed here(use Barlow Condensed and Regular font for the headings and Roboto font for the paragraphs)
- Download the Topcoder GUI KIT from here (Sketch only) or check elements in the Marvel project shared above.
- Content width should be 1280px or 1024px as shown here
- Icons: use only the Streamline icon set icons that will be shared in the forums
- Download the NASA logo from here.
Important to know:
- We have run 2 minisites (1 and 2) recently for NASA but we DO NOT want you to follow this style. User Tocoder style entirely, and only add images to show the space aspect.
- Note: our brand is adjusting, meaning that we are moving away from large spacings between sections and lots of large images which end up adding too much scrolling for the user, so we would like to show the information in a compact format. Good examples of pages that are like this are Start and Learn pages. We like how simple and compact these pages are.
- In addition, the majority of the users are laptop users so look to show as much useful information as you can above the fold for laptop size (768px).
STOCK ART
- Stock Photos are allowed but only from the websites with photos free for commercial use from those allowed by Topcoder (Public Domain Archive, Pexels, and Unsplash). You can also use any photos from the NASA Site.
- Icons: we will share them on forums.
- Only Streamline icons are allowed or those taken from the GUI KIT.
FINAL DELIVERABLES
Create an archive with all 4 items below:
- An archive called Source.zip file to include:
- All original vector source files created in Sketch, XD, Figma, etc.
- An archive called Submission.zip file to include:
- All your design files in PNG or JPG format
- Your declaration files to include any notes about fonts usage and your Marvel prototype link
- Create a JPG preview file of 1024 x 1024 px
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.