Interactive IBM Product Cards
IBM · Web Design · Interaction Design
A product grid that ripples back when you hover it.
View the redesignROLE
Solo Designer and Developer
TEAM
1 Designer (Me)
TIMELINE
1 day
WHAT I DID
IBM's site is clean and professional, and it stays close to the brand. What it does not do is invite interaction: in the "Top enterprise technology" section, hovering a product box only turns its outline blue. I rebuilt that one section to look for more intriguing interactions that still belong in IBM's restrained aesthetic. The rest of the homepage stayed out of scope.
CONTEXT
Directed research, one of 25 website redesigns completed over the semester
TOOLS
HTML, CSS, JavaScript
Left, IBM's current product section. Right, the redesigned interactive cards.
THE CHANGE
The layout comes first. Eight flagship products, from IBM Bob to watsonx Orchestrate to Maximo, sit in a uniform grid of cards, and each card leads with evidence: what a customer said, or what a customer measured. The product name, the quote or stat, one icon, one arrow. Everything a visitor needs to decide where to click is visible without opening anything.
The hover is the interaction I wanted to push further. Instead of stopping at the outline, each card carries a hidden grid of cells that light up one after another as your cursor arrives, timed along a sine curve so the light moves like a small wave crossing the card, cresting in the middle and settling at the far edge. It is quick and quiet, but the section suddenly feels responsive.
The icons work the same way. I replaced the abstract pictograms with plain line icons that picture each product (code brackets, a shield, a gauge) and gave each one a small hover animation of its own: the gauge needle sweeps, the data packets stream, the storage lights blink. Enough movement to reward attention, never enough to distract from the product next to it.
REFLECTION
The hardest part was the restraint. Every interaction had to stay simple and professional enough to sit comfortably inside IBM's brand, so each addition was kept small, fast, and easy to ignore if you are not looking for it. If I kept going, I would carry the same treatment into the other sections of IBM's homepage, one section at a time, looking for the same kind of quiet, professional interactions.