Vendor brand pages, built as a system
A responsive component library that turns each vendor's brief and assets into desktop, tablet and phone brand pages. Analytics then showed where the page could work harder.
ADI carries products from many vendors, and each gets its own brand page. I run the process end to end, from the first brief to measuring how the live page performs.
Review the creative brief and walk the vendor through the page structure: hero, features and benefits, video, categories, resources.
Ask what the page should achieve and which products or services to feature.
Explain the exact sizes and formats each section needs, so assets arrive ready to use.
Collect the vendor's UI kit or identity guide to bring their colors and graphic elements into the page.
Drop images, copy and colors into components from the brand-page library.
Switch each section to its tablet and phone variant with one click. No rebuilding.
Track behavior with Mouseflow heatmaps and Google Analytics, then improve the template.
Instead of drawing a separate module for every device, I built each section as one component with size variants. Content goes in once, and the tablet and phone layouts come with it.
18 separate modules (6 sections × 3 devices) to build, update and keep in sync
6 components, each with a Size property. Update once, and every size follows.
Pick a component, then switch its size. This mirrors how the variants work in Figma.
The same components, filled with Bosch's assets, copy and colors, produce a complete brand page for each device. Section order, spacing and calls to action stay consistent everywhere.
Hover to scroll · Click to expand
After launch, I studied Mouseflow heatmaps and scroll maps alongside Google Analytics to see where visitors landed, how far they scrolled and what they clicked. Two findings led to changes across every brand page.
After scrolling the page once, visitors scrolled back up and down looking for featured products and prices.
Proposed a sticky in-page navigation with quick links, so visitors can jump straight to any section without scrolling.
Illustrated behavior, and the sticky navigation that fixed it
The video section was one of the most scrolled-to areas and the second most clicked, but it trailed the hero banner by a wide margin.
Added Videos to the sticky navigation and moved the brand-video section to the bottom of the page, so visitors pass the rest of the content on the way there.
Grocery stores put milk and eggs at the back, so shoppers walk past everything else and leave with more than they came for. Putting the most-wanted content last does the same thing for a brand page, and it gave vendors proof that visitors engage with their whole page.
Brand Videos, now the last section on the page
The component system made each new brand page faster and more consistent to produce across three sizes. The analytics work turned the template into something ADI could show vendors with real engagement data.
One set of components serves every vendor and every size, so new pages are built from proven parts instead of from scratch.
Clear asset specs and brand-kit intake keep each vendor's identity intact inside ADI's template.
Sticky navigation and smarter section order raised Featured Products clicks by 25% and click-through by 15%.
Landing-page engagement up 25%, bounce rate down 55%, satisfaction up 15%, interactions and conversions up 10%.