Medical Breakthrough Ecommerce
Lead UI across catalogue, category and product-detail pages for Medical Breakthrough's US store — trust-first hierarchy, tighter filters, and a purchase flow that works hard without shouting.
- Year
- 2024
- Role
- UI Lead
- Tools
- Figma · Shopify · WooCommerce
- Link
- Private — on request
Overview
Medical Breakthrough is a US supplements and wellness retailer. I’ve been their Senior UI Designer since 2022, working remotely from Bangladesh with the California marketing, content and dev teams.
The recurring brief has always been some version of "make this clearer." Product pages, category filters and the cart all had to carry conversion weight without crossing into pushy retail design.
Over three years I’ve owned UI for the core commerce surfaces — storefront, collection, PDP, cart, checkout — shipping iteratively against real analytics rather than redesigning everything at once.
The challenge
Wellness ecommerce sits in an awkward category. It has to feel trustworthy (health claims, dosage, FDA-adjacent language) and shoppable (price, add-to-cart, urgency) at the same time. Over-design looks pushy; under-design looks uncertain.
The baseline platform (Shopify + some WooCommerce) gave us structure but required meaningful UI rework to match the brand’s tone and the evidence-first messaging the content team wanted.
Approach
Rebuilt the product-detail page around a trust-first hierarchy: hero image + claim, then proof (reviews, trust badges, lab notes), then the purchase UI, then longer-form education.
Tightened filters on category pages — fewer, more useful facets; removed decorative imagery that was competing with product thumbnails for attention.
Designed every screen alongside the content lead so copy and layout shipped together rather than in sequence.
- PDP: a clear "what’s in this bottle" block above the fold, sticky add-to-cart on mobile.
- Category: removed dead facets, added a visible "reset filters" affordance.
- Cart: pared down cross-sells that were pushing primary items below the fold.
Outcome
Product-page conversion improved after the hierarchy rebuild. Exact numbers stay internal to the business, but the pattern has stuck — the team asks for "the trust → purchase → education order" on every new product type.
Filter usage on category pages went up materially; fewer users bailed to search.
Three years in, the core UI has been rebuilt once and tuned continuously — no "big redesign" projects, which is the compliment.
Learnings
Good ecommerce UI is boring in a good way. The more the page disappears, the easier it is to buy.
Removing things moves more needles than adding new ones. Every decorative element has a conversion cost; most of mine didn’t earn their keep.
