As the lead UI/UX designer on a four-person Perficient team, I designed five new industry pages for DTE Energy’s business efficiency program (grocery stores, restaurants, retail, convenience stores, and places of worship). Each shipped in four weeks with its own vanity URL, and I refreshed DTE’s Retro-Commissioning (RCx) industry page to match. Every page had to look and feel like it had always been part of DTE’s site, even though I was designing against a system I didn’t build, within a timeline that left no room to start from a blank page.
Designing Five New Industry Pages Under a Live Design System
DTE’s live business pages rather than designing from a blank canvas.
Designing Five New Industry Pages Under a Live Design System
DTE’s live business pages rather than designing from a blank canvas.
OVERVIEW
Information
Client
Perficient - DTE Energy Detroit
Role
Lead UX/UI Consultant, Visual Designer
Industry
Energy & Utilities
The Problem
Before this project, DTE’s business efficiency section spoke to businesses in general terms. A bakery owner and a warehouse manager landed on the same page, saw the same generic tips, and had no visual or written cue that DTE understood the specific pressures of their industry. Five business types- grocery, restaurant, retail, convenience store, and place of worship- had no dedicated page at all.
That gap mattered more than usual because these pages were being built with their own vanity URLs, meant to be used directly in outreach and marketing rather than found through the site’s normal navigation. A user clicking a vanity link from an email or an ad would land cold, with no site-wide context to lean on, so the page itself had to do all the work of saying “this is for you” within seconds. Nielsen Norman Group calls this information scent: the cues a page gives that tell someone they’re in the right place before they read a word of body copy. Generic imagery and generic copy kill that scent instantly.
At the same time, DTE’s Retro-Commissioning (RCx) industry page had quietly fallen behind. Perficient’s design team had already rolled out a refreshed design system across the rest of the site, but RCx was still running the older layout. Left alone, it would have become the one page that looked like it belonged to a different site, which is its own usability problem: NN/g’s consistency heuristic holds that when one part of a product breaks pattern with the rest, users lose confidence not just in that page, but in the whole experience.
That gap mattered more than usual because these pages were being built with their own vanity URLs, meant to be used directly in outreach and marketing rather than found through the site’s normal navigation. A user clicking a vanity link from an email or an ad would land cold, with no site-wide context to lean on, so the page itself had to do all the work of saying “this is for you” within seconds. Nielsen Norman Group calls this information scent: the cues a page gives that tell someone they’re in the right place before they read a word of body copy. Generic imagery and generic copy kill that scent instantly.
At the same time, DTE’s Retro-Commissioning (RCx) industry page had quietly fallen behind. Perficient’s design team had already rolled out a refreshed design system across the rest of the site, but RCx was still running the older layout. Left alone, it would have become the one page that looked like it belonged to a different site, which is its own usability problem: NN/g’s consistency heuristic holds that when one part of a product breaks pattern with the rest, users lose confidence not just in that page, but in the whole experience.
THE SOLUTION
Four weeks time. Five new, fully responsive industry pages for grocery, restaurant, retail, convenience store, and place of worship, each with its own vanity URL, a hero banner featuring industry-specific photography, a How It Works section explaining the assessment and rebate process, and a Featured section highlighting a relevant DTE success story. Below that, each page retained DTE’s existing energy-tips and rebate-catalog modules so returning visitors and internal stakeholders would recognize the page as unmistakably a DTE page rather than a one-off microsite.
Every page was specced for both desktop and mobile, since these pages would be shared as standalone links with no guarantee of the device on the other end. Alongside the five new pages, I refreshed the RCx industry page to align with the current design system, closing the consistency gap.
Every page was specced for both desktop and mobile, since these pages would be shared as standalone links with no guarantee of the device on the other end. Alongside the five new pages, I refreshed the RCx industry page to align with the current design system, closing the consistency gap.
