Challenge Summary
Welcome to CSFV Gaming Community Wireframes Contest. We need you to create HTML wireframes for a community website focused on gaming. We’re looking for a modern way to deliver important information to users. We’ll be running multiple contests for this project, so jump in and get acquainted with this long time project.
Round 1
Round 1 wireframes will contain the following functionalities.
- Home page
- Dashboard
- User Profile
- Post Current Status
- Notification
- Navigation
Round 2
Final wireframes will contain all of the functionalities plus any updates from client feedback.
The primary goal of this contest is to create HTML wireframes for a community website, a very large one that integrates social/profiles information with browser-based games like puzzles, logic games.
Please note, first read the contest details below carefully, understand what things you need to take from Requirement Specification (RS) document, what things we want to omit from it, and what things we want to see in addition to the RS document.
General Requirements
- Produce HTML click through wireframes that can be used to showcase the required funcionalities.
- The website must be very easy to use and intuitive.
- You MUST cover all use cases mentioned in contest details below.
- SOCIAL is a very important factor on this site. How to make every single little feature sociable on this site. Some samples are sharing scores, bragging, sending challenges to friends, posting achievements on the site or other social networks, etc. What other options we have?
- You MUST use wireframes note pane in every single page you design to explain what RS items are addressed in that page, what things you added/changed/removed, what social network feature exist in this page, use it to make your idea clearer and help the client to give you constructive feedback.
- This is a repost for this contest, we don't want to see any previous submission in the milestone round, we assure you that we won't pick any submission that have been already submitted in previous contests, we are looking for a fresh design, with a clear notes in the note pane in each wireframe page, this will give us the feeling that you understand what you are working on, and help us to give you a constructive feedback.
Overall site concept
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.
Global website will have the global items like activity stream, member profiles, registration, etc, more details below. The sub-site will be specific to that sub-site, for example, news, leader board, game content, contests, tournaments, forums/discussions, blogging, tutorials, how-to play guides, shared solutions, etc. Global website will have the same specific items as in sub-site but will be more like an aggregator for the 5 sub-sites, which means there could be some differences in how content in page are displayed, for example, a sub-site may have a leader board page with a single leader board that is filtered according to tournament/contest, member, date, while in global site it will have more filtering options, i.e. filter based game type.
This contest only focus on implementing the Global website, the sub-sites will be addressed in future contests.
Wireframe Requirements
Required Social Networking Features
We want users to spend time on the website when they are not playing games, that why we want to build a Social Network Gaming Website. Here are the features we want to address in this contest:
- Activity Feed: facebook-like activity feed, list of stories from friends, news, and games.
- Connect with Friends: Friend requests, friend suggestions.
- Post/comment/like/share any activity in the website.
- Social-network-like use profile contains several options: Info, Wall, Photos/Videos, Blogs, games achievements, scores and badges, friends list.
- Recommendations: just like Amazon, when the user logs in, we want to be able to recommend games to him based on his history.
- Notifications: reminders of pending levels to finish, new messages, etc. Think of Facebook notification toolbar, works really well.
- Challenges: this functionality will be added in the future, but maybe this can be part of the pending notifications. Think of Facebook – you get alerts for activity that involves you. “Friend X just challenged you to play Y Game” for instance.
- Messages: should be a mini-email layout.
- Floating chat : chatting with friends.
The above items are addressed in the RS document, if any of them are missing, then make sure to add it. Note that we are not showing you any guides for how the layout should look like, what we want you to do is to follow the Requirements section below, and use your creativity to design the wireframes, if you decided to make any changes to RS, or you added anything not mentioned in the RS document, then you need to clearly mention that in your submission, here is what we expect from you:
Workflow Requirements
The following items should be covered in this contest :
Homepage
- Implement 2.1, 2.1.1, 2.1.1.1 - 2.1.1.7 from RS.
- Consider the news of the main page will contain all the news from the games aggregated. But as you go specific to the mini sites, you get game specific news, leaderboards, tutorials, downloads, etc.
- This page will be displayed to the user when they are not logged in. When they are logged in they should see the "Dashboard" as "Home page", so don't follow RS about showing "Dashboard" in navigation links.
News
- Implement 2.2, 2.2.1, 2.2.1.1 - 2.2.1.3 from RS.
Search
- Implement 2.3, 2.3.1, 2.3.1.1 - 2.1.1.4 from RS.
Register
- Implement 2.10, 2.10.1, 2.10.1.13 from RS, any item that talk about backend logic (i.e. system sending email notification) should be ignored.
Login
- Implement 2.11, 2.11.1, 2.11.1.1 - 2.11.1.6 from RS.
Logout
- Implement 2.12, 2.12.1, 2.12.1.1 - 2.12.1.3 from RS.
Dashboard (Logged in version of the homepage)
- You need to implement 2.14, 2.14.1, 2.14.1.1 - 2.14.1.4 from RS.
- We don't want user to customize dashboard.
- We don't want to implement the "Widget" concept, we want it to be more like facebook-like home page for logged in user, so you need to see what are the widgets mentioned in RS, and implement a page similar to Facebook home page (for logged in user).
User Profile
- Implement 2.16, 2.16.1, 2.16.1.1 - 2.16.1.10, 2.17, 2.17.1, 2.17.1.1 - 2.17.1.5, 2.18, 2.18.1, 2.18.1.1 - 2.18.1.9 from RS, ignore any item that talk about backend system functionality.
- You need to show this page from two perspective, from user perspective, and from friend perspective, means that I want to see how I can use the private/edit items in the profile, and how I can interact with a friend profile (public profile).
Connect with Friends
- Implement 2.21, 2.21.1, 2.21.1.1 - 2.21.1.6 from RS.
Chat
- Implement 2.22, 2.22.1, 2.22.1.1 - 2.22.1.5 from RS.
- We want it to be a floating chat area like Facebook.
Messages
- Implement 2.23, 2.23.1, 2.23.1.1 - 2.23.1.6 from RS, ignore any item about backend system functionality.
- Try to make it simple version of the email, NO rich-text editing.
- We want to store chat log as messages (like Facebook).
Post Current Status
- Implement 2.24, 2.24.1, 2.24.1.1 - 2.24.1.3 from RS.
Post on Walls
- Implement 2.25, 2.25.1, 2.25.1.1 - 2.25.1.7 from RS.
Notifications (In general means Notifications in front-end)
- Show how user receive notifications in front-end, friend request notifications, and messages notifications.
Navigation
- This is covered in Dashboard and Home page sections in RS, you can follow what is mentioned in the document to get us a solid navigation.
- Please note that you need to show how the website navigates from global website to sub-sites, no need to show any content for sub-sites, only how you design the navigation.
Target Audience
Casual gamers, everyone who likes games from children to adult persons.
Judging Criteria
- User experience.
- Social features implementation.
- Completeness and accuracy of the wireframes as defined in the attached requirements.
Submission File
All requested contest requirements/screens as clickable HTML files unless otherwise stated in the contest details.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
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.