dæ’vi:d

Bsquare, now Kontron · 2022–2023

Bsquare: A Design System and Website Redesign in Three Months

Bsquare sells system software for connected devices, and the organization had no shared component library. I built one first, then redesigned the whole website with it in three months, and carried the same approach into an ad framework used across 80+ campaigns.

The redesigned Bsquare homepage on desktop, with the mobile layout of the same page in front

Website

Bsquare builds system software for connected devices: SquareOne for managing device fleets, Windows IoT licensing, and hardened operating systems for Android, Windows, and Linux. The website had to explain three quite different offers to engineering buyers.

There was no shared component library, so each page and each campaign started from its own file. A full redesign done page by page would have taken far longer than the three months available, and would have left the next page starting from scratch again.

The Bsquare homepage before the redesign: centred headline and three outlined product cards on grey
The redesigned homepage: left-aligned headline, a full-width photo, and product cards with the orange accent

Before and after: the same message, rebuilt on shared sections

System

I designed the system before the pages: a 40-component library covering navigation, product cards, principle tiles, stat blocks, industry lists, calls to action, and the footer. It became the organization’s first shared component library.

Every section was designed at desktop, tablet, and phone widths, so the three layouts came from the same parts instead of three separate designs.

The homepage hero and product cards at desktop, tablet, and phone widths

The same sections at three widths

Product pages were assembled from the same sections. The SquareOne page reuses the hero, benefits, advantage tiles, package comparison, and free-evaluation call to action, and new needs came back as new modules in the site’s WordPress build rather than one-off pages.

The SquareOne product page, built from the homepage's sections

The SquareOne page, assembled from the homepage’s parts

Campaigns

The same approach carried into marketing. I built a reusable advertising framework: one layout that adapts across the seven standard display sizes, from a 728×90 leaderboard to a 160×600 skyscraper, keeping the type, call to action, and brand pattern consistent at every size.

One Bsquare display ad in seven sizes, from a tall skyscraper to a thin leaderboard

One campaign, seven sizes, one framework

Results

3 months

design system and full website redesign

50%

less design-to-delivery time

80+

campaigns on one ad framework

$50K

saved in creative costs

The ad framework also cut production time per campaign by 40%.

Lessons

Building the system first looked slower in the first weeks. It is the reason the whole site fit in three months, and it kept paying off with every campaign after launch. It was the same call I had made at Coalition the year before.

When a deadline is short, build the parts first. The pages go faster once they exist.

Read next