Case Study

Canadawide Scientific

Product Discovery • B2B Workflows • Design Systems

Redesigning a B2B e-commerce platform to support modern product discovery and enterprise purchasing.

A B2B laboratory equipment supplier that originally operated through printed catalogs and phone orders. Over three years, I led the redesign as sole designer — modernising the experience, improving SEO, and creating a scalable foundation for future development across two brands.

Role

Product Designer (Sole Designer)

Timeline

Jan 2023 — Present

01
Overview

Modernising a B2B experience for complex scientific purchasing.

Canadawide Scientific is a B2B laboratory equipment supplier that originally operated through printed catalogs and phone orders. As customer behaviour shifted toward online purchasing, the existing website struggled to support modern e-commerce needs and marketing growth. I took the initiative to lead a full redesign — modernising the experience, improving SEO, and creating a scalable foundation for future development.

+65%

Organic traffic from improved SEO and individual product indexing

+70%

Online orders from improved product discovery and checkout flows

−40%

Support calls as B2B workflows moved online and pricing became transparent

02
The Brief

A growth inflection point that the existing platform couldn't support

By 2022, Canadawide Scientific was growing — adding new product lines, expanding its customer base, and facing increasing pressure from competitors who had already invested in modern e-commerce experiences. The website, built for a phone-and-catalog era, was becoming a liability rather than an asset.

Competitors were offering online product discovery, transparent pricing, and self-serve purchasing workflows that Canadawide couldn't match. Customers were arriving on the site, failing to find what they needed, and turning to alternatives.

Seeing this gap, I proposed a phased redesign initiative — starting with the highest-impact areas and building toward a fully modernised platform. The brief had no dedicated design budget or external agency; I would lead it end-to-end as the sole designer, working within the constraints of the existing CMS and development team.

Design mandate

Redesign the Canadawide Scientific website to support modern B2B e-commerce — improving product discovery, enabling enterprise purchasing workflows, and creating a scalable design foundation — without a full platform rebuild.

03
Project Timeline

Three years, three phases of continuous improvement.

The redesign wasn't a single project with a fixed end date — it was a long-term product engagement broken into focused phases, each building on the last.

Jan 2023 — Dec 2023

Phase 1 — Core platform redesign

Redesigned the foundational experience — navigation, product discovery, category organisation, and marketing flexibility. Shipped the design system and B2B purchasing workflows.

Jan 2024 — Mid 2025

Phase 2 — B2B workflows & product depth

Built enterprise purchasing features deferred from Phase 1. Delivered enriched product pages and the product comparison tool. Extended the design system to Myriad Industry.

Jan 2026 — Present

Phase 3 — In progress

Ongoing improvements focused on personalisation, deeper analytics integration, and continued platform scale.

04
Responsibilities

Sole designer working directly with a development team

There was no PM, no design director, and no external agency. Every design decision — from research and strategy to final UI and QA — was owned by me.

Role
Responcsibliltes

Me

Research, competitive analysis, UX strategy, wireframing, UI design, design system, component documentation, Figma handoff, design QA, stakeholder communication, project scoping

Development team

Front-end and back-end implementation, CMS configuration, platform integrations, technical feasibility assessment, deployment

What this meant in practice

I owned my own prioritisation, communicated directly with business stakeholders, and made strategic calls independently. Decisions had to be well-reasoned the first time — there was no internal review layer between design and the team building it.

05
The Problem

The platform couldn't support how customers actually purchased.

The original site was built around a single assumption: customers would browse categories, find a product, and call to order. By 2022, that assumption no longer held — online buying had become the norm, and the platform's limitations were compounding into real business costs.

The site wasn't broken in obvious ways — it loaded, products were listed, orders could be placed. But it created friction at every step of the modern B2B purchasing journey, and that friction was quietly costing the business customers.

Label

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.

Label

Rigid browsing and navigation

Categories listed alphabetically with no filtering by use case or type. Search limited to descriptions only, making discovery frustrating.

Label

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.

Label

No scalable design foundation

No shared component system or documentation, making consistent delivery across the site difficult.

Label

Outdated B2B purchasing workflows

No private pricing, quote requests, or MSDS access — pushing complex purchasing back to phone calls and manual processes.

06
Process

Research built incrementally from four sources

Rather than starting with a full redesign brief, I built understanding incrementally — combining direct research with continuous observation of a live platform in active use.

07
Constraints

Designing within a live system with real technical and business limits.

This wasn't a greenfield project. Every decision had to account for an existing platform, an active customer base, and a small development team with competing priorities.

CMS limitations. The existing content management system had fixed data structures that couldn't easily support individual product pages or dynamic attributes.

No dynamic freight calculation. Backend infrastructure couldn't calculate shipping costs at checkout in real time — solutions had to manage expectations earlier in the journey instead.

Phased delivery over a full rebuild. Time and development capacity meant features like product comparison and enriched specs were scoped for Phase 2 — deliberately deferred, not abandoned.

Live platform with active users. Changes had to ship without disrupting existing customers on a live, revenue-generating site.

No dedicated research or QA resources. As the sole designer, I ran research, designed, reviewed development output, and handled QA — requiring tight prioritisation throughout.

08
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.

09
Design Decisions

Every major decision involved a tradeoff. Here are the most significant ones

Good design at this scale isn't about finding the perfect solution — it's about making 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.

10
Handoff

Shipping on a live platform required close collaboration at every step

Handoff wasn't a single event — it was a continuous process of alignment, review, and iteration with the development team throughout the project.

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.

11
Performance

Measurable impact within the first year of launch

The redesign delivered significant improvements across discoverability, purchasing, and operational efficiency.

12
Results

Measurable impact within the first year of launch

The redesign delivered significant 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

13
Myriad Industry Impact

The design system extended to a second brand — without starting over.

When Myriad Industry needed a new digital presence, the design system built for Canadawide became the foundation — eliminating the need to design from scratch and ensuring a consistent quality baseline from day one.

The Myriad adaptation was a deliberate 1:1 rework — same component architecture, same spacing system, same interaction patterns — reskinned to match Myriad's brand identity. Myriad launched with a production-grade design system in a fraction of the time it would have taken to build independently.

14
What's Next

Building on the foundation — personalisation, analytics, and scale

Phase 3 is currently in progress. With the core platform stabilised and B2B workflows established, the focus shifts from fixing foundational problems to creating more sophisticated and personalised purchasing experiences.

Personalised product recommendations. Using purchase history and browsing behaviour to surface relevant products for returning B2B customers — reducing discovery friction for repeat buyers.

Deeper analytics integration. Building on post-launch learnings to understand how enterprise customers move through the purchasing funnel and where high-value drop-off points remain.

Account management features. Expanding the B2B account experience — order history, reorder flows, saved lists, and account-level pricing — to further reduce reliance on phone-based account management.

Design system v2. Revisiting the component library with 2+ years of real usage — refining patterns, deprecating unused components, and documenting edge cases discovered during QA.

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.

15
Reflections

What 3 years on one product teaches you that no other project can.

Most design projects end before you see the full consequence of your decisions. This one didn't. I watched every tradeoff play out in production — the features that worked, the ones that didn't, and the problems that only emerged once real B2B customers used the platform at scale. That feedback loop changed how I design.

Early in the project, I thought about design in terms of screens — what does this page need to do? By Phase 2, I was thinking in systems — how does this component behave across the platform, what does it cost to change it, and what does it unlock for the next phase? That shift from screen-level to system-level thinking is something I couldn't have learned in a shorter engagement.

Constraints sharpened the work

Working on a live B2B platform with an existing tech stack meant some ideal solutions weren't on the table. Freight costs couldn't be calculated dynamically at checkout. Instead of redesigning the checkout flow, I focused on improving how shipping expectations were communicated earlier in the journey — less technically ambitious, but more immediately 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.

— End of Reel —

Andrew Fang.

Get in touch

Available for new work

My timezone

15:19

EST

Currently in Ottawa,

Currently working for Canadawide Scientific

Colophon

Set in Cormorant Garamond,

Archivo Narrow & JetBrains Mono

Printed on cream, in red & jade.

© 2026 Andrew Fang · All rights reserved

Volume Nº 01 — a body of work

Printed in Ottawa, Canada

— End of Reel —

Andrew Fang.

Get in touch

Available for new work

My timezone

15:19

EST

Currently in Ottawa,

Currently working for Canadawide Scientific

Colophon

Set in Cormorant Garamond, Archivo Narrow & JetBrains Mono

Printed on cream, in red & jade.

© 2026 Andrew Fang · All rights reserved

Volume Nº 01 — a body of work

Printed in Ottawa, Canada