I have been involved with the development of the The Foil Invite Company website development since the company began in 2012. Initially the website was built using .NET, but was moved across to WooCommerce in 2015 to improve the eCommerce experience and make content management more straight forward. Since then work has been on going to refine the user experience and create a stress free shopping experience.
It was important for users to be able to preview colour and card combinations when choosing their invitations. The commitment to the quality of the finished stationery should be matched by the quality of the ordering experience. Development of an intuitive and easy to use interface helps to create trust and give confidence for users to place an order.
In order to create this effect multiple images are layered to generate the preview. Custom fields were created to store the available card types and foil colours. The card backgrounds are consistent across products, so can simply be selected from a set of tick boxes. Transparent images for each foil colour design can then be uploaded for use as the top layer.
I wrote a custom plugin to control the updating of the preview images and to capture the selections made as custom order attributes in WooCommerce. A combination of PHP (WooCommerce hooks) and JavaScript was used.
The site also offers a number of addons that can be used to customise the stationery further, or add supplemental products to the order. Although we initially obtained a plugin to add this feature, over time we have created several tweaks to ensure it could perform exactly as required.
I have developed several customisations to the product page over time. There is a lazy loading gallery section, testimonials randomly selected from a separate custom post type and also an improved related products section.
Products on the site often belong to collections that have matching designs. In order to save time when uploading products I updated the standard method of manually adding related products to include a tick box that would set the page to automatically retrieve any products within the same collection.
It was raised that it would be beneficial to improve the sharing options on the image gallery so that a direct link could be sent to a friend to view an image directly on the Foil Invite site, rather than just via social media.
When an image in the gallery is clicked, a full screen modal is triggered along with the key information uploaded alongside the image file itself. We had already created a system where the back button could be used to close a modal in order to preserve an intuitive navigation experience. (This was achieved using the HTML5 history API.)
By also adding a query string that attached the filename to the url when the modal was opened, we created a shareable direct url. The gallery could then check if an appended url was present, and automatically open the appropriate image on load. By adding a very short delay to this process, the user has a brief period to realise that a gallery page is being displayed and that by closing the current modal they could browser further.
In 2017 The Foil Invite Company entered The Wedding Industry Awards. They were proud winners of best wedding stationers at the national event in London, as I was thrilled to learn that their website had also won an award. The best website category included all those who made the national final across all categories.
The website has a fully customised theme and incorporated Foundation to assist with making the site fully responsive.
As well as the products available to buy through eCommerce, bespoke and supply your own design services are important to the website. Custom forms were created to enable users to submit their details and attach files when making enquiries.
