Product Design · Commerce UX · Design Systems

GCI Digital Commerce Product Experience

Rebranding and restructuring a complex institutional product catalog into a clear, accessible, and scalable commerce experience.

I helped shape a more modern digital experience for GCI—organizing diverse product families, strengthening the visual brand, and creating repeatable patterns that supported both institutional purchasing and public product discovery.

  • Product Strategy
  • Information Architecture
  • Commerce UX
  • Accessible UI
GCI digital commerce experience displayed on desktop
GCI digital commerce experience displayed on mobile

Project overview

Turning a broad catalog into a more understandable product experience.

GCI’s catalog spans products with very different specifications, purchasing requirements, and decision points. The experience needed to feel unified without oversimplifying the information buyers require.

My role

Lead design work across the digital rebrand, product organization, experience direction, interface patterns, and responsive presentation.

Primary goal

Help institutional and public buyers understand what GCI sells, locate relevant products, and move toward purchase or inquiry with greater confidence.

Core challenge

Support office and park furniture, chemicals, cleaning products, signs, and other categories within one coherent commerce framework.

Design value

A clearer catalog architecture and reusable digital system designed to support product discovery, comparison, and purchasing decisions.

01

The challenge

A catalog built around many product types can become difficult to browse when categories, specifications, and purchase paths are not presented consistently.

02

The goal

Create a modern commerce experience that balanced institutional credibility with the clarity and usability people expect from contemporary retail platforms.

03

My response

I connected the digital rebrand, catalog structure, category templates, product pages, purchasing guidance, and responsive UI into one scalable system.

Product ecosystem

Different products require different decision-making information.

The catalog was not treated as a flat collection of items. Each product family was considered according to the details, documents, options, and purchasing questions its buyers would need.

Office and park furniture

Dimensions, materials, finishes, installation context, product imagery, quantities, and lead times.

GCI cherry-wood executive office desk, hutch, and storage furniture

Chemicals

Use case, size or volume, handling information, supporting documentation, and institutional ordering needs.

Bulk institutional chemical cleaner bottle and shipping carton

Cleaning products

Compatible surfaces, applications, quantities, product variations, and clear supporting information.

Institutional sanitation products including hand sanitizer, wipes, and protective masks

Street and facility signs

Size, material, mounting, customization, message requirements, and quote or inquiry pathways.

Collection of traffic, warning, railroad, and facility-direction signs

Digital rebrand

Modernizing the brand without losing institutional trust.

The visual direction preserved GCI’s established authority while introducing a cleaner digital hierarchy, more consistent product imagery, stronger calls to action, and reusable interface patterns.

  • Brand application: More consistent logo, color, typography, imagery, and promotional treatment across the experience.
  • Visual clarity: Stronger contrast between navigation, product content, specifications, and purchase actions.
  • Product context: A shift toward imagery and layouts that help buyers understand products in use.
  • Scalability: Patterns designed to support new categories and product information over time.
GCI digital rebrand showing color, typography, imagery, and interface direction
A connected digital direction translates GCI’s catalog heritage into a modern, product-led interface.

Experience design

Reducing friction from discovery through purchasing.

The experience was organized around the questions buyers ask: What is available? Is this right for my need? What information is required? How do I purchase, request a quote, or order through an institutional process?

01DiscoverNavigation, search, and category entry points
02NarrowFilters, labels, product families, and comparison cues
03EvaluateSpecifications, options, documents, and trust signals
04ActPurchase, quote, purchase order, or inquiry
GCI information architecture and product-discovery flow
01 · Information architecture

Organizing the catalog around recognizable buyer needs.

Clearer category relationships, product labels, and discovery paths helped reduce the burden of navigating a large, specialized catalog.

  • More understandable product groupings
  • Consistent category naming and navigation cues
  • Filtering and search patterns designed around relevant product attributes
GCI category-page system
02 · Category system

Shared structure with category-specific flexibility.

Reusable category templates supported consistent browsing while allowing furniture, chemicals, cleaning products, and signs to surface the attributes most relevant to each category.

GCI product-detail-page system
03 · Product-detail pages

Turning product pages into decision-support tools.

Product imagery, specifications, variations, downloads, fulfillment details, institutional guidance, and related actions were brought together in a more predictable hierarchy.

GCI purchasing and procurement flow
04 · Purchasing and procurement

Supporting more than a standard retail checkout.

The experience accounted for the ways institutional and public buyers may need to move forward, including direct purchase, quote requests, purchase orders, invoicing, tax-exempt needs, or product customization.

  • Clear next steps and progress guidance
  • Contextual support for specialized purchasing paths
  • Accessible form labels, errors, and confirmation states

Design system and accessibility

Reusable patterns connected the experience from navigation to checkout.

The system emphasized consistency, accessibility, and implementation clarity across navigation, product cards, filters, accordions, forms, calls to action, and responsive states.

Accessible

Contrast, focus states, keyboard use, labels, errors, and readable hierarchy were treated as part of the design.

Reusable

Components could support multiple categories and workflows without creating separate visual systems.

Responsive

Layouts and controls were designed to remain usable across desktop, tablet, and mobile contexts.

Build-aware

Patterns were considered with front-end behavior, content variability, and production QA in mind.

GCI design system showing reusable interface components and states
Reusable patterns define visual hierarchy, interaction states, accessibility, and responsive behavior.

End result

A clearer foundation for a complex commerce ecosystem.

The redesigned direction connected GCI’s digital brand, diverse product catalog, institutional workflows, and responsive UI into a more coherent product experience.

GCI responsive commerce experience displayed across desktop and mobile interfaces
The final direction connects product discovery, decision support, and procurement across responsive experiences.

Clearer discovery

Product groupings and interface patterns gave buyers more understandable paths into a broad catalog.

More useful product content

Repeatable page structures helped surface the information needed to evaluate different product types.

Greater scalability

A shared digital system created a stronger foundation for new products, categories, content, and purchasing needs.

Related discipline

See how I used the same systems mindset to scale a brand across proposals, social media, and campaigns.