Squarespace eCommerce Design for Bondi Zinc Sunscreen
From Concept Design to Real Client!
In the summer of 2020, to help me survive my longing to be back on the road and on my way to Sydney, I created a concept design for @bondizinc! Concept designs are designs professional web designers create to practice their skills and sharpen their creativity, rather than for a paying client. Bondi Zinc is a sunscreen start-up owned by two of the lifeguards based at Bondi Beach, Australia. I came across the brand while catching an old episode of Bondi Rescue – and feeling very sorry for myself that my extended stay in Bronte had to be indefinitely cancelled due to COVID. It was the perfect project to work on between clients, allowing me to channel the surf vibes until I could return to the real thing.
After seeing my ideas, the Bondi Zinc team invited me to develop the concept into their new website.
What began as an independent creative exercise ultimately became a real client project. After seeing the concept, the Bondi Zinc team approached me to develop the ideas into a working website for the brand. This gave us the opportunity to refine the original visual direction, adapt the proposed features around the company’s practical requirements and create an online presence that better communicated Bondi Zinc’s personality, products and lifeguard-founded story.
The Client’s Original Website
The earlier versions of the website, from 2013 and 2016, were dated and static. The darker design didn’t reflect the ideas of sunshine, outdoor living and the Australian beach lifestyle. The 2019 (bottom) version has lightened the page style and introduced a new and improved branding, but the holding page offers little to build anticipation, connection or brand loyalty. With a mailing list subscription, some video content, social media links, etc we could make the page into a useful marketing tool until product launch.
My Concept Design
Developing A New Brand Identity
To overhaul Bondi Zinc’s online presence I first wanted to develop the new product-packaging direction hinted at on the most recent version of the website into an established brand identity that communicated what Bondi Zinc was really about. First, I created a new colour palette selected from the hues of a Bondi sunset combined with the iconic blue uniforms of the Waverley lifeguards. This gives a lighter feel and appeals to a wider audience – from surfers to sun-bakers to parents. Statistically, the majority of sunscreen purchases are made by women (and particularly mums) so it’s important to have a fresh, light, family-friendly feel to the site especially as Bondi Zinc prides itself on being suitable for all.
The Home Page
Opening with an iconic view of the beach, pavilion and skyline – this photograph screams summer at Bondi! Two versions of the logo were used in the hero section, with the main logo front and centre. The brand’s tagline communicated a valuable selling point: its sunscreen was developed and used by professional Australian lifeguards. Who else needs better sun protection than them?
As we move down the page, we find three sections that share Bondi Zinc’s mission: to create effective sun protection that could be used by the whole family and to be able to handle any level of protection. A third section reinforces the fact that the brand is owned by lifeguards, and further ties the product association with the beach, the sea, Australia and the iconic Bondi lifeguards.
In the third section, six simple icons briefly re-instate the most important points communicated in the text sections above – ideal to catch the attention of skimmers and scrollers! Each section links to another area of the site to explore the brand’s story or of course, to browse the store!
And finally, the product itself. I built a carousel with large attractive product images to get the visitors’ attention and encourage click throughs to individual products.
Adding A Multi-Point Map & Location Filter to Squarespace
Bondi Zinc is sold online and in select surf-shops and pharmacies in Australia. For an improved user experience and better marketing of the product, I imagined that an interactive database of stockists could appear on the site. A dynamic map using the brand colours brings visual consistency and a premium touch vs the standard Google Map colour scheme. I built filter options for the map, including searching by city and store type – pharmacies and surf stores – positioning the brand in front of both family and sports/activity consumers. A panel below with store addresses and information really rounds out the user experience. A map system like this can initially be built in Squarespace using custom code, while remaining easy for the client to manage when adding or updating stockist information.
Creating A Detailed Product Filter for a Large eCommerce Store on Squarespace
Bondi Zinc has a relatively small product line but I felt a custom product filter would be a smart move. Not only does it help current customers find what they are looking for, but it will keep the store organised as their product line grows. For the concept, I created mock-ups of a few imagined products to demonstrate the effectiveness of the filter and how the store might develop as the brand grew.
Customising the Squarespace Product Page
The new product page presents clear information about the product, active ingredients, shipping and returns. I carried on the brand’s new fonts along with my imagined colour palette into redesigning the packaging of their whole product line-up. Keeping true to the original packaging of light blue with dark blue text (lifeguard uniform inspired?) but with a sleeker, more modern feel. Changing colour combinations but keeping the same layout and font styling, keeps each product recognisable but unique. To flesh out the shop and properly showcase the custom coded filter function, I added a few extra products to the range.
Collapsible product info dropdowns allow a wealth of product information to be presented to a visitor without overwhelming them. A carousel of images shows customers the product in more detail.
An Effective About Page on Squarespace
An attractive and engaging ‘Our Story’ section brings the people behind Bondi Zinc to the forefront, helping customers connect with the brand, its backstory and understand what makes it different. By highlighting that the sunscreen was created and approved by professional Bondi lifeguards, people with first-hand experience of prolonged sun exposure, the section reinforces the brand’s unique selling point and builds credibility and trust.
Video adds movement and personality to the page, allowing visitors to experience the brand’s Bondi Beach roots in a way that static content cannot. It can also encourage visitors to spend longer on the website and provides additional content that may support search visibility when properly optimised with a descriptive title, supporting copy and accessible captions. The video plays both as a silent background video and also pops out into a lightbox to allow users to hear from Michael Jenkinson and Daniel McLaughlin themselves.
Fans of the TV show Bondi Rescue will recognise the pair as Bondi Lifeguards ‘Mouse’ and ‘Beardy’ respectively, which not only widens the potential audience but gives further credibility to the brand – these guys are the real deal and this video reinforces the brand’s credibility, showing them in action on Australia’s busiest beach.
See the concept website in action!
Watch me navigate through the concept site to see how it all came together. If you’d like to explore a custom Squarespace web design project, including detailed help planning your website’s structure, functionality and visuals, you may be interested in my custom website packages. I also offer pre-designed templates to help you build your own website with a head start, in my Premium Squarespace Template Store and if you just need a Squarespace Web Designer’s help for a day to implement some new strategy or custom features, I offer that too.
The Final Website
In 2021, Daniel and Michael came across my concept design and were so impressed, they hired me to create their new website. We met a few times to discuss both the concept website and where Bondi Zinc was as a company at the time, some background and other info I could never have known from my research online. It became clear that there would need to be changes made to the concept, not because it was inherently ‘wrong’ but because every design decision is informed by the client’s unique situation – and once I had more details, we changed direction in a few places. This is why the detailed planning process of my custom website packages is so crucial, and why a web designer’s portfolio can’t always tell you if they are right for you.
Using Shopify with Squarespace
Rather than moving the existing store entirely onto Squarespace Commerce, we connected the new Squarespace website to Bondi Zinc’s existing Shopify inventory and payment system. This gave us the visual freedom of Squarespace while retaining the ecommerce infrastructure the company already used. This truly gave us the best of both worlds. Bondi Zinc already had their inventory, tax info, payment system and social media sales channels linked up to Shopify and I’m all about keeping this easy if we can. Secondly, Shopify handles international shipping better than Squarespace and so linking to Shopify Lite was a no brainer. As we were not using Squarespace to check out, and the brand was only ready for the release one product at this moment in time, I switched direction and designed a more vibrant product page with a Shopify slide-in checkout window. Having one more visually bold page for the product avoided having an ‘empty’ store page, which feels underwhelming.
We recreated the icons to match icons on the side of the new product packaging (which I hadn’t seen before) and called out additional sales points, like the fact that the product is vegan friendly (again, something I never could have known before!). Some changes were also made to the Our Story (About) page. The guys wanted to feature their third business partner, a well-known professional surfer – this brings extra credibility to the Bondi Zinc brand and opens up a new market of potential customers.
The product was not currently being stocked in brick-and-mortar stores, so we hid the map for now and as negotiations with stockists continue to develop, this can be added back in at a later date. Lastly, I pulled together a brand board and some social media logos for the guys to use and – the new website was born!
As clients have full control over their website once I am finished, I don’t link to live sites… I have no control over how they might look on the day you click the link. But here’s a sample of the finished website including genuine product images and a custom mobile menu – many hours were spent in photoshop creating a version of the photo where the surfer and the sunset will always appear on every phone size! ;)
Would you like to work together on a custom Squarespace project?
If you are the type to go big or go home, want multiple rounds of revisions and a white-glove experience, including planning assistance and on-going aftercare, check out my custom Squarespace web design packages. Not sure how a professional web designer can help you? Check out my post on the topic here: Should I hire a Squarespace web designer? 7 Signs It’s Time!
If you would prefer my expert Squarespace input for just a day or half day, you can grab a strictly limited slot on my calendar.
If you’re looking for a budget-friendly Squarespace website but still want a pro to be involved, a Template Remix might be right for you. I’ll customise a Squarespace template to perfectly fit your business, getting you online with zero hassle in just 2 days.
Lastly, if you’re a determined DIYer, my Premium Squarespace Template Store features gorgeous, strategic Squarespace templates designed by yours truly. I’ve packed everything I’ve learned from 20 years in web design and 8 years specialising in Squarespace into each design, along with access to my Template Hub, video tutorials, Step-By-Step Launch Course and resource library just for my template customers.
Discover how I overhauled this travel blog to maximise visual impact, ensure reader engagement, create excellent usability and grow the owners business and income in just two weeks.