Case Study
Canadawide Scientific
Role — Sole Product Designer Timeline — Jan 2023 — Present Scope — Research → Shipped Product Platform — Web · B2B
I proposed and led a full redesign of a B2B lab e-commerce platform — solo, from research to shipped product, across three years and two brands.
Role
Sole Designer
Duration
3+ Years
Website
canadawide.ca
A B2B lab-equipment supplier that ran on printed catalogs and phone orders. Over three years I led the redesign solo — modernising the experience, improving SEO, and building a scalable foundation across two brands.
Overview
Canadawide Scientific is a B2B lab-equipment supplier that ran on printed catalogs and phone orders. Its site couldn’t support modern purchasing — broken discovery, no enterprise workflows, no scalable design foundation.
I initiated this redesign. No brief, no PM, no agency. I spotted the gap, proposed a phased plan, and owned every decision from first research session to shipped product — across three years and two brands.
Design mandate
Modernise the Canadawide Scientific platform to support B2B e-commerce — improving product discovery, enabling enterprise purchasing workflows, and building a scalable design foundation — without a full platform rebuild.
Project Timeline
Three focused phases, each building on the last. That sustained ownership is rare — it shaped how I think about systems, tradeoffs, and long-term quality.
Jan 2023 — Dec 2023
Phase 1 — Core platform redesign
Rebuilt the foundation — navigation, product discovery, category organisation, marketing flexibility — and shipped the design system plus initial B2B purchasing workflows.
Jan 2024 — Mid 2025
Phase 2 — B2B workflows & product depth
Built the enterprise purchasing features deferred from Phase 1, shipped enriched product pages and the comparison tool, and extended the design system to Myriad Industry.
Jan 2026 — Present
Phase 3 — In progress
Ongoing work on personalised purchasing, deeper analytics, and enterprise account management.
Responsibilities
Team & scope
No PM, no design director, no agency. I owned every design decision — research, strategy, UI, system, handoff, QA — working directly with stakeholders and engineering.
Me
Andrew Fang — Product Designer
Research, competitive analysis, UX strategy, wireframing, UI design, design system, component documentation, Figma handoff, design QA, stakeholder communication, project scoping
ENG
Development team — Engineers
Front-end and back-end implementation, CMS configuration, platform integrations, technical feasibility review, deployment.
"Decisions had to be well-reasoned the first time — there was no internal review layer between design and the team building it."
The Problem
The old site assumed one path: browse categories, find a product, call to order. By 2022 that no longer held — and its limits were quietly costing the business customers.
Problem 01
Poor SEO and product visibility
Products could only be indexed if grouped under a category, making individual items effectively invisible to search engines and requiring significant manual overhead.
Problem 02
Rigid browsing and navigation
Categories listed alphabetically with no filtering by use case or type. Search limited to descriptions only, making discovery frustrating.
Problem 05
Outdated B2B purchasing workflows
No private pricing, quote requests, or MSDS access — pushing complex purchasing back to phone calls and manual processes.
Problem 04
No scalable design foundation
No shared component system or documentation, making consistent delivery across the site difficult.
Problem 03
Limited marketing capability
No custom landing pages, banners, or brand pages — forcing the marketing team to work around product-based structures not built for campaigns.
Process
Research built incrementally from four sources — interviews, competitive analysis, and live platform data. Canadawide was missing four of five B2B fundamentals before the redesign.
Constraints
Designing within a live system with real technical and business limits.
Not a greenfield project. Every decision had to fit an existing platform, an active customer base, and a small dev team with competing priorities.
CMS limitations. Fixed CMS data structures couldn’t support individual product pages or dynamic attributes.
No dynamic freight calculation. The backend couldn’t price shipping in real time, so expectations had to be set earlier in the journey.
Phased delivery over a full rebuild. Limited capacity scoped product comparison and enriched specs to Phase 2 — deferred, not abandoned.
Live platform with active users. Changes had to ship without disrupting customers on a live, revenue-generating site.
No dedicated research or QA resources. As sole designer, I ran research, design, dev review, and QA — demanding tight prioritisation.
Solution
Five focused improvements across discovery, workflows, and systems
01
Product discovery & conversion
Redesigned individual product pages to support detailed descriptions, specifications, galleries, and related products. Promotions and pricing integrated directly into product cards improved SEO and reduced friction in the buying flow.
02
B2B purchasing workflows
Introduced private shopping pages and pricing for approved organisations. Added quote requests, MSDS access, and quick order forms to reduce reliance on phone calls while still supporting complex purchasing needs.
03
Content & marketing flexibility
Enabled creation of custom pages, banners, and promotional layouts without product-based workarounds — giving the marketing team independence to build landing pages and brand content.
04
Category organisation
Restructured categorisation from alphabetical lists to use-case groupings — Furniture, Equipment, Supplies, and Instruments — making browsing more intuitive and reducing time-to-find.
05
Design system & documentation
Built a scalable design system with reusable components and clear documentation. Ensured consistency across the site and made future development faster — later adopted by Myriad Industry.
Design Decisions
Every major decision involved a tradeoff. Here are the most significant ones
Good design at this scale isn’t about the perfect solution — it’s about the right tradeoff given real constraints.
Freight: transparent communication vs. dynamic calculation
The ideal solution was real-time freight calculation at checkout. The CMS and backend couldn't support it. Rather than block the redesign on a platform rebuild, I improved how freight expectations were communicated earlier in the journey — on product pages and in the cart — so customers weren't surprised at checkout.
Product comparison: deferred to Phase 2
A comparison feature was identified early as high-value for B2B buyers evaluating multiple SKUs. The CMS lacked the structured product data needed — building it in Phase 1 would have delayed higher-priority improvements. It was scoped for Phase 2 and has since been completed.
Product pages: phased enrichment over full spec parity
Full spec parity with manufacturer brand sites wasn't achievable in Phase 1 due to CMS limitations. The decision was to ship improved product pages with available data, add clear links to manufacturer sites where specs were incomplete, and build toward full enrichment in Phase 2.
Design system: build once for two brands
Rather than building a design system specific to Canadawide, I designed it brand-agnostic from the start — knowing Myriad Industry would need the same foundation. This added upfront complexity but eliminated duplicate work and ensured both brands shipped with consistent quality.
Handoff
Shipping on a live platform required close collaboration at every step
Handoff wasn’t a single event — it was continuous alignment, review, and iteration with the dev team throughout.
Collaboration outcome
By Phase 2, the dev team was proactively flagging implementation concerns during design review — a sign that the handoff process had built enough shared context for genuine cross-functional collaboration.
Performance
Measurable impact within the first year of launch
Measurable gains across discoverability, purchasing, and operational efficiency in year one.
Results
Measurable impact within the first year of launch
Clear improvements across discoverability, purchasing, and operational efficiency.
Label
+65%
Organic traffic from improved SEO and individual product indexing
Label
+70%
Online orders from improved product discovery and checkout flows
Label
−40%
Support calls as B2B workflows moved online and pricing became transparent
Myriad Industry Impact
The design system extended to a second brand — without starting over.
When Myriad Industry needed a digital presence, Canadawide’s design system became the foundation — no designing from scratch, and a consistent quality baseline from day one.
A deliberate 1:1 rework — same component architecture, spacing, and interaction patterns, reskinned to Myriad’s brand. It launched with a production-grade system in a fraction of the time.
What's Next
Building on the foundation — personalisation, analytics, and scale
Phase 3 is underway. With the core platform stable and B2B workflows in place, the focus shifts from fixing foundations to more sophisticated, personalised purchasing.
Personalised product recommendations. Using purchase and browsing history to surface relevant products for returning buyers.
Deeper analytics integration. Mapping how enterprise customers move through the funnel and where high-value drop-off remains.
Account management features. Order history, reorder flows, saved lists, and account-level pricing — less reliance on phone orders.
Design system v2. Refining the component library after 2+ years of use — deprecating dead patterns, documenting edge cases.
Phase 5
Why this matters
Phase 3 represents a shift from reactive redesign to proactive product strategy. The platform no longer needs to catch up — it needs to get ahead. That change in posture is only possible because Phases 1 and 2 built a stable, scalable foundation to work from.
Reflections
Most projects end before you see the consequences of your decisions. This one didn’t — I watched every tradeoff play out in production, and that changed how I design.
Early on, I thought in screens — what does this page need to do? By Phase 2, I thought in systems — how does this component behave, what does it cost to change, what does it unlock next? That shift can’t be rushed.
Constraints sharpened the work
A live platform and existing tech stack ruled out some ideal solutions. Freight couldn’t be priced dynamically at checkout, so instead of rebuilding the flow I improved how shipping expectations were set earlier — less ambitious, more impactful. The best solutions came from asking “what can we change?” before “what should we change?”
Owning rationale, not just output
Without a layer of internal review, the only way to build trust was to show my thinking, not just my output. That pressure sharpened how I communicate design rationale — to engineers, to stakeholders, and in writing — in ways no shorter project could have.
The best designers aren't the ones with the most projects — they're the ones who stay long enough to learn from what they built.
If I started this project today
I would invest more in measurement infrastructure earlier — building analytics tracking from Phase 1, rather than reconstructing it retrospectively. The outcomes were strong, but better instrumentation from the start would have made every subsequent design decision faster and more defensible.