Design/WebsiteLaunched: Mar 11, 2018
BoomBocs produce high-end, quality speaker systems. A colourful, fun yet powerful and professional sounding device, which is looking to enter high-end retail stores this year. BoomBocs came to us looking to revamp their website and give it its own, distinct identity. We welcomed the challenge.
- Suzannah James – UI Design
- Samuel Gregory – Project lead and Developer
We met with Jonny to discuss what the company were about, the people involved and the message they were looking to get across with the new design. Jonny was clear that it visually needed to look sleek and professional. Not gimmicky and needed to let the speakers provide the colour instead of the website content itself.
It was also important that we made sure that we could get results given short deadlines. eCommerce sites are notoriously in-depth, with account pages, checkout journeys and product pages. We proposed the idea of highlighting key pages that we could give attention to and deliver those initially and launch sooner rather than later. This was agreed and the stage was set.
From this initial meeting we were able to produce a mood board of the sort of things we felt captured what we had discussed. It was also a useful tool to refer to when we came round to designing to help inspire us and move things forward efficiently.
Product comes first
Our initial designs focused on big imagery and simple text delivering the message of what BoomBocs is in a clear concise message. A key feature of BoomBocs is the hexagon logo. We played around with this in a variety of ways to help carry the iconography through the site. We experimented with wrapping images in hexagons, putting content in them. The language we insisted on each of the designs was important to these developments to. Not overly complex and simple, quick-to-read paragraphs.
After a couple of iterations we landed upon hexagons running down the page, alternating in their alignment to the left and right. Within those hexagons, contain colourful images of the speakers. Something wasn’t quite working though. The frame of the hexagon was covering too much of the speaker. It was also highly dependent on the images being shot correctly to work to avoid being covered up. Working with Jonny we combined some of the concepts in the earlier designs by having the image consume an entire band across the width of the page. Text to accompany the section was then placed within the hexagon, which overlaid the image. We felt this worked incredibly well and the idea was finalised.
The existing site was built in Shopify, a platform we’ve not used before. Having a knowledge of WordPress really helped with the understanding of these types of applications. We were able to create ‘sections’ that can be edited from within Shopify, giving BoomBocs complete control of the content and imagery. You also have access to the API so you are able to query products and information about certain settings. The website came together fairly quickly and Shopify is a fairly simple system to work on, although can be slow when updating the theme.
Boombocs were simultaneously getting a new promotional video made. We knew this would play a part in the website and the two needed to work in harmony together. For first time visitors, you are welcomed with the promo video. Once dismissed, we wanted to ‘unveil’ BoomBocs as a slick brand. We achieved this with simple animations, starting with a gentle fade in of the logo with elements being revealed, growing outwards from the logo. This gives the impression of a spotlight first focussing on the logo and then being pulled away so the cone of the light-beam broadens and reveals more of the header. As you scroll down the page, the text slides gently in from their respective, alternating sides. This draws attention to the text as well as looking quite cool! We didn’t want to over-bake animations but this was something fun that we knew we wanted to implement.
With much of the style built off the homepage, it was then a trivial task to apply this to some of the secondary pages highlighted in the initial meeting. We gave some attention to the ‘explore’ pages and instead of having more pages for the user to click around on we combined the two, giving a tab system to reveal the complimentary ‘explore’ information. We applied this same concept on the ‘Media’ page. The user is able to switch between videos and photos within the same page.
Overall BoomBocs were a pleasure to work with. Having a clear vision from Jonny was pivotal to its success and we feel we rounded each other off nicely by complimenting each other’s skillset. This is such an important quality to a team. It also meant that decisions were quickly made and implemented and we wasted little time.
The folks at Jupiter and the Giraffe did a stupendous job on our website
Check it out at BoomBocs.com