Challenge Summary
Welcome to the FAST! DevNet Developer Community Design Concepts Challenge! This contest is focused on creating design concepts/visual ideas for a web-based developer community, that would be similar and be a partner with TopCoder! We would like to see your initial ideas and design concepts for this community: in terms of navigation and screen flow, responsive design, page layout, and overall look and feel.
This is a FAST!! contest, please be aware of the timelines and if you have any questions, please ask in the forums!
Round 1
The following initial screens for review:
1. Home / Landing Page (web and mobile)
2. User Profile (web)
3. Challenges (web)
Round 2
All your final screens (for web, and optionally mobile as well) and user flow ideas, after implementing checkpoint feedback
Contest Details
We would like to see DESIGN CONCEPTS for a web-based software developer community, similar in structure and functionality to the TopCoder community - and would like your initial ideas on what the following screens should look and flow like. The idea of this developer community is for developers of various technologies to participate in challenges, share resources and information via forums, promote collaboration and innovate on new ideas, and create a pool of talent. Think about the screens that may be needed, or any additional features that may be useful to a developer community to achieve these goals. We are interested in seeing your ideas - an implementation of a cool, modern design - this isn't a storyboard contest, so you don't need to create a final, usable screen design here - we're more interested in seeing the look and feel that you can design and envision for this community. These are the following screens we would potentially like to see:
1. Community Home / Landing Page
2. User Profile
3. Awards and Recognition (could perhaps be integrated into user profile)
4. Resources (includes Documentation, SDK's, API's, Sample Apps)
5. Applications / Widgets Gallery
6. Challenges
Design Concept Goals
There may be a good way of integrating some of these pages into each other, or any additional pages that you may deem relevant to the site - we welcome your idaes in terms of user flow, think about what a developer would want to get out of this community and how to implement it.
- Suggest screen flow, and top-level navigation for the website, header/footer elements, etc
- Think about how these screens would be designed responsively
- What is the best UX for a user of this website to get maximum utility out of this community, and want to spend more time on it and share information/skills, engage with the community
- What would a software developer want out of an online community? Think like a user would, and show us your ideas
Design Concept Requirements
Please show your web screens and a couple of mobile screens to show how your design will breakdown to mobile
- Web: 1100px width, height is up to the designer. Please keep the main content within 960px width.
- Mobile: 320px by 480px (or longer height wherever scrollable/required - but keep imoprtant content above the fold)
Main Navigation Suggestions:
- Home / Landing Page
- Resources
- Challenges
- Applications/Widgets Gallery
- Help
There should be an easy way to get to the User Profile page, as well as Login/Logout/Register links, and a Search bar.
- Leave a logo placeholder in the header of each page.
1. Community Home / Landing Page:
This page shound contain some or all of these elements:
- Overview
- Featured Challenges
- Graphic banner about developer community, Call to action to Register
- Area for featured news items, or featured resources (modular area)
- Footer with SiteMap/Links
2. User Profile
This will be an important page in the community, as it is where users/developers can showcase their skills, and their participation in challenges.
- User Profile Photo
- Username
- Ratings (maybe a graph/chart, along with numerical ratings)
- Achievements / Badges / Forum Post Count
3. Challenges:
- Sub sections: Active Challenges, Past Challenges
- Link to RSS Feed of new challenges
- Challenge Details (as table rows, or as a grid, or any layout ideas you have)
These details should include at least: challenge name, start date, end date, prize amount, registrants, submissions, Submit/Register button.
Challenge Name should be a hyperlink to challenge details page
4. Awards and Recognition:
- Could be a sub-section from the user profile page, or a section within it
- Should showcase a list of user's achievements, along with a badge/graphic accompanying each one
- Each list item should be a hyperlink to more details
5. Resources
This will be an important section of the website, and will have the following sub-sections:
- Documentation
- SDK's
- API's
- Sample Apps
The Resources page will be a landing page for these sub-sections, and can have featured content from each of the sub sections, as well as quick links. Perhaps Featured forum posts from resource-related forums.
Branding Guidelines
- The community colors are: green (#346632), blue (#286180), purple (#452469), Orange (#e17500)
- You CAN NOT use clip art of any kind. All designs must be your original work.
- Do not use their logo or reference the actual company - this is about the developer community
- Colors are open to the designers but it must work with the specified colors and additional colors should be complementary.
References:
- This the brand and colors you should be using (reference link)
Here are some developer community designs/layouts we think work well
- http://developer.twilio.com
- http://developer.github.com
- https://developer.paypal.com
- TopCoder community
Fonts and Colors
- Fonts are open to the designer, please be aware of Studio font delivery requirements
- Colors are open to the designer, try to use the community colors listed above, or colors complementary to them.
Target Audience:
- Developer Community
Judging Criteria
- User flow and navigation design
- Layout and responsiveness of design
- Use of branding colors and fonts
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Your screen designs as JPG or PNG files.
Source Files
All original source files of the submitted design. Original source files of each screen as PSD or AI files.
Final Fixes
As part of the final fixes for this contest, 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.