Challenge Summary
Welcome to [topcoder] Community Track Landing Pages Storyboards Design Challenge. We want to redesign the existing community landing tracks for design, development and data, to serve as destination site for targeted marketing campaigns online. We need a design that is consistent with the existing brand and also to convey the specific skills that each community track has to offer.
Best of lucks!
Round 1
For your R1 deliverables please submit the requested screens design under “Design Requirements” section.
- Design Track Landing Page Desktop View
- Development Track Landing Page Desktop View
- Data Track Landing Page Desktop View
- Design Track Landing Page Mobile View
Round 2
Final design will contain all the requested screens under “Design Requirements” section plus any updates from client feedback.
- Design Track Landing Page Desktop and Mobile View
- Development Track Landing Page Desktop and Mobile View
- Data Track Landing Page Desktop and Mobile View
The primary goal of this challenge is to redesign the look and feel of three (3) pages, the community track landing pages (Design, Development and Data). These pages are going to be targets of a marketing campaign to show the visitors what they can do, learn and achieve on each track of [topcoder].
We need you to add lots of thoughts to the design keys (see below under design requirements), to think about how to help to understand (very easy and pleasant) how each community track works and what are the benefits. Those small details are the ones that will make you have more chances to win this challenge. Be creative and show off!
Branding and Guidelines
- Provide desktop and mobile view of the screens. Specific limitations 1010px wide for desktop and 320px wide for mobile, as the provided baseline (CommunityTracks.zip). Re-use the header and footer. The content and layout must be something NEW.
- Follow the provided Website PSD GUI Kit. The design needs consistency among all the features you create.
- Follow the flat design theme in the storyboard and please consider great use of white space.
- You are encouraged to create icons and quality graphics for your design to standout where you think appropriate. Keep in mind your graphics should follow the look and feel of the site.
Design Requirements
Keys to consider
- The design should reflect the breadth and diversity of the [topcoder] community (within the various tracks). Real [topcoder] members should have more of a presence in the new design.
- The new Track Landing pages should capably serve as destination sites for targeted marketing campaigns. These campaigns will be aimed at specific skill demographics (designers, developers and data scientists) and the Landing pages should be tuned to capture the attention of those audiences as they arrive at [topcoder] from pay-per-click ad campaigns and the like.
- The Track Landing Pages serve a distinct purpose on the site, therefore they should not overly resemble other key pages on the website.
- The track landing pages should reflect the special needs of the community in that track, and spotlight the specific interests of each. Track landing page for Design should have a different emphasis (content, features, etc.) than Data or Developers (and vice versa); they can, however, share a common visual approach, or even a consistent layout, as much as possible.
- The design of these pages should help the user to answer the following questions:
-- What does the community for this track look like? How many members? Where are they from?
-- What kind of challenges can I find/participate in for this track? Talk about the types of challenges specific to this track.
-- If I’m new to this community, where should I start? Links to: track-specific FAQs, “getting started” guides, pertinent blog entries, etc.
-- Show me some topcoders from this track that represent the best, most talented of what the community has to offer.
-- Show me some examples of the best work that has come out of this track. Find some convincing way to communicate the quality of this work (the nature of this evidence will change from track to track).
Community Track Landing Pages
The three pages should follow the same layout scheme. Content will vary depending on the specific track. Design three landing pages, for Design, Development and Data. They should all follow these common features but show content specific for each track.
1) Register
Design a prominent ‘Register’ button on the page content. This is not the most important button on the page though. Consider that.
2) Track Summary
Design an area with vital statistics about the activity within that track: 10000 Registered coders, 10000 Unique countries, and so on.
3) Welcome Headline
Design a “sales” area. This will display a marketing message. Sample for design track:
- Headline: Do you love to design? Do you want to work on your craft and prove your skills while winning design challenges?
- Message: Welcome to [topcoder] Design; a platform that allows up-and-coming designers to step into the spotlight—giving them the chance to break into the industry in front of peers, experts in the field and real world Fortune 500 clients. Compete in all types of design challenges to win prize money and establish your street cred. Improve your portfolio while working on real world projects for big-name clients. Collaborate with your peers and industry experts as you sharpen your skills or master something new and dominate the Design track! We’re looking for talented designers to become part of our growing community. What are you waiting for? Become a [topcoder] designer today! Read detailed guides and great tips in the Design area of the Help Center.
4) Featured Member
Design a featured member area. It will show:
-- Link to a story for that member (add Read Story link/button).
-- Link to the member profile for that member (add View Profile link/button).
-- Add a quote: “Aladdin could have easily shown a whole new world to Jasmine by inviting her to join [topcoder] if she was a coder, even if she wasn’t”.
-- Sample profile for design: http://studio.topcoder.com/?module=ViewMemberProfile&ha=mahestro
-- Sample profile for development: http://community.topcoder.com/tc?module=MemberProfile&cr=15247903&tab=des
-- Sample profile for data: http://community.topcoder.com/tc?module=MemberProfile&cr=19849563&tab=alg
5) Gallery of Work
This gallery is unique per each track. This is totally open to creativity, content and layout. Design a showcase area under the following requirements:
- Design: Gallery of thumbnails of design. Clicking a thumb might display designs in an overlay. Certain thumbnails might provide launching-off point to a detailed case study.
- Development: An example of a working app, stats about lines of code generated, feature some technologies (hot ones: iOS, Angularjs, Node, etc.) A cool visualization of code generated by year, among others.
- Data: Summaries from a competition perspective (Nasa challenges: ISS, Asteroids) with links to the mini-sites or results leaderboards, etc. Really need to be clear the impact our data scientists made on these projects. (i.e.; “Want to protect the Earth from asteroid impacts?”).
6) Community Pictures
Design an area with photos of the community members for each track. Photo sources might include (Extract photos from the official Flickr account):
- Past [topcoder] Open winners.
- Photos shared on Flickr with a specific [topcoder] tag.
- Any other category you can think of.
7) Banners
Design two banner spots. They must be 300x250 pixels. You place them wherever you consider the best place is. They should be equal highlighted:
- Design a [topcoder] Open promo spot. Logo attached.
- Design a generic spot for advertising. Add message “5000 DR Available. Next SRM on Apr 24th,10:00 GMT”.
8) Starting Guide
Design an area highlighting access to specific track “starting guide” in the Help Center. Extract content from the following areas.
- Design: http://help.topcoder.com/design/
- Development: http://help.topcoder.com/development/
- Data: http://help.topcoder.com/data-science/
9) How It Works
Design a “How this track works” area. Replace “this track” with the name of the respective track (design, development, data). A high-impact (graphics, bold text) module that explains, in general terms, what you could expect if you were to register for a challenge in this track. Note that these descriptions / mechanics will vary from track to track, so be prepared to flesh out three different directions for this module.
10) World Stats Map
Design a world map area, using historical / present TC data to illustrate things like: where do contestants in this track live? What countries have won the most money? etc. These maps should show interesting content depending on the specific track landing page. This can have some sort of fresh interactions if you want, not required.
11) * For Design Track only * Policies
Design a “Policies” Module that explains [topcoder] policies on design submissions, particularly use of licensed imagery or typefaces. Please place this information on the right-hand side of the page, and up high (above the fold) for greater prominence. You can use “lorem ipsum” text for the moment.
Target Audience
- Potential new members and clients.
- Current community members and clients.
Judging Criteria
- Originality.
- Quality of design execution.
- Consistency. Design must feel part of the branding.
Submission File
Submit JPG/PNG image files based on challenge submission requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create one 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.