Online store redesign for a gourmet ingredient distributor

Before designing, we reviewed the website on desktop, at 1440 px, and on mobile, at 375 px: the home page, the menu, the shop, the eleven categories, the Bitters subcategory, search, collections, a product page in both its formats, account sign-up, recipes, the blog, shipping terms and FAQs. The problems fall into nine points, and each one has its answer in the proposal.

The website has eleven categories at the same level and of very different sizes, and on desktop they’re only visible when the menu is opened. The proposal doesn’t change the catalog: it groups the eleven categories into four entries by use (pantry, pastry and chocolate, bar and drinks, and kitchenware) and keeps them always in view, next to New arrivals, Brands, Recipes and a dedicated entry point for the wholesale program.

The current home page opens with three cards of equal weight (catalog, wholesale and recipes) and no headline. The new one starts with a single H1, “Gourmet ingredients right at your fingertips”, and a line that makes it concrete: over 2,000 products from around the world, for professional kitchens and home cooks. Below are two calls to action, one to shop and one to open a wholesale account, and a strip with what the company already offered and the home page didn’t say: most orders ship within 24 hours, delivery usually arrives the next business day in six cities, and orders can be picked up at the Toronto and Vancouver warehouses.

On the current website, Bitters has 80 entries because each format is a product: the 150 ml bottle and the case of twelve appear separately, each with its own name, photo and price. There are no filters or unit prices, and the page opens with a 16 px headline and a long paragraph.

In the proposed listing, formats are grouped: 46 products, each with its sizes as options, its price and its price per 100 ml. On the left, filters by brand, diet, origin, format and price, with the number of products for each option. At the top, sibling subcategories with their product counts. And at the end, instead of pagination, a counter and a button to load more products.

On the current website, the Aztec Chocolate Bitters bottle and the case of twelve are two separate product pages, and nothing indicates the case is cheaper. On the proposed product page they’re two options of the same purchase, each with its price, its price per 100 ml and its SKU. The case also shows what each bottle costs, $16.61 versus $21.87, and the savings: 24%.

Next to the button are shipping time, delivery and pickup. Dietary badges move up to the first screen, breadcrumbs regain the group and subcategory, and a box explains to professionals what they gain with a wholesale account. The product page ends with products that pair with this one.

On a 375 px phone, the current website spills off the screen: the header overflows and cuts off the cart, and on the home page cards the “Add to Cart” button breaks into four lines and spills out of the card. In Bitters, the first screen is taken up by breadcrumbs, headline, paragraph and subcategories: the first product appears at 850 px.

The current website uses the same orange, #FFA800, for buttons, brands and tabs, and in three of those uses it doesn’t reach minimum contrast: the white text on the home page buttons stays at 1.93:1, the brands on the cards at 1.89:1 and the active recipe tab at 1.85:1. For normal text, WCAG AA requires 4.5:1. The typography doesn’t help either: a single family, Geist, almost always between 14 and 16 px.

The proposal separates the headline color from the interaction color. Coral #E05A46 is reserved for large headlines, where 3:1 is enough. Buttons and links use a darker coral, #C53621, which reaches 5.35:1. Headlines move to DM Serif Display, and body text and interface to DM Sans.