Confirm BioSciences
Confirm BioSciences was operating two separate e-commerce sites serving two fundamentally different customer types — bulk B2B buyers who needed custom orders, and retail customers making single purchases. Both sites were siloed, inconsistent, and operationally expensive to maintain. The business decision was to shut both down and consolidate onto a single Shopify platform. My design challenge was harder than a typical redesign: I had to serve two distinct buying behaviors, purchasing flows, and mental models within one unified experience — without alienating either customer.
ROLE
UI/UX Designer
User Research, Interaction, UI/UX Design, Branding, Prototype & Testing
SOFTWARES
Adobe Xd, Lucid Chart, Shopify, Sanity, Miro
The Past
The old site was built exclusively around B2B bulk ordering — every purchase action funneled customers to a contact form and required going through a sales representative. There was no path for self-serve or single-item buyers. On top of that, the site had been outsourced across multiple vendors over the years, which meant no design consistency and no scalable system. Every new page required starting from scratch.
This wasn't just a UX problem — it was a compounding operational one. The redesign had to solve for both.
The Build Up
Because marketing and design had been working closely together on the old CB site, we had an existing foundation of A/B test data and analytics to draw from. Rather than beginning with assumptions, I audited what we already knew: what content users engaged with, where they dropped off, and which conversion paths actually worked. This data-informed approach let me build on what was already validated and cut what wasn't — critical for a project with a compressed timeline.
The goal wasn't to start over. It was to be deliberate about what we kept, what we cut, and what we needed to build new.
Re-Navigate
Navigation was the highest-stakes decision on this project. A B2B buyer looking to place a custom order of 10,000 units and a retail customer wanting a single test kit are not the same person — and they shouldn't land in the same funnel. Getting navigation wrong meant failing both.
We moved from a series of single-column dropdowns to a full-width, three-column mega nav with clearly defined categories and visual hierarchy. The structure was designed to let each customer type self-select their path immediately — reducing cognitive load and eliminating the dependency on a sales rep to route people correctly. Every category label was evaluated not just for accuracy, but for how a first-time visitor would interpret it.
The Most Important CTA
The product page buy box was where the B2B and B2C tension was most acute. The majority of our customers were businesses placing bulk orders — a workflow that required a custom form with quantity, specifications, and sales rep handoff. But we couldn't bury the retail path to serve them.
The solution was a layered CTA architecture: all buying options kept above the fold, with a clear visual hierarchy that led bulk buyers to the familiar form while surfacing instant-purchase options for retail customers without competing for attention. Spacing, box weight, and button styling were all deliberate choices to communicate priority without excluding either user. The goal was that no customer should have to search for how to buy.
Define and Categorize
The site had years of accumulated content — white papers, sell sheets, compliance guides, product instructions, industry resources. Presented without structure, it was overwhelming. My approach was to define a content taxonomy first, then design to it.
I identified the distinct content types that existed across the site and built a global card system with visual differentiation for each category. This gave users consistent visual cues throughout their journey — they could recognize what type of content they were looking at before reading a word. It also gave the internal team a repeatable system for adding new content without breaking the experience.
Scalable Design
The old site's biggest failure wasn't aesthetic — it was structural. Without a system, every new content need became a design request, and every design request became a bottleneck. I was determined not to rebuild that problem.
I consolidated the full site into seven content types and designed a corresponding page template for each, alongside a global kitchen sink component library. The result was a design system that any future sub-brand within the Confirm BioSciences ecosystem could adopt with new branding applied — without needing to redesign from the ground up.
Using a 12-column grid as the foundation ensured every template was responsive, consistent, and developer-ready. The system was published as a live Adobe XD link accessible to cross-functional teams — developers, third parties, and stakeholders could inspect components, verify spacing, and build to spec without a back-and-forth design loop.
The shift from "design one page at a time" to "maintain a system" was the most meaningful structural change I made on this project.
What I Learned
Designing for two customer types in a single experience is less about compromise and more about architecture. The temptation is to split the difference — but the better move is to build clear paths and let users self-route. When navigation and hierarchy do their job, you don't have to choose between your audiences.
This project also reinforced the long-term value of design systems in ways that theory doesn't capture. The system I built wasn't just about consistency — it was about removing future friction. Every template I designed was one fewer interruption to the business later.
