Navico
Principal UI development for Navico's multi‑site, multilingual e‑commerce platform, supporting Lowrance, Simrad, and B&G from a single shared codebase built around Node.js, Handlebars, Razor templates, and Episerver.
In Detail
The project was inherited from another agency as a set of static HTML templates built with Bootstrap and jQuery. These required significant reworking as client requirements evolved and the Episerver back end was developed in parallel to provide content management and e‑commerce.
To preserve as much of the existing work as possible, I broke the templates down into reusable Handlebars components and documented them in Storybook. The CSS was refactored into Sass, whilst the existing Bootstrap and jQuery foundations were retained where practical.
The central architectural challenge was supporting three distinct Navico brands — Lowrance, Simrad, and B&G — from a single codebase. Although the designs deliberately shared common structures, the implementation needed to avoid both excessive duplication and an overly generic output that weakened each brand's identity.
CSS custom properties would have been a natural way to manage brand‑level variation, but browser support across Navico's customer base was not yet sufficient. Instead, I used Sass variables to share foundations such as colour, spacing, and typography across all three sites, supplemented by inheritance‑based overrides and brand‑specific components where necessary.
To support the Episerver back end being developed in parallel, I built a standalone Node.js application that allowed the front end to be developed and previewed independently. It generated page‑ and brand‑specific Razor templates that could then be integrated directly into Episerver.
That workflow became part of the CI pipeline for the final platform. UI changes could be made once within the front‑end project, transformed automatically into the required templates, and passed into the CMS integration flow without repeated manual reworking.
Homepages
Within Episerver, each brand could assemble its homepage from a shared library of predefined layouts and components. Although those components used common markup and data structures, brand‑specific presentation allowed Lowrance, Simrad, and B&G to retain distinctly different visual identities.
Category Pages
Category pages followed a broadly shared structure across the three brands, but could be assembled from the component library and styled independently. Consistent filtering and navigation patterns helped customers find the products they needed without forcing the three sites into an identical visual treatment.
Product Details Pages
Product detail pages deliberately shared a common underlying structure across all three brands, with visual treatment adapting to each identity. This created a clear family resemblance at platform level whilst keeping the customer experience cohesive within each brand, particularly when selecting product specifications and options.
Content Pages
Content pages demonstrated the flexibility of the component architecture most clearly. Marketing and content teams could use Episerver's page‑building tools to assemble different combinations of reusable components, giving each brand considerable freedom over page structure and content without requiring bespoke development for every variation.
- "
I worked with John Kavanagh on a high profile, large‑scale project at a digital agency. John was great to work with, solving problems without any input and contributing to the project way beyond what was expected. I'd happily work with him again and would easily recommend his talent to everyone!"
