Define reusable behavior
The Figma foundation established typography, color, navigation, controls, product cards, forms, and responsive component logic.
Connecting product discovery across B2B and B2C
Client / context
BAZIC Products
Timeline
2024–Present
Role
Web/Product Designer
Status
Live
At a glance
One product ecosystem.
Distinct customer journeys.
I led the corporate website redesign from platform evaluation and information architecture through the Figma UI system, implementation, and launch. Within a product ecosystem of approximately 3,000–4,000 SKUs, I connected corporate, consumer, and dealer journeys, then used analytics and customer feedback to improve product discovery and inquiries.
- Collaboration
- Sales, Marketing, eCommerce, and company leadership.
- Ownership
- Sole core designer and primary developer for the corporate website redesign and migration.
Services
- Platform Evaluation
- Product Strategy
- Information Architecture
- UX/UI Design
- Design Systems
- Development
- Experimentation
Four decisions behind the work
Jump to a decision, or follow the story below.
Own the experience from product discovery to delivery
The previous corporate site was an outsourced WordPress website. It looked dated, but the larger problem was operational: updates were cumbersome, internal teams had limited control, and the corporate, consumer, and dealer experiences had evolved on separate platforms.
As Web/Product Designer, I led platform evaluation, information architecture, UX/UI, implementation, and launch. I was the sole core designer and effectively the primary developer for the corporate redesign and migration, with approximately 90% ownership of that project. I translated cross-functional requirements into design decisions and carried them through production. The redesign took more than a year; my ongoing BAZIC role began in March 2022.
Decision 01
Choose maintainability while protecting the design
In 2024, I spent approximately one month researching WordPress, BigCommerce, and Shopify through sandbox and prototype environments. I compared customization, B2B capabilities, pricing, existing product-data compatibility, internal maintenance, UX, and scalability.
Continuing with WordPress would preserve flexibility but not solve the dependence on outside maintenance. BigCommerce offered capable commerce tools, while Shopify provided the strongest overall fit for the existing ecosystem and internal publishing workflow. I accepted tighter theme constraints in exchange for maintainability, then reserved custom code for the interactions and layouts where the theme was not sufficient.
Decision 02
One ecosystem had to support three different journeys
Sales prioritized dealer access and detailed product information. eCommerce focused on consumer shopping. Marketing needed a coherent company and product story, while leadership wanted faster internal updates and less reliance on an outside agency.
Instead of forcing every audience into one generic journey, I connected three specialized Shopify sites through a shared system. The corporate site became the company and Product Catalog hub; bazicstore.com retained the B2C shopping journey; dealer.bazic.com retained partner pricing, ordering, and dealer resources.
Decision 03
A shared system made thousands of products manageable
The wider BAZIC product ecosystem spanned approximately 3,000–4,000 SKUs. I redesigned or updated approximately 15–20 core pages, including the homepage, careers, contact, recalls, product categories, and product details. Reusable navigation, cards, and related-product patterns gave those pages a consistent browsing experience.
I built the Figma foundation with Auto Layout, Components, Variants, and Variables to make typography, color, controls, and responsive layouts reusable. Interactive Components and Prototyping supported interaction design; Dev Mode helped bridge design and implementation.
I adapted the system to Shopify’s production constraints: theme components handled repeatable content, while custom HTML, CSS, and JavaScript preserved the intended behavior where the theme fell short. This kept visual consistency connected to a system the team could keep using.
Design to production
From interface system to live product
Adapt to production constraints
The live implementation balanced system consistency with Shopify theme constraints and selective custom development.
Implementation captures
The shipped system across key journeys
Responsive behavior had to work as a system
Product labels exposed a recurring breakpoint problem: text that fit at one width could overlap or block nearby components at another. I redesigned and implemented shared responsive label behavior so names wrap within the card system across desktop and mobile. Shopify previews and custom code let me check the component across desktop, tablet, and mobile widths, keeping the product hierarchy readable as the grid changed.
Accessibility followed the same production approach. I checked color contrast and color-vision scenarios, used semantic HTML, and added assistive labels where native semantics were insufficient.
Implementation captures
Responsive catalog behavior
Decision 04
Promoting Product Catalog increased entry visits by approximately 200%
After launch, analytics showed that a key product entry was not sending enough visitors into the catalog. I tested the existing treatment against a variant that promoted PRODUCT CATALOG to a prominent top-level navigation destination.
I implemented an approximately 50/50 visitor split with custom JavaScript, used a cookie to keep visitors on a consistent variant, and tracked variant assignment, CTA interaction, and catalog entry in Google Analytics. The test ran for two months. The winning variant generated approximately three times as many Product Catalog visits, an increase of approximately 200% over the control.
Customer feedback revealed a broken inquiry handoff
Customer emails and direct conversations showed that product inquiries required unnecessary navigation. Users left the product page, found Contact, and manually identified the product again.
For another BAZIC Shopify property, I kept one centralized Contact form but added Get More Information beside the product. The flow carried the product title, SKU, URL, and category into the form, reducing repeated input without duplicating form logic across thousands of product pages.
Product inquiry with context
- 01
Product detail
The customer starts from the specific product they are already evaluating.
- 02
Get More Information
An inquiry action beside the product opens the centralized support path.
- 03
Contextual contact
The Contact form receives the product title, SKU, URL, and category; the customer adds only their contact details and question.
Launch created an ongoing product practice
The redesigned experience launched in 2025. BAZIC could publish many routine updates internally, shortening the path from an identified need to a shipped change and reducing dependence on an outside agency.
Across my broader BAZIC web work, outcomes included +8% web traffic, +21% sign-up conversions, and +11% platform purchases. These span wider website improvements; the navigation experiment above measures a separate catalog-entry result.
I continue to own new pages, features, UI updates, product information, responsive QA, analytics, maintenance, and optimization. I present work to internal teams, incorporate cross-functional feedback, monitor the first week after launch, and use customer conversations, Google Analytics, and Shopify Analytics to identify the next improvement.
What I learned
Product ownership does not end when the interface ships. Platform constraints, content operations, analytics, maintenance, and future changes are part of the design problem.
The strongest solution was not the platform with the most design freedom. It was the system that balanced audience needs, business operations, technical constraints, and the company’s ability to keep improving after launch.
Product Design
UX/UI Design
Visual Design
Product Design
UX/UI Design
Visual Design
