Who is Bosun’s Locker?
Bosun’s Locker is a provider of superyacht protection products and other similar chandlery items. They’re a family run business based in Mallorca that have been in the industry for over twenty years.
The team at Bosun’s Locker are undisputed experts in their field and count major industry players as their partners. They have a number of exclusive contracts with sector leaders such as Chemco International to provide environmentally friendly hull protection.
What was the brief?
Bosun’s Locker had a very old school website built many years ago. They wanted to completely re-invent their web presence more in line with their current branding and business philosophy. It was especially important to emphasise the company’s commitment to environmentally friendly products.
Particularly they wanted the option to be able to sell their products online so including an e-commerce functionality in the site was critical, something we specialise in!
How did we do it?
We rebuilt the entire website from scratch using a new colour scheme and implementing WooCommerce for the e-commerce functionality. We built custom sliders and used the latest image formats for website speed.
Last but not least we created several CSS animations throughout the site to give that wow factor when things such as menus were opened, shopping carts activated or filter menus selected.
The end result
Home on the sea
The home page features a full screen intro image superimposed with the menu, logo and title.
Also featured on this page are available services and easy links to the other important parts of the website.
Pristine Product Pages
We developed a lightweight CSS slider to scroll through the product images and enabled cart functioality so that products could be ordered.
Further down this page is a quick info section and links to PDF case studies, data sheets and industry certificates.
The Cool Cart
The cart page opens up as an overlay that flies in when a product is added to the user’s shopping cart.
We made this function AJAX enabled so that the user could update the product quantities on the fly wherever they were on the site.
Check out the checkout
The checkout process should be a slide for the user without barriers. With this in mind we made a one page checkout process.
Shipping options and order review are all possible from within this one page making it easy to quickly checkout and pay.
Tablet Info Pages
Making sure the site was just as effective on smaller devices was, like all website designs, extremely important.
We used JavaScript to re-arrange page layouts if needed but mostly just used different style rules for device types.
Mobile Home Page
Over 50% of website visitors now use mobile devices. We made Bosun’s Locker a responsive design to give that smooth app like interface and user experience.
We stripped back and optimised the code for mobile devices and made sure that images were properly optimised for retina devices so that they looked crystal clear on iPhone and other HD devices.
Mobile Listings
Product listings can be awful if designed incorrectly on mobile devices. Cart abandonment rates are always far higher for people who use mobile devices to view the website.
We re-organised the pages for mobile devices so that products were clearly visible and readable. We also made sure there was plenty of white space between listings so that users didn’t get confused.
We also moved the filter panel off-screen and made it viewable as a slide in panel so that the small space available on a mobile didn’t get cluttered.
The Nerdy Stuff
This was a great project for us to sink our teeth into and we used some new techniques to make sure the site ran like it had nitro in the tank. Here’s some of the technical stuff and how we did it.
Stats
E-Commerce Functionality
We used WooCommerce as a base for enabling e-commerce on this website. However, we removed virtually all of WooCommerce’s JavaScript and styling as it is quite a bloated plugin. We also removed all the default Woocommerce default templates and built our own layout from scratch.
Animations
We used CSS animations for things such as menu fly ins, filter slide in, cart overlay and the product slider. This ensured that the effects would work cross-browser rather than depending on third party plugins or polyfills.
DevOps
As the site was really slow on their existing shared VPS we set up Bosun’s Locker on one of our dedicated VPS boxes and gave it ample resources to run fast. We also implemented caching for the site pages using Varnish to avoid the unnecessary database calls that the old site had been making (and slowing it down).
Scripts
Everything on the site is custom coded for efficiency. We created multiple functions to deal with Ajax calls, smooth scrolling, shopping cart and of course search filtering.
Optimisation
As the site would be hosted on our network we were able to fully optimise the delivery of the website pages, images and content. We wrote custom Nginx/ngx_PageSpeed configuration rules to handle image optimisaton on the fly as well as minification and compression of assets. Last but not least we deployed the site on Cloudflare for fast global access and wrote some Cloudflare workers rules to handle caching of all content for non-logged in users.
