Superscrews Website Project

Gwilym :: November 22nd, 2019
Superscrews Website Project

Our family spent the last six months in Europe, learning German and cycle touring through Germany, France and Spain. When I was asked what my vocation is, my reply often went like this:

"I'm a web developer, recently left a job of four years and currently unemployed. Oh and have a business with my brother selling screws - which has a terrible, embarrassing, website."

It's been annoying how difficult it has been to find time to spend on our own projects, so on our return to New Zealand I put aside a couple of weeks to up the ante with our Superscrews website, along with a bunch of gardening and DIY.

Superscrews has been going for over 10 years and is a small, vertically integrated, online retailer of wood screws. The last year we've been growing faster than ever and our web side of things has been letting us down. With this in mind I set out to improve things:

  • Make it as easy as possible to order multiple lengths of screws without having to drill in and out of lots of different pages.

  • Ensure it is obvious at all times what you have in your cart by indicating in the product row when relevant.

  • Work well on mobile phones as well as desktops.

  • 'Series' centric organisation, going forward we have different Series of screws but different sub-seires and sizes within those series.

  • Cleaner, simpler, fresher design.

  • Upgrade to the latest Laravel version (the PHP framework the site is built on).

Superscrews 2019 design mockup

Things have gone pretty well with this project, thanks to my wonderful partner Merle tuning up the design side of things that has come together nice and quickly. The new "Add to cart" process that indicates on each product row what you have in your current cart is nice and effective and compressing the size of the individual product rows has made it much easier to understand the product categories.

Superscrews 2019 product rows

This is the third project I've used the CSS library Tailwind on and I'm loving it's efficiency. I also added PurgeCSS which strips unused CSS based on what classes are used in the markup. AMAZING, the CSS file is now only 14kb. Speedy!