bigcommerce-e-commerce

Project Objective

The aim of the project was to design and build a site that maintained the Brown-Forman look and feel, and improved functionality while migrating the site to BigCommerce. As the Australian Brown-Forman site was the first of the international arms to move onto BigCommerce, we strived to create a product that was met their needs, improved their processes, was beautifully designed and enjoyable to use.

In moving to BigCommerce and working with us they wanted to build out a platform that made repeat and bulk ordering easier for their customers and that suited their desired order fulfilment and processing operations. Particular to this were managing case and bottle pricing and inventory and restricting access to the platform to only customers with an active liquor license.

Discovery

Brown-Forman had been frustrated with their previous platform and the site had not been tailored to suit B2B as much as they would have liked. As we workshopped issues specific to Brown-Forman and the liquor industry, we realised there were a number of customisations we would need to build out in order to address their needs. This included:

  • Managing complex case and bottle pricing
  • Integrating complex pricing and inventory with their SAP ERP
  • Managing inventory levels and payment options for different customer groups
  • Bulk ordering on the go and mobile usability
  • Restricting access to only customers with an active liquor license
  • Rethink and design layout to streamline B2B ordering while maintaining Brown-Forman brand look and feel

Strategy

Previously Brown-Forman had not been able to add a custom discount for customers ordering cases and bottles from their site. Our UX/UI designers sat down with our developers to create a system that was intuitive to use on the frontend for customers, and that integrated smoothly with the SAP to maintain business processes and remain up-to-date. The other data issue was creating a login page that only allowed users with an active liquor licence to access the site.

We found the solution in a custom-built app. Our developers built an app which could process and manage large quantities of data and that integrated with BigCommerce and Brown-Forman’s SAP. The app supported the list of active customers and liquor licenses, only allowing users which met the requirements to access the site. The app also managed the complex pricing and inventory levels between BigCommerce orders and the SAP. The app triggers regular updates to feed between the two and is also accessible by the Brown-Forman team at any time for manual download or upload of information.

Creativity

Login Page

The login page, which acts as the homepage, was designed to keep to the Brown-Forman brand rules and feel like a homepage while acting as a gateway to the bulk of the site. The site is aimed at B2B so the login and registration buttons are the focus of the page, while the brand web pages are in the navigation at the bottom of the page. The sharp distinction between the warm brown filter over the image and the crisp white highlight the navigation so it can’t be missed, nor takes the focus away from the main CTA buttons.

We used the warm browns and traditional fonts specified by the style guide but kept the layout clean and crisp. The image we chose gives the illusion of entering into a whiskey cellar. Welcome to Brown-Forman.

B2B streamlined ordering

In devising how to streamline ordering for B2B customers we chose to customise the BigCommerce theme we thought best suited Brown-Forman needs. The menu sits on the left of the screen and is broken down into Categories and Brands. There are further filters across the top of the screen. The whole process and navigation was designed to allow for quick and easy selection according to the categorisation system most often used by liquor retailers.

We kept the design clean with plenty of white space and sharp lines and fonts. It emphasises the bottles as they provide the only colour on the page.

Bottle and Case ordering

Brown-Forman wanted to draw attention to the options of purchasing per bottle and/or case. We developed little icons and designed the layout to show a simple breakdown of cases and bottles ordered. The custom +/- functionality and prompt towards the case discount also help lead customers to order more by case than bottle.

Mobile Friendly

The site was designed to be fully responsive so that customers could order new stock on the go. Each design was created with mobile, desktop and tablet in mind and a CSS flexbox layout was applied to make web pages perfectly responsive on all browsers and devices.

 

Technology

The site was built on BigCommerce with a customised theme. We built integrations to their SAP ERP and Salesforce, as well as a custom app to help manage their customer, pricing and inventory data. Brown Forman upload their data to the server via FTP, and the app then processes those files and updates them to BigCommerce, all triggered regularly and automatically. We built the app using Laravel. The other languages we used were HTML, CSS, JavaScript, jQuery, PHP and Ajax, among others.

Overall, we loved working with the Brown Forman team, they were friendly, upfront, open-minded and creative and we look forward to continuing to work with them in the future.