Key Information

Register
Submit
The challenge is finished.

Challenge Summary

Welcome to BrivoLabs - Responsive Storyboard Redesign Contest Part II
BrivoLabs is our client in this contest. We have already the storyboard design for the BrivoLabs website (see the storyboard provided).
In this next series contest we need you designing some screens for Spoke Page website as listed in the contest details below by following the look and feel of the provided storyboard.
Your design need to be responsive in 3 different devices, PC, tablet and Mobile.


Brivo Labs is an Internet of Things company leading the emerging Social Access Management market space. Using social identities, Brivo Labs is focused on developing innovative applications that connect virtual communities with physical spaces.

Primary Goal:
We need you to design some more screens as listed in the requirements below by following the look and feel of the provided storyboard from our previous contest. This is the Spoke Page website that you need to redesign on this contest.
Your design should be responsive. It should be flexible to all these 3 devices, PC, tablet and mobile. 

Design Requirements:
General:
1. This Spoke page website will be shown, after user click the Community link from the BrivoLabs website (See storyboard, - the drop down menu at the right side of the navigation bar). 
--Feel free to explore this client community site to make sure you understand all the flow of the spoke page website.
2. Header : 
--Please use the same header as shown in the provided storyboard.

--Add a search function on the header for this storyboard design. The placement of this is up to you. Feel free to explore your ideas about this to make sure it works well in all the devices.
3. Footer :
--Please use the same footer as shown in the provided storyboard.
4. On every screens there will be some required elements that need to be appear (Tweets section, Brivo Challenge, Brivo Past Challenge). Please consider about this in your design since you need to design this website in a responsive way.
5. Feel free to include any ideas to make the page more user experience. Do some research how a site with discussion/community display the contents in a proper way. 

Required Screens:
1. Home Page
- Refers to this page
- Feel free to redesign the layout of the elements on this page. As long as all the elements on this page are still displayed somewhere.
- Follow the look and feel of the provided storyboard.
- You are free to include stockphotos to make this page more enticing.

2. Announcements Page
- Refers to this page
- This page will be shown upon clicking the Announcements link from the navigation.
- Actually this page contains the list of announcement that displayed in the homepage promo module (See the section below the navigation at the homepage)
- Feel free to redesign the layout of the elements on this page. As long as all the elements on this page are still displayed somewhere.

3. Announcement Detail Page
- Refers to this page
- This page will be shown upon clicking one of the items listed on the announcement page. In this case user click on Why FinancialForce link or View Details button from the Announcements page.
- Design this page by following the look and feel of the provided storyboard.
- Include the Leave a Reply form as shown in the page.

4. Discussions Page
- Refers to this page
- This page will be shown upon clicking the Discussions menu from the navigation.
- This page will contain some content for discussion with a link to view details for each section.
- Do you have any ideas how to display a discussion content? Perhaps with time started? Comment by? Feel free to include any ideas you have.

5. About Us Page
- Refers to this page
- This page will be shown upon clicking the About Us menu from the navigation.

Design Guidelines:
- Show hover effects for all buttons and UI elements that you create (buttons, hyperlinks, etc).
We need you to design the pages in 3 different sizes:
- Mobile (320 px width)
- Tablet (768 px width)
- PC size (1024 px width)

If you are not familiar with “responsive" web design, do your research about it and you can learn from these links :
- Wiki information
- Working Example : 
http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
http://twitter.github.com/bootstrap/
http://foundation.zurb.com/index.php (try resize your browser screen)
- Great Gallery Examples :
http://mediaqueri.es/

Important Notes:
- Make sure you include all the Stock Art requirements when submitting (Stock Art URL, File Number and description)
- Make sure storyboard design is possible to build in future development.

Branding Guidelines:
- Color: Please use the same look and feel for colors as shown in the provided storyboard. 
- Font: Open to the designer. Please be aware of studio font policies here.

Target Audience:
Salesforce customer community but overall should focus on both B2B and B2C.

Judging Criteria:
- Creativity
- Quality of your design.
- Consistency of your design within all the different sizes.
- How well you determine the user experience.
- How well you follow the look and feel of the provided storyboard while creating the required screens

Submission and Source Files
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.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
Also – if your PSD file is not well organized and useful as an editable source file for the client (ie your layers are not labeled properly, grouped properly, and/or some layers have been merged – making it difficult to edit them) you will be asked to fix your source file.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

CHALLENGE LINKS:

Screening Scorecard

SUBMISSION FORMAT:

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

CHALLENGE LINKS:

Questions? ‌Ask in the Challenge Discussion Forums.

SOURCE FILES:

  • Layered PSD files created in Adobe Photoshop or similar

You must include all source files with your submission.

SUBMISSION LIMIT:

5 submissions

SHARE:

ID: 30035919