Overview
Mackintosh Gin is a family run business making award-winning gin since 2018. The company, which previously hadn't had an e-commerce platform, was looking for a new website that easily showcases the offered products and reveals the brand history. Being the Front-End developer for the project, I was tasked with creating several templates and features, which resulted in a smooth and visually appealing user journey across all devices.
Challenges
-
- Speed optimisation
Efficient asset delivery had to be implemented across all pages to guarantee high Google rankings and a smooth user experience without delays.
-
- Additional Product Information
Selling a product that is all about its taste can be a tricky task when using a visual medium only. This was tackled by creating additional product page templates complimenting the flavour and detail of the offered products.
-
- Age restriction
Following legal advice, upon entering the site, users would have to confirm whether they are of legal age to consume the products offered on the site.
Process
1. Asset delivery
Lazyloading imagery and scripts across the site prove to be the key ingredient in optimizing the speed. On mobile, preventing the content from jumping while scrolling the page (which triggers the assets to be loaded) was achieved by using absolute positioning and relative top padding (calculated based on the image dimensions).
2. Product templates
Products that contain additional data passed from the CMS have extended templates providing further insight into the taste. Thus, users can get a better idea of what the brand offers despite not being able to taste their produce (high hopes for the future of web development here!).
3. Age confirmation
When opening the site for the first time, users will see a popup that gets triggered based on the presence of a cookie. Being able to browse the site further requires users to confirm they are of legal age. It's a simple feature that doesn't block access to the site but still provides some level of protection from allowing minors to purchase alcohol.
Conclusion
Being a part of the Mackintosh Gin development was a valuable experience that helped me learn more about optimizing e-commerce sites for loading speed while maintaining a smooth user journey. While the priority was delivering high-quality visuals that sell the product as much as possible by considering the limitations of selling online, it felt like a fun project to be a part of. The client was happy with the deliverable, which would not be possible without frequent status updates and catch-up meetings to discuss the ongoing development tasks.
