Sbrocco International, a wholesale fruit importer needed a complete digital transformation to support their sophisticated sales process. Without a B2B, sales and marketing enabled website in place, the company was missing out on key opportunities to educate business prospects, track contact behaviors, and qualify leads.
With keyword research, competitor analysis, and an original photography treatment in hand, we set out to create a dynamic website to meet the following objectives:
The selection of the HubSpot Website CMS was a purposeful choice. For a B2B website, it is critical that recorded user actions and behaviors are made accessible for sales teams to use to inform their communication with prospects. Sbrocco International’s website is constantly tracking back to the CRM, or customer relationship manager. All button interactions, form fills, and page views are recorded under each individual contact.
Additionally, the reporting feature of HubSpot makes it easy for Sbrocco to log in and review the overall performance of their site, track qualified leads, see the status of opportunities, number of deals, and closed business, along with sales team productivity.
Mole Street uses HubSpot’s HubDB feature to create product libraries for Sbrocco. This makes adding or hiding products to different sections of the site a breeze. The feature allows Sbrocco to simply go into the back-end of HubSpot, click ‘Add New Product’ and have access to the library of products and their categories. This was built in a database-driven way so that long-term Sbrocco could extend into areas such as online-ordering and ecommerce without the need for a brand new website in the future. Should Sbrocco require ecommerce or online ordering in the coming years, HubDB can serve as their product catalogue and be fully integrated with ecommerce features without needing to spin up some other ecommerce website or store.
We approached the B2B website with the following defining strategies:
With nearly forty products and eight categories to include in the HubSpot website, we made the strategic decision that the page and URL structure must be modeled after ecommerce website design. This would ensure that clusters of products (i.e. lemons, navel oranges) were properly collected under a parent hub (i.e. citrus).
In addition to the SEO strategies discussed above, we wanted to ensure the client had the flexibility to create dynamic content to communicate seasonal offerings and product favorites. We implemented a Best Sellers row on the homepage to showcase the top selling products. We also included a “featured product” section that highlights a specific product in a full-width row.
Through user research, we discovered that many procurement managers that are responsible for buying produce had varying degrees of inexperience and unfamiliarity with the individual products and the seasonality of the buying process. Because of this, we created an interactive When to Buy chart that shows the user when products are available and when our target buyers should place an order.
A successful B2B website standardizes the design language across the entirety of the website. Good UX/UI instantly and subconsciously communicates a system and order with the viewer that encourages the user to find, discover, and interact with the content.
We included in our design:
Our client displayed a proud commitment to quality of product. To do the fruit justice, we inevitably went in the direction of original photography. Working with professional product and portrait photographer, Jason Varney, and Hadas Smirnoff, food stylist, we produced a 3-day in-studio photo shoot to capture the authenticity, simplicity and quality of Sbrocco fruit. We strategically chose backdrops and surfaces that were complementary to the fruit. Images for website service pages were styled to look abundant, fresh and overflowing, while photos for product and category pages were compositionally pared down to focus on the special qualities of the produce itself.
We also spent time with the Sbrocco team to take individual headshots for each team member – capturing natural and authentic moments that allow the user to feel more connected to the brand.