shop-for-shops-project
bigcommerce-shopforshops-laravel-matter

Project Objective

Shop for Shops was in the market for a rebuild of their e-commerce website shopforshops.com. The main objective was to move away from their historic proprietary system onto a more reliable back-end operation that aligned with their business growth.

Mobile responsiveness was a key element in the build, with the aim to improve the website’s Google rank.

Key Objectives: 

  • Replicate the current look and feel for continuity of user experience 
  • Enhance the design and user experience where appropriate, without departing from the current look 
  • Enhance the user experience by utilising native BigCommerce functionality Eg. Optimised checkout 
  • Enhance the user experience by utilising the inherent functionality of the BigCommerce Brixton Theme 
  • Mobile-first user experience
  • Enhance user experience for custom products 
  • Improved communication of member benefits and volume pricing 
bigcommerce-s4s-desktop

Discovery

Matter met with the Shop for Shops marketing team to understand the design requirements for their business. What Shop for Shops wanted to achieve was a modern design that marginally replicated their original website design, but with more advanced features. Once the design requirements were reviewed, design mockups were conceptualized by Matter’s UX/UI designer Alberto.

Mockups were constructed of desktop and mobile designs for 11 pages, 4 global elements – header, footer, navigation/menus and container, and a contemporary layout structure. UI designs were presented as prototypes on InVision Studio and tweaked according to feedback from the Shop for Shops team.

 

Testimonial

We are absolutely stoked with our new website! From the sleek user-friendly front-end all the way to the numerous integrations in the back-end. Matter Design were able to provide solutions to the complex & unique problems of our business – most importantly on time and on budget!

Mathew Cammiss Financial Controller Shop for Shops

Strategy

Matter’s strategy commenced by clarifying how the website requirements would be executed to meet the functional design solutions proposed by their design team. It was determined that the most efficient build would commence with the base of the Brixton theme providing foundational elements to the website, customised to suit the Shop for Shops’ user requirements.

Additional functionalities were then reviewed and scoped into the website build. This included – 

  • The ability for customer grouping to allow for tier membership pricing
  • Custom minimum order quantity (MOQ), with the ability to control pack quantities by increments 
  • The functionality for specific volume pricing based on a percentage of sales
  • Product variable types e.g. single, low price, favourite, box pricing, kits

Creativity

Matter’s UX/UI designer altered the Brixton theme to meet the project brief for Shop for Shops. The key consideration in the design was to incorporate the styling elements of the old website into the BigCommerce theme.

One main interface modification was the removal of the mega menu. This was replaced with a left-hand sidebar, making it simpler for users to navigate through different categories. This menu is strategically placed on left-hand of the screen, visible to the user on any page in their desktop journey. 

Matter carefully considered the design and functionality of the custom pricing calculator that highlights price savings based on quality and customer loyalty. The “Buy more & save” calculator changes depending on the user input, using Javascript animation for the element transitions. 

bigcommerce-shopforshops=mobile

Technology

Customer Tier Pricing

Shop for Shops shows appreciation for customer loyalty by offering reward pricing. They offer Silver reward pricing where members save up to 33% and Gold reward pricing where members save up to 55%.

In order for pricing structures to display accordingly to Shop for Shops’ users, Matter custom coded the user interface to adopt the pricing structures depending on information such as minimum order quantity and percentage savings. The interface uses Javascript to animate the elements according to data input.

pricing-calculator-bigcommerce

Creating an optimised solution to calculate shipping costs

With such a comprehensive product database it was inevitable that a variety of shipping calculations would arise. When it came to Matter’s attention that neither Shipper HQ nor the ‘Ship by weight’ calculator was a viable solution, we proposed an API connection between Shop for Shops’ internal shipping calculator and BigCommerce.

 

Matter’s developers integrated an API connection between the Shop for Shops internal freight system and BigCommerce. The API brings in the shipping company name, price and shipping duration and displays the information to the user at the checkout.

Connecting MYOB Exo and BigCommerce using Laravel Middleware

Shop for Shops uses MYOB Exo as their ERP solution of choice. MYOB Exo manages information such as product descriptions, SKUs, pricing, customer information and customer loyalty.

Matter’s technology specialists reviewed the relationship between MYOB Exo and Shop for Shops’ previous website. Both Matter and Shop for Shops saw a need for a streamlined solution, one that would replace the manual work required to connect the older website with MYOB Exo – a procedure that involved manually downloading and uploading CSV files.

Matter’s solution was to build a Middleware software between MYOB Exo and BigCommerce using the Laravel framework. Laravel is a highly customisable, open-source PHP web framework that is fast to build, secure and less expensive than many other frameworks on the market.

Our team used the Laravel framework to create a user-friendly dashboard that links MYOB Exo and BigCommerce via data-transferring APIs. A data sync is automatically triggered between systems each evening, however, Matter also created the ability for Shop for Shops to trigger a manual data sync at any time by inputting specific data. That input can include customer email or product SKU.

The dashboard allows Shop for Shops to view historic data syncs, check for errors and re-sync accordingly. Matter developed a filter functionality so the user does not have to sort through a large volume of records.

This new Middleware has significantly reduced the manual labour involved in Shop for Shops’ handling of data and has provided clearer visibility over the transfer of information.

laravel-dashboard-shopforshops