Navico
A complicated multi‑site, multi‑lingual e‑commerce platform on top of Episerver using Handlebars, and ASP.NET Razor. A bespoke system to offer three disparate branded experiences from a single codebase.
In Detail
Originally inherited from another agency, we were provided with a set of totally static HTML templates using Bootstrap and jQuery. These needed significant reworking due to changing client requirements and the development of (and integration with) an Episerver back‑end to provide content management and e‑commerce.
Trying to reuse as much of the existing code as possible, the templates were broken down into components using Handlebars and documented in Storybook. The CSS was refactored into Sass, whilst the jQuery and Bootstrap were, as far as possible, left alone.
The biggest challenge with this project was the fact that one single codebase needed to cater for three disparate websites, covering three of Navico's core brands: Lowrance, Simrad and B&G. Whilst the designs had been carefully constructed to allow cross‑over between variants of each page, there was a very fine line to be walked between a copy‑paste style approach and a fully‑bespoke‑for‑each‑site output.
Whilst CSS variables (inherited off a high‑level classname) would have likely been an ideal solution, this would have neglected a significant portion of the client's customers, whose browsers simply were not up‑to‑date enough to support it. We settled on a solution using variables within Sass, which allowed us to spread artefacts such as colours, spacing and typography across all three sites. After that, inheritance‑based overrides and some brand‑specific components got us the rest of the way.
For integration into the Episerver back‑end (being developed in parallel), we put together a small standalone Node.js application which allowed us to develop the front end separately, outputting preview screens for the client. This also allowed us to output Razor templates for each page and brand, which could then be imported straight into Episerver.
This formed a key part of the CI pipeline powering the final product: UI changes could be made directly into the project and would then be transformed automatically, moving across to the client's CMS without any further developer involvement at all.
Homepages
Using the Episerver interface, the client can structure each individual brand homepage differently using a set of pre‑defined layouts and components. Although components share common markup and data sources, they can be visually very different, offering a unique, branded look and feel to each.
Category Pages
Each brand can structure its Category pages as it prefers from a library of components. All three follow a similar (albeit optically different) structure whilst offering visitors straightforward filtering and navigation to find the specific product they need.
Product Details Pages
Unlike other pages on the site, the PDPs for each brand follow the same structure, although visually on‑brand. The visitor's experience remains cohesive to the brand, although the family resemblance is obvious when viewed side‑by‑side. These pages are carefully laid out to remove any friction for users when choosing the specifications and options for the product they require.
Content Pages
An area where the three brand sites do differ significantly is in their content pages. This is where the real benefits of having rebuilt the original templates into components become obvious. Content managers and each brand's marketing departments are offered a drag‑and‑drop type page builder where they can assemble the page structure and content as they wish, for their specific brand and topic.
