Challenge Summary
Welcome to CSFV Gaming Site Storyboard Design Contest - Part 2 contest. We need you to design another round of pages to complete the existing storyboards. You’ll be creating 8 main pages with a few subpages using the current design as guidance/base for your work. Come and join!
** Notice this contest has a tight deadline. Most of the branding work is already done. Jump in NOW!
Round 1
For your R1 deliverables please submit the following screens (6 pages/screens required):
- Public Profile (User profile subpage for 02_Public_Profile_myfriend only)
- Own Public Profile (Message pages)
- Private Profile (Basic profile and Notifications Data pages only)
- FAQ
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 all the requested screens 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 design some pages of the CSFV Gaming Community Site. We need you to keep the same flow and style of the current storyboard design and follow the wireframes to complete the required pages below.
Please, carefully READ the overall site concept so you can understand what this site is about. Use the attached storyboards and wireframes as guidance for the requirements.
What is CSFV?
The Crowd Sourced Formal Verification (CSFV) program seeks to make formal program verification more cost-effective by reducing the skill set required for verification. The approach is to transform software verification (testing) into a more accessible task by creating a game that reflects the code model. Basically, the users will be playing games and at the same time they will be making software verification. We are looking to use the tool to verify open source software.
We envision this site as a global community with sub-sites focused on games, a nice mix of social features and heavy information delivery (social network + gaming website). The website concept is about breaking it down into global website and sub-sites, we will have 5 unique games, and each game will have a dedicated sub-site with content specific to that game, the main/global website will work as an aggregator of the sub-sites and as a Social network community, that means the sub-sites will have the same layout and navigation of the global website with different theme/colors/styles but delivering content specific to the game.
This description is meant to guide you on how the site works. This contest only focuses on designing some pages of the main community site using the provided storyboards as reference.
Branding and Guidelines
- The overall look must match the current design. Notice that “Consistency” is part of the judgment criteria for this contest, make it feel the same.
- Use web-safe fonts for the pages content. If you have any issue with the provided source files fonts just replace those fonts with a regular one (like Arial) and add a note in your submission explaining you made the change. You will be asked to replace those fonts if you become the winner.
- Your design must fit 1024 pixels wide screen resolution.
- Colors must match and appeal the current colors from the provided design.
- Keep the same naming system for the files. Scheme: ID_SCREENNAME_FEATURE. Sample: 02_Public_Profile_myfriend_hover.
- Show all the hover states for all the new UI elements you create (buttons, hyperlinks, dropdowns, etc).
- Think of web 2.0 when you’re creating your solution. We want to appeal to teens, and the general population.
Storyboard Requirements
1) Public Profile ( “Home > Public_Profile” from wireframes tree menu)
- Create the “User Profile” subpage ONLY. “Personal Wall” is already designed.
- There are three Public Profile scenarios depending on relantionship type, when I'm watching a user profile who is my friend, when I'm watching a user profile who is not my friend and when I'm watching a profile without being a member of the site yet. You need to use these files from the provided storyboards to place the "User Profile" subpage you are creating: 02_Public_Profile_myfriend.psd, 02_Public_Profile_notMyFriend.psd and 02_Public_Profile_unregistered user.psd.
2) Own Public Profile (“CSFV > Own_Public_Profile” from wireframes tree menu. Use 07_Own_Public_Profile.psd)
2.1) Personal Wall:
- Take care of the edit action of the user status. It shows an inline textbox to edit the status. Show how it works.
2.2) Messages page:
- Show the “add new message” flow.
- Show the message details and the quick reply action.
- Show how “search message” works.
- Add the sub menu (incoming, outgoing, delivered, and removed).
2.3) Friends page:
- Add the hover information for the friend’s handle (similar to current Achievements page hover in 04_Achievements_Logged_In.png).
- Show how “search friend” works.
- Show the submenu (all friends, blocked friends).
- The buttons are Send Message, Remove and Block instead of Ignore/Confirm.
3) Private Profile (“CSFV > Private_Profile” from wireframes tree menu)
3.1) Create View/Edit Basic Profile pae.
3.2) Create View/Edit Profile Configurable Data page.
3.3) Create View/Edit Notifications Data page.
3.4) Create View/Edit Data Sharing Options page.
3.5) Create Unregister Profile page (include the confirmation overlays).
4) Member Search
- Create the member results page. “Home > Member_Search” from wireframes.
- Show an auto-complete flow on the search textbox in the header. When the user starts typing a letter there should be a dropdown container attached to the textbox with some of the search results that matches the letters entered so far. Check Google search bar or Facebook search bar for auto-complete samples.
5) FAQ
- Create FAQ pages from wireframes “Home > FAQ”.
- Show list and details view.
6) Rules
- Create Rules page from wireframes “Home > Rules”.
7) Contact
- Create Contact page from wireframes “Home > Contact”.
8) Recover Password
- Create Recover Password page from wireframes “Home > Recover_Forgotten_Pw”.
Target Audience
Casual gamers, everyone who likes games from children to adult persons.
Judging Criteria
- Consistency with the current look of the site.
- Quality.
- 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.