Website refresh · Energy advisory
EnergyPlus
A refresh that kept every page, word and web address of an existing energy advisory website, and brought its look and feel in line with the Airco and Solarpro sites so the group reads as one family.
The brief
EnergyPlus is the energy advisory business (Audit, Strategy, Performance) in the DLX Commercial and Industrial Solutions group. Its 13-page website did its job, but looked unlike its sister sites.
The brief: keep the content and structure, bring the design in line with Airco and Solarpro, and make the forms feed the group's lead database instead of opening the visitor's email app.
What we decided
Change the look, not the content
Every page, the wording, the charts and diagrams, the web addresses, the logo, the lime accent, the home page photograph and the Mulish typeface stayed as they were.
Adopt the family shell
A utility top bar, mega menus, square-cornered buttons, small uppercase kickers and a four-column footer with the group strip.
Fix the forms
The contact form used to open the visitor's email app. It now feeds the lead database and still works without JavaScript.
Add what was missing
A thank-you page, a 404 page, a sitemap, robots.txt, canonical links and social share tags.
Make it usable on a phone
A fixed Call, Email and Bill review bar, and a drawer menu that lists every sub-page.
What we built
- Kept (13)
- Every existing page, with its wording, charts and web address unchanged.
- Added (2)
- A thank-you page and a 404 page.
- Added to every page
- Utility top bar, mega menus for Services and Industries, footer newsletter and group strip, and a fixed phone bar.
What changed and what stayed
| Area | Before | Now |
|---|---|---|
| Base colour | Pine green #0F2F2A | Navy #000028 and #0a2038, with lime #C5DF59 kept as the accent |
| Greys | Green-tinted | Cool greys #4C4C68, #D9D9DF and #F5F6F8 |
| Header | One bar and one call to action | Utility top bar above the main bar, with mega menus |
| Buttons and cards | 4 to 10 px rounded corners | Square-cornered: 2 px buttons, 4 px cards |
| Kickers | Sentence case | Small uppercase, letter-spaced |
| Footer | Brand and three columns | Brand, group line, newsletter, four link columns and the group strip |
| Phones | Menu only | Fixed Call, Email and Bill review bar |
| Forms | Opened the visitor's email app | Feed the lead database, and work without JavaScript |
Design system
Colour
#000028#0A2038#C5DF59#4C4C68#D9D9DF#F5F6F8Lime stays as the EnergyPlus accent. Navy comes from the Airco and Solarpro sites so the three read as one family.
Type
Mulish, self-hosted, kept from the original site. Airco uses Inter and Solarpro uses Archivo with a serif, so the family is close rather than identical.
Layout
The original structure was kept; only the shell around it changed.
Components
- Utility top bar with location, phone, email and two calls to action
- Mega menus for Services and Industries, with the current page underlined in lime
- Footer with a newsletter, four link columns and the group strip
- Fixed Call, Email and Bill review bar on phones
The panel at the top of this page shows each project's colours and motif. It is a summary of the design system, not a screenshot. See the live site for the real pages.
Highlights
- A single stylesheet and script serve all 15 pages. A version number on each link makes browsers fetch the new files once they are live.
- The newsletter moved from a section on several pages into the footer of every page.
- The contact form asks for sites, location and topic, so each enquiry arrives with the detail needed to answer it.
Built to generate leads
- A contact form and a footer newsletter, both feeding the group's lead database.
- The forms post to the database even without JavaScript, and a thank-you page confirms the result.
Quality checks
- Canonical links, social share tags, a sitemap and robots.txt on a site that had none.
- Palette pairs measured at 5.5:1 contrast or better, with lime on navy at 11:1.
- All 15 pages checked at 1440, 1100, 900, 700, 390 and 360 px wide: no overflow, no console errors, and the logo and typeface load on every page.
Want a design brief like this for your business?
Start with a free homepage preview, or ask for a written quote.