Product Experience Redesign
Unifying a Fragmented Buying Experience
CGX's catalog was split across two sites, the legacy CGX Systems site and the newer CrunchBox Store. A buyer might find specs on one and pricing on another.The contact page stacked forms with no clear path. The footer was a flat link dump with no hierarchy. For scientific equipment buyers making considered purchases, that friction cost trust.
Merged scattered content, descriptions, specs, features, into one page per product, built on CB Store's real design system. Bigger product photography with key specs surfaced immediately, so buyers get oriented before they scroll.
The gallery consolidates and automates the user experience of the product by being informative and more visually immersive at the same time. Shots include technical product photos and lifestyle images.
The numbers people check first, set large in the display face and pinned to the top. Designing the data as a graphic moment anchors the page and makes the scan effortless, instead of burying it in a table further down.
The numbers people check first, set large in the display face and pinned to the top. Designing the data as a graphic moment anchors the page and makes the scan effortless, instead of burying it in a table further down.
The spec block, the gallery, the section headers: each is a reusable Figma component with proper variants and consistent naming. It keeps the file clean, keeps the page consistent, and makes it quick to restyle or extend. The visual system is disciplined on purpose. One accent color, a tight type scale, and a small status set, used only where each has a job.
