Sweet and Savoury Grazing Co. Project Demo - Hero Image
Sweet and Savoury Grazing Co.
Ongoing development and maintenance for the client's website and their custom charcuterie board order form e-commerce platform
Thunder Bay, ON
Modern & Chic
10 pages
E-Commerce: Online custom charcuterie board order form
SSGC Order Form Section 1 on Desktop
Smooth progression bar
To make it easier for customers to complete their 7-section order form, we've added a smooth sliding progression bar in a highly visible location. The bar uses orange bubbles to indicate an active section, green bubbles to indicate a completed section, and gray bubbles to indicate an incomplete section. This simple, intuitive design helps guide customers through the form and encourages them to complete it.
Multiple custom orders on a real-time receipt
On the right of the customer's screen during the entire process is their progressive receipt. The customer can order up to 10 boxes of any type on one order. They can choose between a premade box, a custom box, a custom/premade monogrammed box, or a gift card. All items added to an order are saved on the customer's browser in perpetuity unless removed by the customer.
SSGC Order Form Section 1 on Mobile
Visual decision-making with 1st person prompts
All sections of the order form employ visual decision-making by having the customer click large image-based options as opposed to small checkboxes or circle radio buttons. This helps to simplify and speed up a long order process. Each section is additionally supported by a first-person prompt to simulate a more in-person experience and to prevent any confusion when ordering.
Optimized for all devices
The entire order form is optimized for mobile devices of any size. The order form adjusts progressively into a vertical format. Certain aspects of the order form undergo greater readjustment, such as the receipt, which is positioned at the top of the customer's screen in a scrollable format.
Customizable order flow
The order form design moves the customer through the sections using a customizable flow adjusted based on their selections. The customer can make 12 decisions before reaching contact information; however, only those relevant to past choices affect what the customer sees in the future.
SSGC Order Form Section 7 on a Laptop
Secure and accessible payment functionality
The customer can pay directly through the application using Amex, MasterCard, Visa, Discover, or UnionPay. The entire process is validated to ensure quantities of ingredients and boxes are in stock, and the customer's personal and card data is correct.
Permanent and secure online receipts
After payment, the customer is re-routed to their online receipt, and they're sent a copy by email. These receipts can be accessed in perpetuity, and secured by email validation if accessed on a different computer or after a window of inactivity.
Smooth progression through each section
The order form flows between sections regardless of the customer's path. It slides seamlessly from left to right regardless of device type or size.
Dynamic scheduling for pickup or delivery
Customers can choose pick-up or delivery options and schedule a time that works for them using the scheduling section's dynamic calendar. Various aspects of the calendar can be changed by the SSGC team, including available days and times, daily schedule limits, and delivery window intervals.
"We want to give a huge shoutout to A Very Good Website for designing the website of our dreams! They took the stress of building a website right from our hands! They took every request with a smile and displayed nothing but exceptional service!" - Allison
See Live Project
Interactive informational website backed by custom CMS
SSGC Website Home Box Design
Boxy design resembling characuterie boxes
The site design is panelled with large rectangles or squares with thick brown borders to resemble charcuterie boxes, which, of course, is their flagship product. Panels contain a fix of concise written content, and images of their fresh products.
Social media front and centre
On the right side of every page, fixed to the customer's view, is Sweet and Savoury Grazing Co.'s social media, their primary communication channel with their customers. Having the social buttons front and centre helps increase conversions from the site to their social media.
SSGC Website Ingredients List
Dynamic ingredients menu
A dynamically-generated menu containing all the ingredients for their custom boxes. The ingredients can be added or removed, names or descriptions edited, and stock availability changed at the discretion of the SSGC team using their custom content management system (CMS).
Item-based tooltips for product guidance
Tooltips generated for ingredients are available by hovering on the clear orange icon on the desktop or clicking on mobile. These tooltips are generated by the team through the custom CMS.
SSGC Website Gallery Display
Casual, product photo gallery
The photo gallery is a casual place to view various photos of the different products offered. All main photos can be hovered on to view a secondary image and any titles or descriptions associated with that photo set. For better viewing, the customer can click any photo to get a zoomed-in version; optimized for whatever device they're using.
Custom Gallery CMS
The entire photo gallery is accessible through their custom CMS built by us. They can add, remove, or edit any photos on their gallery.
Facebook Instagram Twitter LinkedIn
Notice: This website uses cookies. By clicking "Okay", you are agreeing to the use of cookies. For more information on how we use the cookies, please check out our privacy policy
Accept Cookies