Overview

The Challenge

How I Built It

Stakeholders

Reflection

Back

REC Power

2026

Prototyping the Behavior Before the Build

Web Design

Clean Energy

Design-to-Code

B2B

Figma

Figma Make

Web Design

Design-to-Code

Figma

Clean Energy

B2B

Figma Make

REC Power's case studies are sales assets. The library was designed for a light touch and was about to hold 42 entries, with more coming. DG+ asked me to design filtering and navigation that could carry that.

REC's visual system was already established. I designed this section inside it, both how it looks and how it behaves.

The scope was small. That is exactly why it was at risk.

Impact

Approved before development. WordPress feasibility surfaced at prototype review rather than mid-build.

team

Senior Visual Designer
(myself, design lead)

DG+ Agency

REC Marketing

External WordPress developer.

skills

Interaction design

Prototyping

Design to development handoff

Stakeholder alignment

The Challenge

Browsing several case studies chronologically is not browsing. A buyer looking for a microgrid at a resort has no way to get there, so they scroll until they give up. The section had been designed for the content REC had, not the content they were about to publish.

DG+ brought HubSpot to the client as a reference for how a large content library handles this, and REC responded to it. REC set the taxonomy: Solutions, Industries, Project Size, Location. My work was everything built on top of it.

How I built it

I explored directions and chose the most familiar one.

On desktop a direct port of the reference pattern, a version with applied-filter chips and a persistent clear-all, a hybrid keeping REC's existing segmented Solutions bar, and a faceted left rail with a live count beside every option.

The rail was the most capable of them. Counts on every facet, no hidden state, and it scales as the library grows, which was the whole problem.

I did not ship it.

REC's buyers skew traditional. A facility manager evaluating a solar array is not there to learn an interface. Faceted rails with live counts are a newer convention, and newer means the pattern spends attention explaining itself before it does any filtering. The reference-shaped version used a structure people have been using for years.

The other consideration on desktop, the options were functionally equivalent. Same filters, same results, same capability, arranged differently. When variations do the same work, the tiebreaker is not which is more interesting. It is which asks less of the person using it.

Mobile was the exception. Those options were not equivalent, and the differences were real usability differences rather than layout preference.

I designed the components, not just the layout. None of this existed in REC's theme. Dropdown styling, button treatments, selected and unselected states, filter chips, the empty state. All of it drawn inside the creative director's type and color system.

I ran an adversarial pass on my own work. Once the directions were on the board, I asked AI what I had missed and what alternatives existed. Some of it was useful and went in. Some of it was wrong for this audience and did not.

I prototyped the behavior rather than describing it. REC's site is WordPress and the build goes to an external developer. Static comps leave room for interpretation, and interactions get invented that were not in the design. So I built it in Figma Make. What went to the developer was working behavior, not a file and a list of annotations.

Four decisions came out of that build that the comps had never asked me to make.

Filtering happens instantly, with no page reload, and the result count updates as selections change.

Mobile needed a different structure, not a smaller one. Four dropdowns in a row do not shrink. I collapsed the set behind one Filter and Sort control with accordion sections, and kept the result count visible at every stage so someone narrowing on a phone always knows where they are.

Then testing that on mobile turned up the next problem. With every section able to open at once, the panel grew long enough that filtering meant scrolling through the filters themselves. So the accordion became single-open: opening one section closes the others. It keeps the whole control set reachable without scrolling, which is the point of collapsing it in the first place.

And the one I did not see coming. I built the zero-results state, looked at it, and realized a user could land there with no way out. Every filter still applied, nothing on screen, no obvious exit. So I put Clear All Filters directly into the empty state.

Outcome

Working with stakeholders

The creative director could click it. Review stopped being a conversation about intent and became a confirmation of behavior, so we went to REC with alignment rather than interpretation.

REC approved it and said the useful part out loud: they understood how the section would work before it existed.

"I always appreciate a prototype that explains your thinking. It does eliminate guesswork." — REC's WordPress developer

Then the constraint. Several interactions needed custom components that did not exist in the theme, and building them meant hours the budget did not have. The developer and I worked out what to reduce: hover effects, transitions, and some of the layering, staying inside what the theme already had.

Nothing structural went. The filters, the instant response, the mobile pattern, and the empty state recovery all shipped. What came down was polish, which is the right thing to spend when something has to be.

That conversation happened at prototype review. It cost a revision instead of a rebuild.

Reflection

Confirming a component is custom is not the same as knowing what it costs. Everyone knew these components did not exist. Nobody knew how complex mine would be. The gap was the estimate, not the inventory. Now I send a written behavior list before designing and ask which item is the expensive one, because that question makes a developer rank rather than approve.

Prototype earlier. I used Figma Make as a pre-handoff artifact. It works better as a pre-design one. A crude clickable version, built in an hour and shown before the polished comps exist, is more useful to a developer than a refined one shown after.

Small scope. The method is what transfers.

Live at recpower.com

Return to all projects