CSFV - Games Page Design Concepts Challenge

Welcome to the CSFV - Games Page Design Concepts Challenge! This challenge is focused on creating design concepts/visual ideas to change the current games page to fit more games and display more content.

We are providing you with content. We are looking for you to provide new design concepts and ideas on how this page should be. This is the first step in planning our new user experience!

In this challenge we are looking for DESIGN CONCEPTS on how this could work. What should the user see and experience?

Round 1

Submit your design for a Checkpoint feedback:
1. Games Page. (Logged in & Non Logged In States)
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Final Design plus any Checkpoint feedback:
1. Games Page (Logged in & Non Logged In States)
2. Achievements Page.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Challenge Description:
CSFV is looking to change their current games page so it can fit more games (10 games or more), please reference our Games view, you can see how it fits only 5 games at the time being, also you will notice we are displaying the same content for logged in users and non logged in users; we want to change that to show different content depending on user state, we are looking for new ideas on how this page can be designed.

This page gets the most visits from our users and we want to improve its content and add interaction in order to increase the conversion rate to other pages and activities.

We are looking for the [topcoder] design Community to help us with planning our new UX "user experience".

Supporting Documents:
- CSFV PSD Kit (CSFV PSD Kit.zip)
- Main Site Storyboard (Main Web SIte.zip)

Minisites Links:
Reference those sites for real info, we don't want to see lorem ipsum.
- Circuitbot.
- Xylem.
- Ghostmap.
- Flowjam.
- Stormbound.

Design Concept Goals:
- How quickly could you find information?
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN design!

Design Considerations:
- Open current Games view.
- Focus on page content; keep the header and the footer as they are.
- You are allowed to change the layout if you want.
- We need fresh ideas that contribute with a very modern design, something out of the box and also that implement good UX practices.
- The new page UI style and UX must be cutting edge, modern, fresh, very cool.
- You are allowed to change the font; fonts must be something beautiful to look at. If you’re going for the fancy fonts make sure they are available in the fonts policies lists first and also in Google Fonts library. Declare your fonts according to the Studio font’s policies.

Required Screens:
Games page will be changed to have three subpages
1) “Find Games” Page - this is the current /games page and improved as following:
A) Non Logged In User:
- The new carousel should fit 10 games.
- Remove thumbnails under the carousel.
- We need to include description capsule, info and play now in carousel for each game. When you click on “Info" button we need to display a new panel to show more information about the game, how this can fit the layout? (most of info below can be taken from minisite games - no lorem ipsum)

• Game icon

• Game name

• Game rating (stars)

• Play Now button (we might have games in app store so we need design for this)

• About the game

• Carousel contains set of images and videos - user should be able to select the image/video to display in the carousel

• How to play (optional - means some games may not have it)

• Game Goals (optional - means some games may not have it)

• Tips and Tricks (optional - means some games may not have it)

• Challenge of the week (optional)

• Social Liking (Show FB Likes as we currently have in minisites play/home pages)

• Social Sharing

• Facebook/twitter/g+ pages

• Report problem

B) Logged In User:
In addition to the requirements for Non Logged In User we want the following to be added under ‘Find Games’ page:
- The user should be able to see the games he/she is playing, think ok how this can be achieved? such as displaying a brief about his/her recent activity in each game he/she played, .etc, here are some ideas about panels/content that can be added for logged in user :

• My Games  - basically show what the user (logged in) has played so far with brief stats

  • Game small banner

  • Last time played

  • Score

  • Level

  • Rank

  • who is from my friends playing it

• Top Leaderboard (Scores) - taking into account multiple games - each has it’s own scores

• Top Awards - taking into account we have multiple games - each has it’s own awards

• Recent Activities - When user complete level, earn new score, win badge/award .. etc

2) Achievements
- You are provided with the old design for achievements pages as a reference (Main Web SIte.zip)
- Achievements - taking into account multiple games - each has its own achievement
- Also for Achievements page you need to display panels specific to user achievements in the games.

3) Activities (out of scope in this challenge you can only design the navigation for it)

4) General Requirements:
- In any of the pages you are designing in this challenge we need to add more content at the bottom of the page to increase page conversion/user-interactive with the website we need, we want to add the following content :

• Hot News or something a like (mashable.com, theverge.com or other websites that gives you more content at the bottom for the user to communicate)
  - Take news content from News page instead of providing lorem epsom content, we want to feel how the page looks like with real content.

• Recent forums postings (something like in TCO website where it show title/part of the message) with who posted it and when. Take forum posts content form existing verigames.com/forums and use it in the design.

• Twitter Feed

• What else (other than the carousel) can be added to this page? We are open to new ideas and content to be added that currently exists in the verigames.com website, please don’t come up with ideas that cannot practically be implemented.

Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance

Target User:
- Casual gamers, everyone who likes games from children to adult persons.

Judging Criteria:
- Capacity to provide a design out of the box.
- Design Quality and execution.
- Originality.

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 for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.