Ryan Burnett.

Case Study · Net32

Building the UX Practice and Design System

Net32 is a multi-sided dental marketplace where 70,000+ practices buy from hundreds of vendors across 60,000+ products. When I joined as the senior design leader, there was no design system, no documented UX process, and a shopping experience showing its age. In eight months we built all three.

Role
Senior UX Designer
Team
2 product designers · 40+ engineers across squads
Timeline
2025 to 2026 · 8 months
Scope
Design system · shopping experience · UX operations
−25%
Design-to-dev handoff time
218
Design tokens (92 primitive · 101 semantic · 25 type)
+12%
Mobile conversion after redesign
−40%
UI defect reports

Context

A marketplace that outgrew its interface

Net32 competes on price transparency: dentists compare offers from hundreds of vendors the way travelers compare flights. The business had product-market fit; the experience hadn't kept up. Years of feature-by-feature shipping left the site with a patchwork UI: multiple button styles, hard-coded colors, inconsistent components across squads, and a mobile experience where core actions were buried behind a hamburger menu.

There was also no UX infrastructure. Design requests arrived as JIRA tickets with no intake process, no review cadence, and no shared source of truth. Fixing screens without fixing the system would have been painting over rust, so I scoped the work as three parallel streams: the system, the experience, and the practice.

Stream 1 · The System

A token-based design system, from primitives up

We built the Net32 Design System in Figma on a two-layer variable architecture: 92 primitive tokens (raw color ramps, size scales) referenced by 101 semantic tokens (background/action/selected, border/status/error, text/status) plus 25 typography tokens. Components never touch a raw hex value, which means a rebrand, or the dark mode already scaffolded into the token table, is a variable swap rather than a redraw.

Figma variables panel showing the Net32 Design System's 101 semantic tokens mapped to primitive color tokens, with light and dark mode columns
The semantic token layer in Figma. Every value references a primitive, and the dark-mode column is scaffolded from day one.

On top of the tokens we built components following atomic design: atoms compose into molecules, organisms, and finally full page templates, so every level of the system stays consistent by construction.

Atomic design progression: icon atoms, an Add to Cart button molecule, an account menu organism, and the full Net32 mobile page
Atoms → molecule → organism → page: the account menu assembled entirely from system parts.
Button component matrix covering brand orange, blue, and neutral variants across fill, outline, text, and icon styles with hover, active, and disabled states
The button matrix: every variant, style, and state defined once, replacing the half-dozen ad-hoc button styles found in production.
Net32 buy box component
Composite commerce components like the buy box and alert patterns gave squads ready-made building blocks for the highest-stakes surfaces.

Stream 2 · The Experience

Redesigning the shopping journey with the system

The design system proved itself by shipping. We rebuilt the highest-traffic surfaces (header, home page, and footer) as the first production consumers of the new components.

Header: search first, actions labeled

The legacy blue header buried navigation in a hamburger and crowded the top bar with links. The redesign gave the search bar the hero position (search drives the majority of product discovery on Net32), replaced the hamburger with labeled Account / Support / Cart actions, and moved primary browse paths into a persistent bottom tab bar on mobile.

Before
Legacy Net32 mobile home page with blue header, hamburger menu, and sign-in links
After
Redesigned Net32 mobile home page with white header, labeled account, support and cart icons, prominent search, and a bottom tab bar
Redesigned Net32 mobile header in context with promotional banner, search bar, and trending search chips
The shipped header: labeled actions, hero search with trending-query chips, and the browse tab bar anchored to the thumb zone.

Footer: from link dump to conversion surface

The footer was rebuilt around the things customers actually scroll down for: deal alerts (email capture moved to the top), human support hours and a toll-free number, and trust signals (Trustpilot score, BBB accreditation, US headquarters) that matter when a practice is choosing between an unknown vendor and a known one.

Four mobile screens showing the Net32 footer before and after: email capture promoted to the top, support contact grouped, and trust badges surfaced
Footer redesign: email capture leads, support and company links are grouped by task, and trust signals are surfaced instead of buried.

Stream 3 · The Practice

Making UX an operating system, not a service desk

A system only survives if the organization around it works. I documented and rolled out the UX operating model: how work enters, how it's sized, how it's reviewed, and who decides:

  1. Project intake and sprint planning. A structured intake form (problem, goal, success measure) replaced drive-by ticket assignments, and UX joined sprint planning with t-shirt sizing.
  2. Design review cadence. Twice-weekly design reviews with a defined format (context, decisions needed, feedback rounds) so engineering saw work before it hardened.
  3. Documentation as onboarding. The full process lives in Confluence, from design principles through RACI and validation, cutting new-designer ramp-up from weeks to days.
Confluence page documenting the Net32 UX design process, including intake, sprint planning, design reviews, and RACI
The UX process documentation (intake, sizing, review cadence, and RACI) that turned design from a service desk into part of the delivery engine.

Impact

Faster shipping, cleaner UI, better numbers

−25%
Design-to-dev handoff time with shared tokens and specs
85%
Of production screens on system components within 6 months
2.1×
Footer email signups after the redesign

The redesigned mobile experience converted 12% better than the legacy pages in post-launch measurement, UI defect reports dropped 40% as hard-coded styles disappeared, and home page bounce fell 14%. Just as important: squads stopped debating button styles and started debating customer problems.

Reflection

What I took away

  • Tokens are leverage. The primitive/semantic split felt like overhead in week one and paid for itself by month two. Every downstream screen inherited consistency for free.
  • Ship the system through real work. Rebuilding the header, home, and footer as the system's first consumers kept it honest. A design system validated only by its own documentation is a library, not a system.
  • Process is a design deliverable. The intake form and review cadence moved the needle as much as any screen. They're why the handoff metric moved.