DieselSites

Role

Originated and pitched the product, then product designer and front-end developer on the DieselSites project team.

Timeline

Launched January 2026

Stack

Webflow (pitch prototype), Balsamiq, Figma, GrapesJS, Entri, HTML, Tailwind CSS, and JavaScript templates

Outcomes

• Took DieselSites from a pitch to a launched product with paying customers
• Opened a new down-market tier for Dieselmatic: plans start at $33/month, against $249/month for the agency's entry plan, an entry price roughly 87% lower
• A structured attribute framework (e.g. data-dieselsites="logo") gave design and engineering one shared contract for every editable part of a template
• Shop owners can sign up, build, publish and connect a domain on their own, without a sales call or an agency project

The opportunity

Two things were happening at once.

AI had made website builders much cheaper to build, and new ones were launching constantly. I expected the next wave to be vertical: builders made for one industry, with that industry's services, language and content already built in.

Meanwhile, Dieselmatic's entry plan was $249 a month. That's a fair price for a managed agency service, but it put us out of reach for the majority of the market we knew best. Those shops still needed websites; they were just going to get them somewhere else.

Dieselmatic already understood this industry: the services, the customers and what a good shop website needs to say. My pitch was to package that knowledge into a self-serve website builder and capture the down market we were leaving on the table.

Pitching with a prototype

Rather than argue for the idea in a deck, I built a small prototype in Webflow. On one side was a form with checkboxes for the services a shop might offer. On the other was a website preview. Checking a service showed its section on the site; unchecking it hid it.

It was deliberately simple. The goal wasn't to prove the technology; it was to get the idea in front of the company in a form anyone could click and understand in seconds: tell us what your shop does, and the website follows.

Leadership approved DieselSites as one of Dieselmatic's project teams, and I was assigned to it.

How we worked

Dieselmatic ran new initiatives as small project teams working in two-week sprints. On DieselSites, the facilitator role rotated every sprint, so each of us took a turn running the sprint.

On sprint review day, we demoed our progress to the entire company. That cadence kept the product visible across Dieselmatic and gave us regular feedback from people who knew truck repair shops well.

Beyond facilitating, my work spanned the path from idea to interface: information architecture and wireframes in Balsamiq, high-fidelity mockups in Figma, and the front-end templates themselves.

From sitemap to wireframes

I started with the structure of the product: a landing page, sign-up and login, and a dashboard branching into Account (account info, business profile, membership), Website Content, Brand Settings and Theme Settings.

Wireframing each area in Balsamiq let the team agree on scope and flow before anything was styled.

[Image: Self-serve sitemap and Balsamiq wireframes, dieselsites-sitemap-wireframes.webp]

The first sign-up wireframes still carried Dieselmatic's branding and led with a free trial and three promises: a customizable website, conversion-optimized design, and readiness for search engines. By the final design, DieselSites had its own brand and a much simpler sign-in.

A brand of its own

DieselSites needed an identity that spoke to shop owners directly. The brand is built on three values: reliable and trustworthy, expertise and authority, and empathy with a human voice.

Greenback Green (#16A34A) and Gun Metal Grey (#030712) carry the palette. Montserrat Extra Bold Italic gives headings speed and weight, and League Spartan handles subheads and body copy. The arrow in the wordmark carries “Diesel” into “Sites”.

Designing the product

Onboarding in the shop's language

Shop owners aren't web designers, so onboarding doesn't ask them to pick layouts or write copy from scratch. It asks questions they can answer instantly, like which diesel service best defines your shop? Heavy-duty truck repair, fleet services, towing, mobile repairs, roadside assistance, trailer repair and more. Each answer shapes the content their site starts with.

Plan selection sits at the start of onboarding, with a 14-day free trial on every plan so shops can see their site before they pay.

An editor built around services

The editor keeps the core idea from the pitch prototype: choose what your shop does and watch the site change. Shop owners upload a logo, pick a font pairing and brand colours, and select the services and repairs they offer, with a live preview across mobile, tablet and desktop before they publish.

Bridging design and engineering

Templates were designed in Figma and I built them as front-end code. The hard part was the seam between a template and the builder: the builder had to know which parts of any template a shop owner could change.

I defined that seam with a structured attribute framework. Every editable element carries an attribute that names what it is, such as data-dieselsites="logo". That gave design and engineering a shared vocabulary: new templates could be designed freely as long as they used it, and wired into the builder in a consistent way.

We built the editor on GrapesJS, an open-source web builder framework, so the team could spend its time on the diesel-specific experience rather than on a page editor. Entri handled domain registration, so shops could put their site on their own domain without wrestling with DNS.

What I took away

A prototype you can click beats a slide you have to believe. The pitch prototype did very little, but it made the idea concrete enough for the whole company to react to.

Vertical is a real advantage. A generic builder asks a shop owner to become a web designer. DieselSites could ask about towing, fleet work and roadside calls instead, because Dieselmatic already knew the industry.

Rotating facilitation builds shared ownership. Taking turns running sprints meant everyone understood the whole project, not just their part of it.