Challenge Summary
Welcome to the Topcoder Website Style Concept Design Challenge!
We want to build a new exciting visual style package for Topcoder community public websites. The styles should reflect the renewed energy on updating the Topcoder community and strengthen the Topcoder Community brand.
Challenge Objective:
- Web design
- 3 screens
- Desktop format
Read the challenge specification carefully and let us know if you have any questions.
- Homepage
- Track Details
- Track Details – Data Set
- Homepage
- Track Details
- Track Details – Data Set
Background Overview
Explore and build a visual package for Topcoder Community key pages. Focus on novel visual treatment, avoid replicating well established trends (from websites like Dribbble), and create a high-quality design system and package for several key pages and content modules.
Target audience and domain specifics
Your visual design concepts should take into account our definition of target audience and geographics. Research and think on what are the drivers/motivators to achieve credibility, visual interest, and brand positioning. We want to not only have a better design from our competitors, but to position ourselves as a great consumer experience, and a professional space.
Target Audience:
Students & young professionals. Tech-savvy people age 16-25 who are starting or fresh out of school, looking to build professional experience as a stepping stone towards their career in the software industry.
Freedom-seekers. Tech-savvy people age 26-35 who want to control when and how they work and earn.
Geographics: Global
What is the target audience?
Smart, innovative, young, independent, competitive, a bit nerdy
What is our community?
Diverse, competitive, cooperative, social
What is the product?
Trustworthy, intuitive, engaging, motivating, social
Visual direction
Your designs must be based on the visual directions we have established. Do not simply copy elements from our moodboard, but creatively transform the style elements. Try to use elements from both directions as they work well together. Use the following moodboard for design inspiration, it does capture our comments and provides a solid direction for your concept explorations: https://marvelapp.com/b63h394/screen/54598285
Direction 1: Evolution
Keyword characteristics: Change, High contrast, Overlay, Fine lines, Scientific
Topcoder started while ago—18 years to be precise—and during our journey we did change a lot. This direction outlines our transformation from a website for fun competitive challenges into a professional work platform where people compete to design and build high quality software.
Direction 2: Independence
Keyword characteristics: Duality, Pattern, Close up, Timeline
We encourage you to use a combination of both styles as there are elements to be used from both, but this is not mandatory.
From a place for fun Topcoder transformed into an alternative type of employment opportunity or side income. This is one of our goals - to help democratize software development and allow people to be in control of what they work on, when they work, where they work, and how much they work. Topcoder is the perfect platform for the freedom-seekers to break from the mundane 9 to 5 job.
Content & Structure
You will build a design system that showcases 3 different pages with specific content modules. Our new website will have a redesigned navigation that you should include in your concept designs. Here is the updated navigation specification https://marvelapp.com/89423f8/screen/54465717 (link to source).
To experience the mechanisms of the navigation, check this prototype https://marvelapp.com/f9b88ee/screen/50064026 (but ignore the visual styles!!!).
For this challenge, we don’t have a predefined styleguide or components, and we are looking at it as an exploration challenge to get new ideas for our future style. The only thing we’d like you to use is the navigation we attached. Note: the navigation source files are in sketch but you can take a screenshot from Marvel and use in your design.
1. Home page
The home page should be telling the story of what is the Topcoder community, and what people can do. The main page must allow people to quickly identify:
- What is Topcoder
- What can I do
- Where should I go next
Think about how your design aligns with the visual directions and the storyline. Example tagline for the home page “Challenge yourself. Get paid” - showcase how much money have been awarded to date on the platform ($89,648,059.6). Please also think for other alternatives that showcase what is Topcoder.
Content modules to consider for the home page:
- Hero area - visual showcase of Topcoder community platform
- Call to action (CTA) – “Join the community”
- Showcase for all the tracks (Design, Development, QA, Data Science & Analytics, Competitive programming)
- Interesting challenges happening at the moment (an interesting challenge is one with higher prize or big name customer, challenging problem, etc.)
- Customer showcase - build trust for members that there’s high quality work available
- Topcoder Open tournament information (general information about TCO which will have a link to go to this page). In this section it will clearly be explained what is the event, allow access to past events, and help redirect potential sponsors to the appropriate business pages.
- Member showcase/success stories - from different tracks
- Secondary CTA for business - how to redirect to the Topcoder business website
What are Tracks on Topcoder?
The new Topcoder community website would be organized by tracks: Design, Development, QA, Data Science & Analytics, Competitive programming. Each track is a section that would focus on a specific contextual domain. Tracks would have content pages and challenge listings for their domain, and a track-specific section of the Topcoder Open. This would allow members within the track to easily find all that is relevant for them.
2. Track Details Page
Each track will have its mini-home page that is totally dedicated to the domain. The goal is to explain what the track is, what type of work is available, and more specific content - challenges, problems, statistics, etc. Each track would have a different structure depending on the domain, but there are several specific modules that you should try to design for the track main page.
Try to redesign the Data Science and Analytics page as a sample page. Use content from https://www.topcoder.com/community/data-science/ and the section in general.
Content modules:
- Hero area - Track positioning statement
- Call to action (CTA) - Join the community
- Track overview - what can I do here?
- Interesting challenges happening at the moment
- Track stats overview - member statistics, country statistics, challenge participation, best new members, etc. (you can take data from Statistics page)
- Customer project highlight area (ad)
- Track groups highlight. (Groups are sections that are focused on specific technology or company challenges - iOS group, Android group, IBM group, etc.).
- Topcoder Open latest updates - current stats, news, updates
- Member showcase/success stories - from different tracks
- Secondary CTA for business - how to redirect to the Topocder business website
Note: each of the track details pages are focused on different content types — challenge listing, track statistics, problem listing, solutions, analysis, data sets, design gallery, and many more. We want to focus on the more content-heavy cases.
3. Track Details - Data Set List Subpage
What is a Data Set?
A data set is comprised of 2 data types: Training Data and Test Data. A simple example would be, when we want to create a machine learning algorithm to recognize your face. In the beginning, the machine needs to see multiple photos of you to “learn” how you look, we’re basically training the model, and all those photos are called Training Data. Once the machine has learned how you look, we will want to give it some tests photos to see if it passes or fail. This is Test Data. You can train and test the machine at multiple times, so you create a history of data sets with specific dates.
On this page, you have to design an easy to scan list of Data sets. Use this page for content: https://community-app.topcoder.com/examples/contentful/viewport/74EiBlvrKT0ulWySYk1GIk. Do not copy the page, but redesign it to align with your concept vision
Content modules:
- Title/header
- Dataset list
- What are datasets and how they work?
- Customer project highlight area (ad)
Each listing to include:
- short, exciting description
- link to dataset source
- history of the dataset (simple statement of when the dataset was collected, what are the sources).
- solutions we’ve built around this data (customer projects that benefited from the solutions, this will redirect to the business website).
How to get started content:
Data is a valuable resource. It may contain important insights that will prove transformative for your business or for the world. But it is increasingly valuable for another reason as well: its use in training machine learning algorithms to perform reliably, efficiently, and accurately.
With Topcoder Datasets you get access to high-quality, labeled data--some of which cannot be found anywhere else--and are given the tools to shape your own data as well. These data sets are intended to help you shape and strengthen algorithmic models and sharpen your data science abilities along the way.
We recommend starting by exploring our keystone data sets, getting a better understanding of what they contain, and, if you’re interested, try pairing them up with your algorithms or others found in Models & Algos.
Branding
- Colors and fonts are up to you. All we require is to include the new navigation in your designs.
Stock Artwork & Icons
- Stock photos are allowed for this challenge. We’d like you to think about the value of photography as design elements, and explore what are the best types of photography that would support the design.
- You can also use any photos from our TC Flickr albums
- Make sure to declare all your assets properly or you might fail screening
Target Devices
- Web Desktop: 1280px width with height adjusted accordingly
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Young people age 16-35 years old, who would be interested in registering on Topcoder
Judging Criteria
- How innovative your concept is?
- How easy is to read the team information?
- Is the design consistent and follows the GUI designs?
- Hierarchy and organization of content
- Overall design aesthetics
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Sketch, Photoshop, Illustrator, XD, etc.. Layers should be named and well organized.
We want to build a new exciting visual style package for Topcoder community public websites. The styles should reflect the renewed energy on updating the Topcoder community and strengthen the Topcoder Community brand.
Challenge Objective:
- Web design
- 3 screens
- Desktop format
Read the challenge specification carefully and let us know if you have any questions.
Round 1
Submit your initial design for a Checkpoint Feedback- Homepage
- Track Details
- Track Details – Data Set
Round 2
Submit your Final Design plus Checkpoint Updates- Homepage
- Track Details
- Track Details – Data Set
Background Overview
Explore and build a visual package for Topcoder Community key pages. Focus on novel visual treatment, avoid replicating well established trends (from websites like Dribbble), and create a high-quality design system and package for several key pages and content modules.
Target audience and domain specifics
Your visual design concepts should take into account our definition of target audience and geographics. Research and think on what are the drivers/motivators to achieve credibility, visual interest, and brand positioning. We want to not only have a better design from our competitors, but to position ourselves as a great consumer experience, and a professional space.
Target Audience:
Students & young professionals. Tech-savvy people age 16-25 who are starting or fresh out of school, looking to build professional experience as a stepping stone towards their career in the software industry.
Freedom-seekers. Tech-savvy people age 26-35 who want to control when and how they work and earn.
Geographics: Global
What is the target audience?
Smart, innovative, young, independent, competitive, a bit nerdy
What is our community?
Diverse, competitive, cooperative, social
What is the product?
Trustworthy, intuitive, engaging, motivating, social
Visual direction
Your designs must be based on the visual directions we have established. Do not simply copy elements from our moodboard, but creatively transform the style elements. Try to use elements from both directions as they work well together. Use the following moodboard for design inspiration, it does capture our comments and provides a solid direction for your concept explorations: https://marvelapp.com/b63h394/screen/54598285
Direction 1: Evolution
Keyword characteristics: Change, High contrast, Overlay, Fine lines, Scientific
Topcoder started while ago—18 years to be precise—and during our journey we did change a lot. This direction outlines our transformation from a website for fun competitive challenges into a professional work platform where people compete to design and build high quality software.
Direction 2: Independence
Keyword characteristics: Duality, Pattern, Close up, Timeline
We encourage you to use a combination of both styles as there are elements to be used from both, but this is not mandatory.
From a place for fun Topcoder transformed into an alternative type of employment opportunity or side income. This is one of our goals - to help democratize software development and allow people to be in control of what they work on, when they work, where they work, and how much they work. Topcoder is the perfect platform for the freedom-seekers to break from the mundane 9 to 5 job.
Content & Structure
You will build a design system that showcases 3 different pages with specific content modules. Our new website will have a redesigned navigation that you should include in your concept designs. Here is the updated navigation specification https://marvelapp.com/89423f8/screen/54465717 (link to source).
To experience the mechanisms of the navigation, check this prototype https://marvelapp.com/f9b88ee/screen/50064026 (but ignore the visual styles!!!).
For this challenge, we don’t have a predefined styleguide or components, and we are looking at it as an exploration challenge to get new ideas for our future style. The only thing we’d like you to use is the navigation we attached. Note: the navigation source files are in sketch but you can take a screenshot from Marvel and use in your design.
1. Home page
The home page should be telling the story of what is the Topcoder community, and what people can do. The main page must allow people to quickly identify:
- What is Topcoder
- What can I do
- Where should I go next
Think about how your design aligns with the visual directions and the storyline. Example tagline for the home page “Challenge yourself. Get paid” - showcase how much money have been awarded to date on the platform ($89,648,059.6). Please also think for other alternatives that showcase what is Topcoder.
Content modules to consider for the home page:
- Hero area - visual showcase of Topcoder community platform
- Call to action (CTA) – “Join the community”
- Showcase for all the tracks (Design, Development, QA, Data Science & Analytics, Competitive programming)
- Interesting challenges happening at the moment (an interesting challenge is one with higher prize or big name customer, challenging problem, etc.)
- Customer showcase - build trust for members that there’s high quality work available
- Topcoder Open tournament information (general information about TCO which will have a link to go to this page). In this section it will clearly be explained what is the event, allow access to past events, and help redirect potential sponsors to the appropriate business pages.
- Member showcase/success stories - from different tracks
- Secondary CTA for business - how to redirect to the Topcoder business website
What are Tracks on Topcoder?
The new Topcoder community website would be organized by tracks: Design, Development, QA, Data Science & Analytics, Competitive programming. Each track is a section that would focus on a specific contextual domain. Tracks would have content pages and challenge listings for their domain, and a track-specific section of the Topcoder Open. This would allow members within the track to easily find all that is relevant for them.
2. Track Details Page
Each track will have its mini-home page that is totally dedicated to the domain. The goal is to explain what the track is, what type of work is available, and more specific content - challenges, problems, statistics, etc. Each track would have a different structure depending on the domain, but there are several specific modules that you should try to design for the track main page.
Try to redesign the Data Science and Analytics page as a sample page. Use content from https://www.topcoder.com/community/data-science/ and the section in general.
Content modules:
- Hero area - Track positioning statement
- Call to action (CTA) - Join the community
- Track overview - what can I do here?
- Interesting challenges happening at the moment
- Track stats overview - member statistics, country statistics, challenge participation, best new members, etc. (you can take data from Statistics page)
- Customer project highlight area (ad)
- Track groups highlight. (Groups are sections that are focused on specific technology or company challenges - iOS group, Android group, IBM group, etc.).
- Topcoder Open latest updates - current stats, news, updates
- Member showcase/success stories - from different tracks
- Secondary CTA for business - how to redirect to the Topocder business website
Note: each of the track details pages are focused on different content types — challenge listing, track statistics, problem listing, solutions, analysis, data sets, design gallery, and many more. We want to focus on the more content-heavy cases.
3. Track Details - Data Set List Subpage
What is a Data Set?
A data set is comprised of 2 data types: Training Data and Test Data. A simple example would be, when we want to create a machine learning algorithm to recognize your face. In the beginning, the machine needs to see multiple photos of you to “learn” how you look, we’re basically training the model, and all those photos are called Training Data. Once the machine has learned how you look, we will want to give it some tests photos to see if it passes or fail. This is Test Data. You can train and test the machine at multiple times, so you create a history of data sets with specific dates.
On this page, you have to design an easy to scan list of Data sets. Use this page for content: https://community-app.topcoder.com/examples/contentful/viewport/74EiBlvrKT0ulWySYk1GIk. Do not copy the page, but redesign it to align with your concept vision
Content modules:
- Title/header
- Dataset list
- What are datasets and how they work?
- Customer project highlight area (ad)
Each listing to include:
- short, exciting description
- link to dataset source
- history of the dataset (simple statement of when the dataset was collected, what are the sources).
- solutions we’ve built around this data (customer projects that benefited from the solutions, this will redirect to the business website).
How to get started content:
Data is a valuable resource. It may contain important insights that will prove transformative for your business or for the world. But it is increasingly valuable for another reason as well: its use in training machine learning algorithms to perform reliably, efficiently, and accurately.
With Topcoder Datasets you get access to high-quality, labeled data--some of which cannot be found anywhere else--and are given the tools to shape your own data as well. These data sets are intended to help you shape and strengthen algorithmic models and sharpen your data science abilities along the way.
We recommend starting by exploring our keystone data sets, getting a better understanding of what they contain, and, if you’re interested, try pairing them up with your algorithms or others found in Models & Algos.
Branding
- Colors and fonts are up to you. All we require is to include the new navigation in your designs.
Stock Artwork & Icons
- Stock photos are allowed for this challenge. We’d like you to think about the value of photography as design elements, and explore what are the best types of photography that would support the design.
- You can also use any photos from our TC Flickr albums
- Make sure to declare all your assets properly or you might fail screening
Target Devices
- Web Desktop: 1280px width with height adjusted accordingly
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Young people age 16-35 years old, who would be interested in registering on Topcoder
Judging Criteria
- How innovative your concept is?
- How easy is to read the team information?
- Is the design consistent and follows the GUI designs?
- Hierarchy and organization of content
- Overall design aesthetics
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Sketch, Photoshop, Illustrator, XD, etc.. Layers should be named and well organized.
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.