The UX Power of Salesforce Community Builder

Brian Molstad | March 21, 2016


All of us here at 7Summits, especially our user experience team, are very excited about Salesforce Community Builder, which is now in general availability. 

At a high level, the new Salesforce Community Builder is part of the Lightning overhaul at Salesforce, which has transitioned development on the platform to be client-side and component driven as opposed to server-side and page-driven. This results in greater extensibility and flexibility in terms of user interface design and is also very mobile-friendly.

For a light snack of the features of Community Builder and the Salesforce Spring ’16 Release, see our own Tim Kocher’s post here. Those who are really hungry can dig into Salesforce’s Community Builder documentation.

Through our work on Napili template based projects, we’ve become intimately familiar with the tool. From a UX perspective, we think Community Builder is powerful, forward-thinking, liberating and in general, rocks. Here’s why:

Lightning Design System

With the release of the Community Builder, Salesforce has demonstrated that they are truly committed to the UX of their product moving forward, especially for communities. Salesforce has done a fantastic job creating a detailed design system to ensure the expansion of the Lightning platform consistently according to modern UI and visual design patterns. It includes everything from color palettes, typography and iconography, to specific interface elements and components such as cards, data tables, modals and much more along with HTML and CSS for each. We like it because it allows our creative teams to pull from best practices and avoid reinventing the wheel for simple interface elements. On the other hand, the platform doesn’t get in the way, so when we need to push the envelope and take a custom design approach, we’re enabled to do so.

Flexible Community and Page Templates


As we have worked with a number of different community platforms over the years, a major constraint has often been a limited set of page layouts to build an experience of various elements. Salesforce has included a number of default templates, but has also enabled teams to create custom layouts.  The Community Builder default templates handle the vast majority of use cases, but we routinely run into complex use cases that require a custom approach. This level of flexibility can allow teams to avoid painful tradeoffs when crafting an experience, such as making a page component unnecessarily go full-width or combining multiple components into one in order to fit into a pre-set layout.

In addition, the community header can easily be overridden if the experience calls for a unique branding experience, additional navigation options or more advanced and personalized controls.  The default templates are quite configurable, but again, when you have a need, the platform doesn’t get in the way.

Responsive Design Made Easy

Community Builder supports responsive design at its core. All out-of-the-box components are fully responsive and the reliance on client-side JavaScript primarily for the user interface means developing responsive custom components is a snap. The Builder itself lets you switch the view from mobile to tablet to fluid with a single click so it’s easy to compare how the interface renders across devices. This keeps cross-device design at front of mind throughout the process and makes it easy for teams to test, iterate and adjust.

All of the above reasons contribute to what’s likely to be the real game-changer for cross-functional design and development teams.

Community Builder Enables Cross-Functional, Accelerated Prototyping

The Salesforce Community Builder (and related templates) are not a silver bullet or a way to leapfrog the UX process. The prototyping phase of any project or initiative must be created with a thorough, user-centered research. Before diving into Community Builder, start with lean prototyping techniques (such as sketching and rough wireframes). Once a team is aligned on user needs and maximum impact functionality, it is time to move to higher fidelity. This is where this tool provides new efficiencies.

Salesforce has always been famous for their “Clicks Not Code” mantra. Lightning makes it easy to drag and drop components on a page. They have improved all previous attempts of using drag and drop functionality and created a truly state-of-the-art software package.

Salesforce Community Builder strives to create a single tool where any cross-functional team can collaboratively build a prototype from concept to code. Community Builder will enable our design teams and stakeholders to focus less on disparate one-off deliverables such as wireframes, design comps and initial coded prototypes to focusing on a single deliverable — the product itself. This will translate to faster time-to-market, better cross-team alignment, higher-fidelity prototypes to test with users, and faster iterations and improvements. Seeing this trend in a best-in-class platform means our processes will evolve and improve alongside our products. That’s definitely worth getting excited about.

Harness the Power

Get in touch with us to learn more about Community Builder, its capabilities, and ways to extend it using 7Summits’ Lightning Components.

Like this post? Share it!