6 Stunning Examples of Custom Salesforce Design

Thanks to our architect Franklin Joyce for sharing his expertise and examples for this post. Interested in more great examples of custom Salesforce design? Check out our 2018 case study on how we designed a Salesforce Community with Nonprofit Coordinating Committee of New York.

Salesforce is an incredibly powerful solution, but for all its strengths it has never been called pretty or user-friendly. While Lightning may start to change this, what you first see when you install is pretty overwhelming to the non-developer eye. This can cause user adoption issues internally, but also creates a major challenge if you link Salesforce to payment pages, Communities, or other password-protected pages. Even if you have gotten used to Salesforce's data structure of having different screens for tracking contact, account, and opportunity details, your donors or partners will have little tolerance for this and will expect a more intuitive process.

The good news is, Salesforce is endlessly customizable!

We have worked with many clients to alter the user interface and look and feel of Salesforce solutions, from donation pages to Salesforce Communities.

Before we show that off, there are a few things for clients to do throughout a customization project to ensure that your implementation partner has everything they need in order to make your redesign dreams come true:

• Provide a mockup of your process in writing or through a rough visual (we recommend gliffy or a wireframe for this)

• Provide some inspiration sites/functionality to your designer/consultant. You are bound to have a design crush on some sites you’ve come across: sometimes these are competitors, partners, or completely random websites that you just like the look of. Design is inherently subjective, so simply saying “I want it to look like Facebook” isn’t enough. What is it about Facebook you like...the colors? the photos? the comment/liking features? Be specific.  

• But remember: you’re not Facebook. Emulate what you love, but be realistic; you likely don’t have the resources to do what they’re doing.

• Go back to that Gliffy and consider simplifying your process. Think of your audience and the type of user experience you want to provide. One advantage that you have over Facebook is that your site doesn’t have to appeal to everyone, just your specific audience.

• Finally, be flexible. You’re presumably engaging a consultant because you don’t have the resources or skills to customize internally, so be open to our ideas and suggestions for changes.

If you follow these steps, you won’t have to teach people how to use your site: it is built and should work in an intuitive, user-friendly way. Here are some examples of recent projects we’ve built for clients to inspire you.

1. Customized Donation Form (Click & Pledge)

This donation page we built for AIDS United is a great example of using the open API of a Salesforce solution (Click & Pledge, in this case) to build a much prettier donation page than you would see natively, and one that incorporates your branding. Additional features of the page include the ability to dedicate your gift and make a recurring donation (“Make it monthly”).

2. Customized partner portal (Salesforce Communities)

This is an example of a customized Community we built for Airlink, a nonprofit Force For Change Grant recipient. Airlink is a rapid-response humanitarian relief organization that links airlines with pre-qualified nonprofits. This community allows external users (in this case, Airlink’s nonprofit partners) the ability to enter requests for airline donations.

*Note: Another way to facilitate a simpler version of this type of experience would be to show visualforce components behind a login page.

3. Customized Event Management (Salesforce Communities)

Here is another example of customizing Communities: in this case through an event check-in and management tool we built for The Mission Continues to allow remote platoon leaders to lead local events. In addition to the check-in visible here, platoon leaders can also post new events and easily enter details and share with the appropriate people for their region.

4. Customized Volunteer Profile Page (Volunteers for Salesforce)

This page was built for College Track to manage volunteer check-ins at six different locations. They have this view on tablets at the entrances of their facilities so volunteers can easily enter their names as they sign in and out. The page is set to refresh regularly, giving the impression of all the tablets “talking” together.

5. Customized volunteer history page (Volunteers for Salesforce + Homekeeper)

This page was built for Habitat for Humanity to track hours, volunteer commitments, and requirements, which vary depending on different volunteer locations. This data all flows through from Salesforce objects and gives volunteers a quick view of their history with the organization. A cool additional feature here was adding Family ID to allow your friends and family to log hours that count towards your account.

6. Custom-built page

Here is a work in progress for BOKS, a nonprofit that helps give kids a body and brain boost through fun and non-competitive play. This is a shot of a custom Salesforce page that trainers and coaches login to track attendance and push out messages. This uses Wordpress as the content server, allowing clients to easily input updates which then translate into this Visualforce page.

A well-built experience will pay for itself

If you need to build a case for this sort of investment, consider how much time you currently spend supporting your volunteers, donors, and partners: this is all time that could be reduced with a smartly-designed portal experience. When you work with a consulting partner to build something that’s intuitive to your process, you won’t have to spend too much time training. 

You can always consider compiling cues into help text or resources within the page to address any questions that arise from a new page layout.  And check out this blog on connecting your website to your database for a more information on that essential piece of this project.  

Once you’ve dedicated the time and effort to mapping out your user experience and are ready to follow the tips provided at the beginning of this post, you’re ready to get going! Interested in more great examples of custom Salesforce design? Check out our 2018 case study on how we designed a Salesforce Community with Nonprofit Coordinating Committee of New York.

Help me make my Salesforce pages shine