Define reusable behavior
The Figma foundation established typography, color, navigation, controls, product cards, forms, and responsive component logic.
From outsourced website to an internally owned Shopify ecosystem
Client / context
BAZIC Products
Timeline
2024–Present
Role
Web/Product Designer
Status
Live
At a glance
Three Shopify sites.
One connected ecosystem.
I led approximately 90% of the platform evaluation, product structure, UX/UI system, implementation, launch, analytics, and ongoing evolution of three connected Shopify sites serving B2C consumers, B2B dealers, and corporate audiences across approximately 3,000–4,000 SKUs.
- Collaboration
- Sales, Marketing, eCommerce, and company leadership.
- Ownership
- Sole core designer and primary developer, from platform evaluation through ongoing iteration.
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.
The real problem was ownership, not aesthetics
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 approximately 90% of the platform evaluation, product structure, UX/UI system, implementation, launch, analytics, and ongoing evolution. I was the sole core designer and effectively the primary developer for the migration.
Decision 01
Shopify won on maintainability, not design freedom
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 new ecosystem had to support approximately 3,000–4,000 SKUs and approximately 15–20 core pages, including the homepage, careers, contact, recalls, product categories, product details, related products, and navigation.
I created a foundational Figma system with Auto Layout, Components, Variants, Variables, Interactive Components, Prototyping, and Dev Mode. Native Shopify theme patterns handled repeatable content where possible; custom HTML/CSS/JavaScript handled high-value behavior that the theme could not support cleanly.
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.
Live implementation
The live 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. Instead of patching individual pages, I redesigned and implemented shared responsive label behavior so names wrap within the card system across desktop and mobile.
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. There was no formal WCAG audit.
Live implementation
Responsive catalog behavior
Decision 04
Making the Product Catalog impossible to miss 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 three-site Shopify ecosystem launched in 2025 and outperformed the previous sites in traffic, registrations, and purchases, although exact comparable figures are no longer available. The more durable operational outcome is that BAZIC can publish many routine updates internally instead of returning to an outside agency.
I continue to own new pages, features, UI updates, product information, responsive QA, analytics, experiments, maintenance, and optimization. Internal review, cross-functional feedback, launch monitoring, customer conversations, and behavioral data now form one continuous product cycle.
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
