Skip to main content

Generator manufacturer’s product catalog powered by our responsive design system

A collage of various interface elements from the Champion Power Equipment design system

Champion Power Equipment is a market leader in power generation equipment. They chose Cloud Four to design, build and launch a responsive, pattern-based consumer web experience emphasizing brand consistency, usability, performance and ease of maintenance.

Their previous website had grown disconnected from their products, packaging and marketing materials, and was slow to load and render for users. It was built on a platform that was challenging for CPE’s small, nimble team of marketers to maintain, especially in response to high-traffic events like natural disasters.

By leveraging the power of Responsive Design Sprints and involving the client directly and transparently in that process, we delivered a better, faster, more trustworthy and resilient experience for users and maintainers alike.

I can say with confidence that I’ve never worked with a more technically and thoroughly capable team. It’s very apparent that they love what they do and watching their work unfold is truly a joy.

Scott Henning, Marketing Director

Solution

Design System

Working directly with their design and marketing teams, we extended their existing brand elements and packaging design into mood boards, element collages, and finally a library of robust and well-documented patterns and prototypes.

WordPress Theme

The design system is consumed by a custom WordPress theme that leverages a handful of judiciously-researched premium plugins (Timber, Advanced Custom Fields, etc.). WordPress gives the CPE team a familiar, well-regarded and extensible administrative interface with competitive hosting options.

Design Highlights

Collage of various patterns created for this project

Each design we completed yielded new responsive patterns for our Drizzle-powered style guide, which helped promote consistency and increase velocity as the project progressed. Everything from the smallest button to the largest mega menu was polished, codified and documented for ease of reference and re-use.

This is by far one of the best style guides I’ve seen from a client!

Feedback from another CPE vendor

Based on analytics data and support team conversations with real customers, we were able to re-prioritize and consolidate website navigation. The “Priority Plus” navigation bar only hides what won’t fit in the current viewport, exposing more and more navigation options as space allows.

  • Generator Selector: Step 1
  • Generator Selector: Step 2
  • Generator Selector: Step 3

It can be challenging for new customers to tell the difference between similar generators. Our design introduced Guided Product Discovery for first-time buyers, as well as product listing filters and detailed product comparisons (all responsive).

Detail of a product page with a product photo magnification feature active

Product details are easy to read thanks to our design system’s modular typographic scale, with silky-smooth image galleries using responsive images and CSS scroll snap points.

We’re Cloud Four

We solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.