B2B Catalog Website Redesign

Modernize a B2B catalog website experience to improve its usability, accessibility, and mobile experience.

Details
Context: I redesigned Pro Tapes' Wordpress-based website, creating new site content, and collaborating with the developer to iterate on site usability & accessibility.
Role: UI Designer, Branding, Content
Time: 2022-2023
Methods: design system, wireframes, prototypes, hi-fi mockups, graphic design, content (copywriting & UX writing), branding
Tools: Adobe XD, Photoshop, Illustrator
Project Sections
ChallengesDesign SystemHome PageProduct CatalogIndustries
Challenges
The site has a few groups of target users, each with their own needs. These include:
  • Manufacturers (B2B customers)
  • Distributors
  • Internal employees
  • End users (i.e. B2C customers)
The original site was designed before the mobile browsing boom; thus, it was not mobile-optimized or responsive.

Bad mobile experiences cause frustration and lower users' opinion of a brand.
Many of the site's target users fall into an older age demographic.

They may have trouble seeing digital screens clearly, and prefer easy to navigate digital experiences.
The Solution?
A familiar but simplified web experience.

Information must be presented in a frictionless and highly accessible manner.
Design System
I created & maintained a design system in Adobe XD.
The design system helped me to:
  • facilitate better designer-developer collaboration
  • maintain visual consistency
  • enable faster design build-out
Main Navigation & Home Page
the original website
While the desktop experience performed decently in terms of meeting user needs, the site was ready for a visual update. But that was just the beginning...
original Main Navigation
Home Page with the default main navigation on desktop.
A screen capture of the player journey diagram, along with close ups of key sections.
With the mouse hovered over the "Services" category. This category had the longest list of sub-pages (and therefore thumbnails), which just squeaked by on desktop...
... but the experience broke down on mobile.
With the "Services" category selected. The layout rendered the main nav unusable.
Certain content blocks contained large blocks of unstyled text.
There were often issues with size and proportion.
New website experience
The new site's Home Page with the default main navigation on desktop.
A screen capture of the player journey diagram, along with close ups of key sections.
New site, with the mouse hovered over the "Services" category. I designed the sub-menu layout to not exceed a fixed vertical limit.
On mobile, the main navigation is now neatly tucked away in a labeled hamburger menu.
A screen capture of the player journey diagram, along with close ups of key sections.
I kept the navigation experience simple and mostly text-based.
I eliminated large blocks of text, opting to redirect users to dedicated pages to learn more.
A screen capture of the player journey diagram, along with close ups of key sections.
Sizes of fonts and images are in better proportion.
This page is a work in progress
Additional sections & revisions will be implemented through May 2023. Stay tuned!
IntroChallengesDesign systemMain Nav & Home PageProduct CatalogIndustries
About
‍Projects
‍
© 2023 Irene Geller. All rights reserved.