Turning a manufacturer's generic product catalog into a site that shows buyers exactly what Genesis does.

My role

  • UX design lead
  • Information architecture
  • UX/UI design
  • Design system

Deliverables

  • Site architecture & navigation
  • Homepage, industry, category & product templates
  • Figma design system & component library
  • Responsive designs for desktop & mobile

Results

  • 2× pages per visit
  • +80% time on site
  • +20% conversion rate
Overview

A company that had outgrown its own website.

Genesis Products manufactures laminate panels, cabinet doors, drawers and interior components for OEMs across RV, cabinetry, work vehicle and commercial interiors. Since its site launched in 2021, the business had grown into a market leader in four industries, but the site still read like a catch-all product catalog.

Original Genesis Products homepage: "Elevating environments" hero Original Genesis Products homepage: product categories and isometric illustration
Research & Insights

Measuring the old site before redesigning it.

We baselined the existing site with first-impression timeout tests, task-based usability sessions and a System Usability Scale survey. That gave us a benchmark the redesign would have to beat, and a specific list of problems to design against.

72

Homepage SUS score: users liked the look but couldn't explain the business

64

Navigation SUS score when users were asked to find specific products

75+

Target score the new design had to clear

PurposeThe homepage was full of buzzwords. Users had to visit the About page to work out the business.

NavigationUsers ignored the industry side-nav and fell back on scanning a long, unsorted product list.

Product offeringIndustry pages were too text-heavy to show how the products are actually used.

ContactEvery page funneled into the same generic form, with no sense of what happens next.

IA & Navigation

Four doors in, instead of forty.

Buyers never browse across industries. An RV manufacturer doesn't care about acoustic ceiling tiles. So we rebuilt the sitemap and navigation around the four industries where Genesis leads and gave every product a single, predictable path: industry, then category, then product line.

RV Interiors
Categories
Cabinets & Closets
Categories
Commercial Interiors
Categories
Vehicle Interiors
Categories
Laptop mockup of the desktop Industries mega-menu showing RV Interiors categories
Mobile navigation: industry menu, RV Interiors and Vehicle Interiors drill-downs
Homepage UI

Lead with the industries, then earn trust.

The old hero video showed so many settings that users couldn't tell what Genesis made. We replaced it with a split visual navigation. One industry gets the spotlight, the other three sit beside it, and each panel opens with a single "Explore" action.

Mobile homepage: about section, product spotlight and proof-point stats
Industry & Product Templates

One skeleton for every industry and product.

Every page below the homepage is assembled from the same modules: a hero, a "jump to" bar into the categories, an intro story, then whichever content blocks the page needs. That kept industry, category and product pages consistent enough to scale, while each industry still gets its own photography, partners and proof.

Industry
RV Interiors industry page template
Category
RV Cabinet Doors category page template
Product
Drawers product page template
Design System

A system built for the marketing team, not just for launch.

Genesis needed to add product lines and refresh content without waiting on a designer. We built the system in Figma from the brand guidelines up. That meant Proxima Nova and Miller Text type scales for desktop and mobile, green, blue, orange and gray color tokens, and two industry icon families: illustrated icons for large tiles and line icons for tabs and filters.

Genesis design system overview: color palette, buttons, form fields, icons, navigation, grid and spacing, and typography
Cabinets & countertops iconDrawers icon5-piece door iconVehicle flooring icon
Results

From a product catalog to a brand buyers spend time with.

After launch, visitors went deeper into the site, stayed longer and contacted sales more often. That's the outcome the brief asked for: visitors who leave thinking, "Genesis is legit. I want to do business with these folks."

2×

Pages per visit

+80%

Time on site

+20%

Conversion rate on contact

KC HiLiTES
Next
KC HiLiTES