Challenge Summary
Welcome to the TopCoder/CloudSpokes Website Design Contest! We are building a NEW website from scratch and we need the Design Studio Community to help design it! The audience for our new site consists of both our customers and our community. It is our goal to give everyone a great user experience.
For this contest we need you to provide an outstanding design that is simple, “flat” and "Responsive".
Round 1
Checkpoint Submission
Show us your initial designs for feedback!
Desktop View (1024x768)
- Home
- Challenge
- Community
Mobile view (320x480)
- Home
Round 2
Final Submission
Desktop View (1024x768)
- Home
- Challenge
- Community
Mobile view (320x480)
- Home
- Challenge
- Community
Any updates from the Checkpoint
Contest Description
Its time to start designing! We need a new modern site! We need a site that is Responsive! We want an engaging user experience!! (we hope that you also want these things!)
In this contest we need you to focus on designing the new TopCoder/CloudSpokes home page along with a couple of key pages for our audiences
As a community member, we value your ideas!
- What is important to you when you arrive on the site?
- How would you (using graphics) direct new members to sign up?
- How would you (using graphics) direct new customers to sign up?
- What community/competition tools would be useful to you?
Design Problem
- We are merging two brands into one! We need to get the conversation started as to what the overall site experience should be like.
- What is the best "initial" community experience for our designers, developers and algorithmists?
- What is the best "initial" customer experience?
- What should the new site look like? (colors?, branding etc)
IMPORTANT
- We are providing the winning designs (1st and 2nd place) from the Community Design Concepts contest
- We would like you to use these as a "base" - look to improve, combine, fix and update the user experience.
- This is only the start - help us get to the final design!
Design Goals
LETS GET STARTED!!
We are looking for you to design the following pages (with appropriate views)
- Home page page
- Challenges page
- Community page
Right now, we see three primary “click-paths” a user could take when visiting the site.
1. Customers (visit the primary “overview” page)
2. Community (visit the Community page)
3. Challenges (both groups should see the challenges currently running)
Primary Design Considerations:
- Flat design and great use of white space.
- Simple, to the point. No clutter.
- Should be fun and enticing - not professional and stuffy.
- Think about how your design could be responsive
- Focus on the layout and the user experience, not the branding.
- If your inspired to have some fun and mashup a TC/CS logo you can include it or just use a small logo placeholder.
View 1 - "Home Page"
Think about the different user click-paths!
- This is more of a marketing view for the why someone should join TopCoder/CloudSpokes either as a Customer or Community member
- Quickly register!
- Attract Graphic Designers, Developers and Algorithmists to register and be part of the community.
- Attract potential Customers to learn more and reach out to us.
- Inform the public about what we do!
MAIN PAGE:
Think about the overall page grid and how the content will look for mobile
Messaging
We need an large space for a simple message. This message will change from time to time, so please just use lorem ipsum for now. The message will always be short - about 1 or 2 small sentences. This space may also be used for rotating banners.
Register & Login
This page will be viewed primarily by potential members who are new.
- How will you entice them to sign up?
- Also need a login button.
Navigation
We need a small navigation at the top that captures a user "logged-out" and "logged-in view"
Mini Navigation
Logged-out view
- Register
- Login
Logged-in view
- My Dashboard
- My Profile
Main Navigation
The main navigation will be as follows:
- Customer Solution
- Community
- Blog
- Help
- Login/Logout/Register (please match these to the views you show in the mini-nav above)
Sub Navigation
- Sub nav should also be shown.
- Show us something that will be responsive! Do not use tiny menus. Use lorem ipsum for sub nav for now. Each subnav will have about 7 items only.
The Jump
- There should be clear paths or jump points for people to take.
Customers: Our customers are companies from many different industries.
Community: We have three different types of community members looking for contests: Software Developers, Algorithm Specialists and IA/UX Designers.
Challenges: The main Challenges page will focus on ALL challenges we offer, not just one type. (see Challenges page requirements below for more info).
View 2 - "Challenges"
This page will show the following items:
1) Three fun clean boxes at the top of the page that will point to the three main challenge groups:
- Design
- Software
- Algorithm
2) A table with ALL challenges listed
- Please only show 10-15 challenges in this table and then show pagination implying that you can get more
- Show all of the columns you see on a Studio Active contests page. In fact, you can see that data in your design as mock data.
- Show a way to “tag” each challenge with one of the three main groups (Design, Software or Algorithm). Use color coding, an icon, or any other way to make sure people can easily see which category they belong to. Match them somehow to your boxes at the top of the page!
You must strive to keep this page clean and simple, even with the large amount of text and data. Use whitespace wisely and keep your coloring with the right amount of neutral treatments and contrast treatments
View 3 - "Community"
We just ran a Design Concept contest for this page and we want to expand and improve the overall page design.
Logged out view
- Review the (1st Place) attached source files - "Logout" page design
- This is the page a community member would see before they log into the site.
- How does this page work along with the NEW home page your are creating?
- This is more of a marketing view for the why someone should join the TC/CS designer/developer/algorithm community
- Quickly register! (how does this work with the new navigation your creating?)
- What captures the attention of a Software Information Architect or User Experience Designer?
- What captures the attention of a Software Developer?
- What capture the attention of an Algorithmist?
- This page needs to be interesting and exciting for a new member and quickly allow and existing member the ability to login
Community Design Updates
- The provided design is a great "sales" page for the community - but we want to show more ongoing items - make this your community destination page
- We want the new Community member to see Featured and Active contests (what would make you interested to register/login?)
- Reduce the "banner" size - what is appropriate for you the community member (do you want to see a large banner?)
- News and Event feeds?
- Top Ten feeds?
- What items should a Community member see before they login?
- Update the overall design based on your new site home page and challenge page design.
References
Flat Design Reference Docs:
http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/
http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/
http://fltdsgn.com/
Target Audience:
- Current and potential customers
- Current and potential community (The entire TopCoder Community AND the entire Cloudspokes community)
Branding Guidelines:
- Look at the existing color palettes - what colors do you prefer?
- Review the provided design from the "Design Concepts" contest - What do you like? What should we keep/continue to refine?
Judging Criteria:
- Did you capture the requested items and is your overall site design new and engaging?
- Were you able to convey your concepts and ideas visually
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
Submit JPG/PNG image files based on contest submission requirements stated above.
Source Files
All original source files. Original source files should be saved as layered Photoshop PSD files or AI / EPS (Illustrator) files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. If items were missed from the checkpoint round you may be asked to include them in your final design.
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.