Submit a solution
The challenge is finished.

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:

IMPORTANT!! Design Guidelines:
Visualforce Reference: (Desktop)  
(This is a developer-focused site, but has UI guidelines...please also go through the attached blogging examples)

Salesforce1 (SF1) References: (Mobile)

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 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.

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.


2015 topcoder 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 "" file.
  3. Place all of your source files into a "" 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.


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
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30045701