FleetFidelity

Context

FleetFidelity, a Yahara Software product, had just validated its fleet management solution. In short, FleetFidelity helps fleet managers find visibility in the myriad of metrics in their logistics chain: ELDs (electronic logging devices), cameras, safety metrics, operations and scorecards, among others.

The next step? Build a go-to-market marketing website that showcases FleetFidelity's value with a distinct brand.

The timeline was narrow, about six weeks end-to-end.

Goals

FleetFidelity's goals are better clarifying its product story, establishing a standalone brand, and laying the foundation for future growth and brand strategy.

At the start, FleetFidelity's website was deeply nested within Yahara's website. it wasn't easily accessible except by direct link, making it difficult to find. It was also fairly basic in structure as a single-page website. While useful for tradeshows, it wasn't ideal for prospective investors and customers.

Here's a look at the old website:

Process

Early on, we defined goals and scope in a clear brief. The new wbsite would be a four page, brand-focused website.

I started with visual mockups in Figma, including an expanded styleguide. From the beginning, I took what was working well and expanded it, keeping visuals unified.

Given the timeline, I opted to leverage a few open source visuals in the form of Lucide and Streamline icons/illustrations.

After feedback and a few revisions, I got to work planning the development of the website a technology stack consisting of Next JS, Tailwind, and Tina (CMS), all of which will deploy to Azure (more on that later).

Before beginning development, I created a high-level content model supporting block-based content, making each section of a given page customizable for website authors as templates.

Bold labels on the left correspond to a "collection" of content in the CMS.

To make the CMS as flexible as possible, I configured a plug-and-play navigation. An author can create a new page, begin adding content blocks, then link to it in the navigation/footer when they're ready to go public.

This is in addition to the usual customization options for meta tags, social images, SEO, and more.

The CMS also incorporated custom fields for updating HubSpot Forms and Google Tag Manager integrations.

Handoff

The final step in the process after reviews was handoff. The team at Yahara Software hadn't deployed Next JS before (and neither had I!), so initially there was some confusion on how to proceed.

I took ownership by learning more about Azure, creating sample deploys to my own App Services instance, and sharing those findings. The biggest challenge here was finding a reliable source for best practices. While Azure supports Next's features, it's not as straightforward as one would hope.

After a few hours, I found a working solution that wasn't too complicated to deploy an optimized, standalone bundle to Azure through GitHub Actions, costing them almost nothing to maintain within their existing infrastructure.

Conclusion

The end result is a mobile-friendly, highly customizable marketing website! FleetFidelity is now in a great position to add a blog and other expert-crafted content that can easily scale with its CMS.