Challenge Summary
Welcome to the SFDC Blogging in Communities UI Design Concepts Challenge!
There isn't a formal blogging "module" in Salesforce Communities today – this is where we need your help to get creative on constructing a blogging platform. This challenge is to build out a robust blogging "module" that would have the fundamentals of constructing a blog post, a responsive UI, and also incorporate a Chatter feed under each blog post to collect/express any comments. These blog posts would also need to be available to be displayed both internally (in an internal Salesforce org) and externally (in a Community).
We are looking for the [topcoder] design Community to help us with this cool new part of the Salesforce experience!
Round 1
Submit your initial screen for Checkpoint feedback
1) Create New Blog Post (Desktop)
2) Published Blog Post View (Desktop)
3) All Posts within Blog (Desktop)
4) Blog Posts in Profile View (Desktop)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required page with all checkpoint feedback implemented.
1) Create New Blog Post (Desktop + Mobile (SF1))
2) Published Blog Post View (Desktop + Mobile (SF1))
3) All Posts within Blog (Desktop + Mobile (SF1))
4) Blog Posts in Profile View (Desktop + Mobile (SF1))
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
For this design challenge you will be designing a blogging module for Salesforce Communities. You are provided with a couple of design direction images to help you understand what we are looking for. We are also looking for you to design this within the existing Salesforce look and feel. Take a look at the below design guidelines as further reference as to how to refine your design.
What is Salesforce Communities:
Communities are branded spaces for employees, customers, and partners to connect. You can customize and create communities to meet business needs, then transition seamlessly between them. To learn more: sforce.co/1rSOqUg
IMPORTANT!! Design Guidelines:
Visualforce Reference: (Desktop)
https://developer.salesforce.com/page/An_Introduction_to_Visualforce
(This is a developer-focused site, but has UI guidelines...please also go through the attached blogging examples)
Salesforce1 (SF1) References: (Mobile)
http://sfdc-styleguide.herokuapp.com/assets/S1AppGuidelines.pdf
http://sfdc-styleguide.herokuapp.com/?id=examples
http://sfdc-styleguide.herokuapp.com/?id=style
Design Focus:
- Your designs need to be responsive, for this challenge you will be design both desktop and salesforce1 mobile view
- While the style guidelines are limiting in some ways, we are looking for a creative customization for the Salesforce.com Community and Salesforce1
- How should this application look?
- Read the user stories and decide what should the priority features be?
- How effectively can a blog author make a post, find prior posts and respond to Chatter comments?
- How effectively can a blog reader read, respond to and see their responses when logged in?
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work..
- We had provided couple of UI blogging examples - please DO NOT COPY, use them as a reference.
- We want this to be MODERN application design!
- Screen Sizes:
- - - Desktop Screen size 2880 x 1800
- - - Salesforce1 Mobile View (Portrait View - 320 x 480 px)
User Stories and Required Screens:
Below, we have couple of user stories along with the required screens.
A. Blog Author
- I’m an internal Subject Matter Expert at a company and would like to write an article focusing on one of our products
- I go to the Blog object tab to create my blog post
- I can select whether this will be an internal, external (or both) blog post
- Upon hitting a “Publish” button, the post is then published based on my settings above
B. Blog Reader
- I’m an external customer logging into the Customer Community to read a blog post
- I really like the material, so I comment via Chatter
- I feel this material is relevant to others I know, so I hit the appropriate Social Share button to share out to my Facebook, Twitter, etc.
1) Create New Blog Post:
- A User will able to create a blog post from within "Blogs" TAB, make sure you show the SF framework around the Blog tab as shown in the Blog Author Sample view in the Blogging UI Examples
- What are the fields required for creating a blog post, "Post Name, Main Content, any Rich Text Editor Tools that you would like to show...etc.. please keep this simple.
- What are the actions items that need to be shown.? Should we allow the user to save it as a draft?
- Should we allow user to preview a blog post before publishing them, how should it look like?
- A user will be able to select whether this a internal or external community (or both) blog post..
2) Published Blog Post View:
- Clean and legible view of the post from the Author’s point of view
- We need to allow users to share this post using facebook, twitter, email, etc..
- All users will have the ability to comment via Chatter in each of the blog posts. (see example - please DO NOT COPY)
- It would be great to show the number of times the blog post has been viewed.
- The user who authored this post will have options to edit, delete and anything that you think would help?
3) All Posts within a Blog:
- Show us a view of how we can show all posts within a blog..
- Assumption is that, this will show limited set of posts within a page with pagination controls to view more posts
- Each of the posts shows a few lines of text with options to click and view the full post as well as show the number of comments that were received on each posts.
- Need to allow users to have any additional capabilities by allowing them to filter the posts by selecting "Most Commented Posts" etc..think on how these can be shown.
- Please follow any standard design guidelines from visualforce/salesforce1 as applicable..
4) Blog Posts in Profile View:
- Within a profile view, a user will be able to see all blog posts which they had authored...assume these posts will be shown underneath the blogs TAB in profile view.. (as shown in the example image)
- Each of the blog post will need to show a few text and link back to the original blog post..
- Come up with thoughts on how this can be shown..
Target Audience:
- Internal Subject Matter Expert at a company who would like to write an article about that company’s products
- External customer logging into the Customer Community to read a blog post
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
- Is your design following the design guidelines (visualforce and salesforce1)?
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.