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.