SFRA: Top Questions Answered

Earlier this year, Salesforce B2C Commerce launched Storefront Reference Architecture (SFRA), the next iteration of its reference application which serves as the starting point for storefront design. Both SFRA and the existing SiteGenesis framework sit outside the platform API layer and serve as out-of-the-box blueprints for the storefront; containing the fully functional elements needed to operate an ecommerce site including homepage, cart, checkout, product display pages, navigation, and search functionality.

SFRA offers current best practices from a development standpoint and is driven by the most recent UX research. Additionally, SFRA provides brands an easier and faster solution to get live quick and optimize the shopper experience across devices.

“While it was built to optimize the mobile shopping journey, SFRA has a great desktop experience as well. You only have to code pages once, and then it’s responsive. With native responsive design, brands can deliver a great experience wherever that shopper is,” says Eric Lessard, Sr. Product Marketing Manager at Salesforce.

What are the major differences between SFRA and SiteGenesis?

According to Lessard, “It’s two-fold. First is the UX or the site design experience. The second is the architecture code base.” From a UX perspective, SFRA was built from the ground up for mobile. Salesforce used heat mapping and analyzed the shopper journey across 2,000+ mobile sites currently on Commerce Cloud to fully understand the optimal user experience.

Based on this, there are numerous enhancements from SiteGenesis. The checkout process is often one of the biggest pain points for mobile users. With this in mind, SFRA offers an accordion style, one-page checkout for shoppers to reduce the number of clicks and create a seamless experience.

Additional new features include a persistent search bar which makes it easily accessible and usable for shoppers who already know what they are looking for. On the product display pages, Salesforce focused on highlighting the critical shopping actions and reducing extra noise. The product descriptions are collapsible, and the Add to Cart and Apple Pay buttons are persistent as the user scrolls up and down the page. If using Apple Pay, users can instantly checkout directly on the PDP. With these features, brands are seeing an increase in conversions.

Download the Complete Customer Experience Report to learn how to create an unforgettable experience that will engage shoppers and improve revenue.

From an architecture perspective, developers can more easily incorporate new functionality and features as they are released with SFRA—reducing TCO. SFRA is also based on a new model view controller architecture which means developers can code outside of the core codebase and independently plug them into the storefront. Jamie Smith, Front-end Architect at Blue Acorn iCi, says, “The architecture supports plug-and-play style which reduces the costs to implement new features.”

SFRA leverages Bootstrap 4 for its development framework, which is standard in the development community. Smith adds, “Bootstrap provides more structure to the content that can be easily understood by developers outside of the Salesforce space. Say someone in the marketing department needed to make a change through CMS, the easily could if they have HTML knowledge. They wouldn’t need to involve a Salesforce developer.”

What are the benefits of SFRA?

Who is SFRA ideal for?

All new Salesforce Commerce Cloud customers should use SFRA. It’s a no brainer—its data-driven design has the most up-to-date features and functionalities to provide shoppers the best mobile experience. It’s faster, easier to use, and customizable. By leveraging the prebuilt storefront design with the pre-configured integrations, brands will see a quick speed to launch and faster ROI.

In addition to new Salesforce clients, Lessard says SFRA is ideal for “existing customers who are looking to do a storefront redesign.” Keep in mind that current Commerce Cloud customers are not required to switch to SFRA. Lessard adds, “We don’t want customers to think they have to move to SFRA today. If they’re not ready to make a move, they don’t need to. Brands should look at SFRA as an opportunity to enhance their branded experiences”

What is the storefront of the future, SiteGenesis or SFRA?

Brands can rest assured that Salesforce will continue to support SiteGenesis well into the future. David Shuford, Director of Solutions at Blue Acorn iCi, adds, “moving to SFRA allows brands to take advantage of the most modern version of a Commerce Cloud storefront and all future innovation.”

SFRA Success Story: PUMA

In 2017, PUMA on re-architected and relaunched its sites for 24 countries using SFRA as its storefront design framework. The athletic apparel brand saw mobile traffic reach as high as 70 percent in some countries with minimal conversions. At that point, PUMA knew it needed a change. “I don’t need to be the first with the flashiest new tool. What I need is to give mobile shoppers exactly what they want, when they want it, and be smart about fulfilling the needs of real consumers,” says Ken Kralick, Global Head of Ecommerce at PUMA in a recent Salesforce article.

PUMA focused site speed, navigation usability, product findability, content, and fewer clicks to purchase to create the ultimate mobile experience. The brand could have chosen to make changes to their existing framework but knew this would be expensive and only offer incremental improvements in the long run.

As a result, the mobile sites now render 35 percent faster and fully load 69 percent faster. Conversion rate, previously below 1 percent, improved 1 to 1.5 percent across desktop and mobile. “By standardizing all sites on a common storefront code base, they future proofed their storefront,” says Lessard. The ecommerce site is now easily scalable and can release updates quicker. For example, if they release a hot new item, they don’t need to worry about the server overloading due to the spike in users.

Kevin Eichelberger, founder of Blue Acorn iCi, adds, “Salesforce has succeeded because they focus on more than just ecommerce; they focus on helping clients win at customer engagement. The checkout process is often one of the biggest pain points for mobile users who want to engage with you wherever they go. With SFRA, brands can improve their mobile shopping experiences, while reducing the total cost of ownership and innovating faster.” If you’d like to learn more about SFRA or you’re considering a site redesign, please feel free to reach out to the Blue Acorn iCi team here.

fragment
https://main--site-blueacornici--blueacorninc.hlx.page/profile/blueacornici

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi