The project

Modern, sleek and responsive — these are the hallmarks of a successful global communications company and exactly the features Beam Communications wanted their new website to have.

Beam’s website is a catalogue of their products. It's where resellers go to investigate top-of-the-line satellite communication equipment and get technical support. So, it’s an information-heavy website that houses a lot of the gory product details traders get into.

Our job? Give Beam’s website the chic look and feel of a modern communications company without sacrificing essential product information.

image of old website


Page views up by 14%

New visits to the site has
increased by 20%

Mobile views up by 46%

The design

Beam’s old website had all the tell-tale signs of the pre-responsive web design era — it was heavy on text, light on graphics and only really functioned on desktop.

So, what did we do? We flipped the site on its head. We chose big bold images, flattened out the graphics, added white space to reduce information fatigue, and replaced text with images where possible. To top it off, we coded the site to be responsive to all screen sizes.

Now Beam has some tightly designed and seriously good looking product pages packed with information their users can digest quickly.

Modern, tick. Sleek, tick. Responsive, tick.

image of Beam new design

The Solution

image of Beam new website

To differentiate themselves from their competitors, Beam wanted something they could call their own without breaking the bank. Something unique, but not built from scratch.

By building on and customising an existing product component, we had power over the site's design and—more importantly for Beam—also over its functionality.

With a site as powerful and flexible as Beam’s new one, creating an administrator UI that’s easy to use is a challenge. But we are always up for one and, after listening to Beam, we discovered that the backend really needed a serious dose of logic — starting with lightning-fast search capabilities that allowed administrators to easily create and manage complex product information appearing on the frontend.

The result after our robust construction, testing and refinement is that Beam have full control of their site — without the frustration.

image of beam new responsive websiteimage of beam new responsive websiteimage of beam new  responsive website
image of php file

Tech talk

At Butterfly, we can build pretty much anything with a lot of different tools, but for anything custom we have just loved using Joomla.

Beam sells high tech satellite communications products around the world. Remember all that dry but essential information cluttering Beam’s previous site? We needed to make this information accessible and we did it through the creation of various custom field types for the products.

We built downloadable product manuals, aligned product features to images to shortcut user understanding, and built ‘sliders’ that housed FAQs on products. But it was the multi-column tables we created for product specifications we are most proud of. Tables can make for awkward viewing on smaller screens. Users are often forced to pinch zoom or use clunky scroll functions.

But luckily for Beam’s users, our development team love a challenge and built a custom component where Beam can create responsive tables and load them with product specifications without touching any code.

We made it super easy for Beam to customise and style the tables through the admin backend, giving them full control over their product pages.

And best of all, when shrunk down onto a mobile screen, the tables are easy-to-use and look great.

Shine a light on your next web project

Click image for next case study