Hearthline Electric
- Project
- Sample website
- Audience
- Residential electrician · Oakland, California
- Scope
- 3 pages · design and build
The brief
Who it’s for. What it needs to do.
Plan the next electrical project around the home it belongs to.
Hearthline is a fictional residential electrician built around planned improvements: panels, charging and lighting. The brief gives homeowners a way to describe what they want to change. It favors a short, legible journey from the opening message to the work and then to a project inquiry.
This sample uses a fictional business and fictional claims. The five connected pages show how the design supports a complete customer journey.
Design decisions
A closer look at the choices behind the pages.
Make the scope easy to find
The Our Work page carries the service detail in a ledger layout. The split homepage pairs the practical introduction with project imagery. With only three main destinations, the navigation makes the next step easy to keep in view.
Give the inquiry its own page
Start a Project is a dedicated destination with labeled fields. It follows the same visual language as the work page, so the transition feels like a continuation of the conversation. In this concept, the form validates locally and displays a demo confirmation.
The visitor journey
From the first question to the next step.
Get oriented on the homepage ↗
Read the opening message, then choose between exploring the work and starting an inquiry.
Explore the electrical work ↗
Read the service presentation with your panel, charging or lighting project in mind.
Describe the project ↗
Open the contact page and try the local demonstration form; it does not send a service request.
Delivered work
What’s here, and what it demonstrates.
A complete website to explore
The build includes 3 connected pages: Home, Our work, Start a project. The business keeps its own palette, typography and page layouts across the site. The preview below lets you switch between desktop and mobile while browsing.
What the website is designed to do
This sample shows the design, content and inquiry flow Mantel can create for a business in this industry. Results depend on the business, market and services connected at launch.
Explore the website
Take a closer look at the finished pages.
Explore the connected pages below. Sample forms do not send messages.
Let’s make it yours.
Tell us about your business, the people you serve, and what your website needs to do.