Client
Edward Martin
Category
Home & interiors e-commerce
Services
Product design · UX research · UI design · Responsive design · Design QA
Overview
Edward Martin is a premium US home brand selling tile, vanities, furniture and lighting online. EM 2.0 moved the store from Shopify to a headless Salesforce Commerce Cloud build, so the shopping experience could finally match how people buy these products.
Role: Senior UX/UI Designer · Team: design lead, eight engineers · I owned: the core shopping flows (product page, product card and listing, cart, checkout, mobile navigation) from first concept to launch, the responsive spec for four breakpoints, developer handoff and design QA · Status: live at edwardmartin.com
Business goal: grow online sales from both retail shoppers and trade professionals, especially on mobile, where most visits happen, give marketing a store they can update without developers, and lower the cost of running the whole e-commerce ecosystem.
Challenge
Why the store needed a rebuild
Customers compare sizes and finishes, order samples before they commit and calculate how much they need by the square foot. Trade professionals expect their own prices. The old Shopify store handled none of this well, especially on phones, where most visits happen.
01 Big catalog
Thousands of products in many sizes and finishes, hard to browse.
02 Trade pricing
Trade members needed their own prices, shown clearly in the same store.
03 Mobile
Slow, cramped flows on the device most customers use.
04 Flexible content
Marketing needed rich, editable pages, made possible by a headless CMS.
My role
What I was responsible for
As Senior UX/UI Designer I owned the core shopping flows, from early concepts through launch and the iterations that followed. I worked with the design lead and a team of eight engineers, and owned the design side of handoff and QA during the build.
UX: research, user flows and concepts for the key shopping journeys, refined after testing.
UI: responsive design for desktop, tablet and mobile, built on shared components in Figma.
Figma as the source of truth: kept components and pages in sync with what shipped, and adjusted shared tokens when the build needed it.
Handoff and QA: specs for developers, visual testing of every page and clear, focused fix tickets through launch.
Key decisions
Decisions I made
The calls that shaped the shopping experience, and why.
Samples next to Add to cart. For tile, ordering a sample is the first step of a purchase, so I moved Order sample next to Add to cart on product pages and on every product card.
One product card for the whole store. Instead of separate variants per page, I designed one card that handles trade pricing, sale and sample states, and rolled it out to every page and component, in Figma and in code.
Filters as a bottom sheet on phones. The old mobile flows felt slow and cramped, so filters open below their button on desktop and as a bottom sheet on mobile.
Guide, don’t block, for freight orders. Heavy orders such as pavers ship by freight. I designed a notification system (a checkout alert, a checkout gate and a transactional freight email) that informs customers instead of stopping their order.
A checkout focused on paying. A simplified header, with the total and the next step pinned at the top on mobile, plus a flow for signed in users without a saved address.
Explored, then rejected: a sticky bottom navigation on mobile. After testing it on the live store, I rolled it back. Conversion dropped: shoppers stalled, did not notice the navigation at the bottom and could not find their way, so we returned to a standard navigation.
Product page: sizes, samples and quantities
The product page brings together everything needed to choose a tile and order the right amount.
Order sample sits right next to Add to cart.
A calculator turns square feet into boxes and a total price, overage included.
Bigger size buttons and dot indicators on mobile.
Customer photos replace the old Instagram grid.
Listing & Trade
Product listing and trade pricing
I redesigned the product card and used it across the whole store.
Signed-in trade members see their price, the retail price struck through and a discount badge.
Add to cart and Sample buttons directly on mobile cards.
Filters open below their button on desktop and as a bottom sheet on phones.
The card rolled out to every page and component, in Figma and in code.
Navigation & checkout
Mobile menu, cart and checkout
On mobile, the menu opens full screen under the top bar, with search at the top and a category rail on the side. Each category has its own icon, long names fit without being cut off, and a sticky Shop all button stays in reach.
In checkout, a simplified header keeps the focus on paying, and on mobile the total and next step stay pinned at the top. The cart has clear states for sale, pre-order, unavailable items and trade discounts, plus a flow for signed-in users without a saved address.
Results
Results after launch
First 90 days on EM 2.0, compared with the same period on the old Shopify store.
Launch was not the end: we keep iterating on the store based on product data from PostHog, and I own the design side of those changes.
Learnings
What I learned
Test on the live product. The bottom navigation looked right in design reviews and failed with real shoppers. Since then, every bigger change is checked against PostHog data before it stays.
Small, well placed changes move numbers. Some of the clearest results came from where things sit, like the sample button, not from visual polish.
Design every state, not just the happy path. Sale, pre-order, unavailable and trade states in the cart needed as much care as the main flow, because that is where the build raises questions.
Guide, don’t block. Telling customers what to expect, as with freight delivery, keeps trust without losing orders.
A source of truth needs upkeep. Keeping Figma in sync with what shipped is ongoing work, and it pays off every time a new page reuses a component.
Open to remote roles · EU and US
© 2026 bujadesign