Challenge Summary
Welcome to CSFV Account Set Up and Invite Contacts Storyboards Design Contest. We are preparing some pages targeted to newly registered users in the website. We need you to come up with the look and feel of these important pages. Jump in now!
Round 1
For your R1 deliverables please submit the following screens.
1) Welcome New User Page
2) Find Friends Page
4) Find Friends Widget
Round 2
Final design will contain all the requested screens plus any updates from client feedback.
1) Welcome New User Page
2) Find Friends Page
3) Invite Friends Page
4) Find Friends Widget
5) Invite Friends Widget
The primary goal of this contest is to design the look and feel of three pages that will cover a workflow to help new users to set up an account and to find friends. Our design concern is focused on the user experience, we need this to be very easy to use and at the same time it must engage the user with exciting graphics/icons that help to understand the workflow; also important, to guide the user step by step through the process.
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. CSFVStoryboards.zip contains the files with the existing design of the site for you to take as guidance and re-use as much UI form elements as you can.
- Use web-safe fonts. 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. Declare your fonts according to the Studio font’s policies.
- Colors must match and appeal the current colors from the provided design.
- Show all the hover states for all the UI elements you create (buttons, hyperlinks, dropdowns, lists, etc).
- Think of web 2.0 when you’re creating your solution. We want to appeal to teens, and the general population.
Storyboard Requirements
Use Mockups.zip as guidance for layout and elements to display. These are very rough drafts; you are encouraged to come up with a better layout and components. Original suggestions are appreciated. Think about friendly written content to guide the user through process, we are open to suggestions regarding this topic too.
Use Template.psd for requirements 1, 2 and 3. For others use 06_Loggedin_Home.psd.
1) Welcome New User Page
This page is shown to users who register and arrive to the home page for the first time. Assuming their profiles are empty we need to encourage them to fill them out in a very easy way. See 1_welcome_mockup.jpg.
- Add a welcome message.
- Upload photo area must display a large empty profile picture with options to upload picture from computer or take a photo from webcam. Create screens that show the process of choosing and uploading a picture.
- Add “People you may know” area. This widget/area contains a list of possible known friends to add, so it should have picture, name and add friend button/link. Display at least 5 items. Important, it doesn’t have to be strictly placed at the bottom; it could be on one side, where you think it’s the best.
2) Find Friends Page (Step by step pages to find friends - 3 steps)
This page allows users to find friends through a nice workflow, focus on user experience. There are three steps (sub pages) to find friends.
- Steps marker area should display a series of steps that guide the user to the process.
- “People you may know” must be displayed in all the step pages.
2.1) Step 1 page (Import)
This sub page allows users to select an external source to import contacts from. See 2_findfriends_mockup.jpg.
- Place 6 external source providers: Gmail, Hotmail, Yahoo, Twitter, Facebook, Google+. Use icons as shown in the site footer/header social network icons, gray circle with white icon. It would be nice some sort of nice interaction with the providers.
- Each provider area has its icon, label, textbox for inserting username/email and a “Find Friends” button.
- Just so you know, after clicking on this find friends button it opens an external window, but this is out of scope for this contest, just FYI.
2.2) Step 2 page (Add Friends)
This sub page allows users to select which friends they want to add as CSFV friend. See 3_addfriends_mockup.jpg.
- Show a list of imported contacts with picture, name and email, together with a checkbox available to select as friend.
- The list must display 10 items; think about pagination or scrolling in case of more contacts.
- Add overall buttons somewhere to Add Friends, Skip or Cancel.
2.3) Step 3 page (Invite)
This sub page allows users to send invites to friends that are not registered at CSFV yet (invite to join). An invitation can be sent by two ways; to all imported contacts or by selecting contacts from a checkbox list with pictures/name. See 4_invitefriends_mockup.jpg.
- Display an UI with options to choose between: “Send invites to all my imported contacts” or “Select specific contacts to invite”.
- If user picks to send invites to all contacts show a success message.
- If user wants to select specific contacts, display a list similar to #2.2, contact with picture, name and checkbox.
- The list must display 10 items; think about pagination or scrolling in case of more contacts.
- Add Send Invites and Skip/Cancel button somewhere.
3) Invite Friends Page (Step by step pages to invite friends - 2 steps)
This page allows users to invite friends through a nice workflow. It’s very similar to Find Friends but using Import Contacts and Invite sub pages only.
- Steps marker area should display a series of steps that guide the user to the process.
- “People you may know” must be displayed in all the step pages.
3.1) Step 1 page (Import)
This sub page allows users to select an external source to import contacts from and/or to send individual email invites.
- Provide an option to send an invitation by entering email (s) address (s).
- Place 6 external source providers: Gmail, Hotmail, Yahoo, Twitter, Facebook, Google+. Use icons as shown in the site footer/header social network icons, gray circle with white icon.
- Each provider area has its icon, label, textbox for inserting username/email and a “Find Friends” button.
3.2) Step 2 page (Invite)
This sub page allows users to send invites to friends that are not registered at CSFV yet (invite to join). See 4_invitefriends_mockup.jpg.
- Display an UI with options to choose between: “Send invites to all my imported contacts” or “Select specific contacts to invite”.
- If user picks to send invites to all contacts show a success message.
- If user wants to select specific contacts, display a list similar to #2.2, contact with picture, name and checkbox.
- The list must display 10 items; think about pagination or scrolling in case of more contacts.
- Add Send Invites and Skip/Cancel button somewhere.
4) Find Friends Widget
- Design a widget, banner or link (very noticeable) on any of the columns where you feel is suitable, right or left, of the home logged in page.
- It must read “Find Friends”. You can add a couple of more line text to make it enticing.
5) Invite Friends Widget
- Design a widget, banner or link (very noticeable) on any of the columns where you feel is suitable, right or left, of the home logged in page.
- It must read “Invite Friends”. You can add a couple of more line text to make it enticing.
- Add Google, Facebook, Twitter and Email icons to represent users can invite friends from those kinds of external sources.
* Requirements 4 and 5 could be combined onto one single widget/area if you think it’s right.
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.