Challenge Summary
Recently we are facing a new design challenge, it’s very exciting and it has innovation opportunities. We need you to jump in, stay put and offer your greatest ideas for a web page which will show the TopCoder contest breakdown in a very modern and interactive way. Welcome, show off your skills!
Round 1
For your R1 deliverables please submit the mentioned requirements under “Concept Design Requirements” section.
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain the mentioned requirements under “Concept Design Requirements” section plus any updates from client feedback.
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to come up with rich interaction ideas to display a large volume of information about how TopCoder can help a client (tracks and contests descriptions) into a web page. With your ideas as basis you will design a scenario with layout, interaction flow, notes, etc, to explain your solution to our problem. You need to show with graphics how this page will work and behave.
You’re provided with two attachments for a start, TopCoderContestsTypeBreakdown.png and TopCoderContestBreakdownWithClientExpectations.pdf. Both show the different type of tracks and contests in TopCoder with information about each one specifically.
Attention: It’s important for you to know that we know what we want but we don’t know how we want it yet. That’s one of the reasons why we need your help, we need your ideas. This means you have A LOT of room to suggest innovative ideas. Again - What do we want? A standalone web page that shows how TopCoder can create for a client (contests types, final products and descriptions) in a highly rich interactive way.
FYI, we haven’t picked the technology we’ll implement this with but it’s probably going to be HTML5/JavaScript or Flash.
Branding and Guidelines
- Your design must fit 1024 pixels wide screen resolution.
- Use web-safe fonts.
- Optional: use TopCoder Website GUI Kit to extract elements, icons, whatever you find useful for your solution. However, the look is not a heavy parameter for judgment at this concept stage; scenario, layout and components behavior are more important (the feel).
- Colors are open to designers. Remember we’re not looking for a stunning graphic design though. Any color that explains your idea will do.
- Think of web 2.0 when you’re creating your solution. This page should be very MODERN and HIGHLY INTERACTIVE!
Concept Design Requirements
- First, watch this video. It’s the main start point for the web page concept.
- You watched it? Now you can keep reading. We want to play off of the idea of the 3 Pillars of Digital Creation. Think about the visual of vertical pillars (these 3 pillars) then flattening (from 3D to 2D). Then leading the user very clearly “What do YOU want to create on TopCoder?” nudging the user to click on one of the 3 “nodes” (Front-End, Software, Big Data & Algorithms), and it takes the user down the path of seeing all these awesome competitions in a really beautiful visual way.
- The page and interaction concept should start with the pillars. Content should be explored through user actions (mouse over, clicks, etc) letting the user see the "branches" or information nodes with possibility to watch more details (animated overlays, another kind of animated scenario, static, simple, your choice).
- As mentioned before, the starting point should be the 3 pillars (Front-End, Software, Big Data). In the attached PNG file you can see the branches from those pillars. Each one of them can be expanded; each one of them has information (which you can see in the attached PDF) that should be displayed in the page while the user is interacting with it. Use the portion of information you think fits best from that PDF, up to you but it's not mandatory to use all that content at this stage (just concept contest) but it would be nice to start thinking about how to organize and display all the content. Again, up to you.
- CONVERSIONS are important for us in this page. The most important one (for now) is to get the user business information. So there should be a way to see or activate a form somehow-somewhere built in within the page. The information needed is: Name, Company, Title, Email.
- Think of a very open scenario with animations and dazzling effects (wisely, only when necessary). Notice we don’t have layout neither navigation, it’s all up to you.
- Keep in mind USER EXPERIENCE, it must be very easy to use and understand for a possible new customer.
- The title of this page could be “What do you want to create on TopCoder?”. Use it somewhere for now.
- Notes help! In your submissions files, add a TXT file (or PNG file with text on it) explaining your idea/solution in details. We’d like to know how you envision this page. It will help us to understand your idea and therefore to provide a better feedback.
Resources
We found some interesting interactive pages you might want to take a look at to get some ideas. Don’t copy anything, just for reference.
- http://www.zunejourney.net/
- http://www.tyukanov.com/
- http://www.bankofimagination.com/
- http://www.amautalab.com/
Target Audience
Our main target is the high-up scale directors, decision takers on businesses and organizations. Overall, business managers who need an easy explanation about how TopCoder can help them with their problems through our development platform.
Judging Criteria
- Capability of exposing the information about TopCoder helping clients in an easy way.
- How intuitive is your solution?
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
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 a 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.