Halden - Landing Page Concepts Halden sells to grid operators, and there were two good ways to pitch it: tell them what's coming, or show them everything happening now. Rather than pick one on instinct, I designed the landing page as an A/B test so real traffic decides.

The two pages share one 12-column grid, the same section order, type system and components. Each variant changes only its message, its hero visual and its light color, so any difference in demo requests comes from the pitch and not the layout.

The work was building a system flexible enough to carry two different stories without either one feeling like the backup version.

Forecasting (act before demand spikes) vs metering (see and bill every kilowatt)

Primary metric: Demo requests from the hero CTA

I'd pick Forecasting. "From meter reading to early action" tells a grid operator what they get in one line. Did you write both hero lines before designing the visuals?

AI Analytics Dashboard

One blue runs from the logo to the chart line.

Revenue, active users, conversion rate and income sit in a row of cards above the trend chart. The cards answer where the numbers stand. The stepped line answers how they got there, holding each period's value until the next, with a tooltip on a dashed guide line for the exact figure.

The identity pairs a four-arc mark with a condensed wordmark, drawn to the same top and bottom lines on the construction grid. The top arc's blue comes back in the slogan tile, the chart line and the main button, so the brand and the product share one accent.

Designed by the Hue & Machine team.

#DashboardDesign #DataVisualization #SaaS #Analytics #AI #WebApp #BrandIdentity #UIDesign #ProductDesign #FigmaDesign