Archives: Websites

eCommerce Websites

Marks and Spencer

Marks and Spencer is a British multinational retailer selling clothing, lingerie, homeware, beauty, flowers, gifts and food to UK shoppers, with financial services in the same navigation. Own-label ranges such as Autograph, Per Una, Jaeger and Goodmove sit beside third party brands including Nobody’s Child, Whistles, Monsoon and Calvin Klein. Prices are in pounds and the site runs on a custom Next.js front end.

Website Design

A token system with a palette per business. The stylesheet exposes separate named colour scales for the core retail brand, food, flowers and the clothing and home operation, so each department recolours without leaving the system. The core scale runs a near-black #101820, greys from #f6f6f6 to #3d3d3d, a heritage green #00664a and a red #ea122a.

Three proprietary typefaces. Display and headings use MS Market, a condensed face, body copy uses MS Barrow, and New MS London serves as a second family, with Helvetica and Arial named as the fallback stack.

The mega menu is the interface. Twelve top-level departments each open into multi-column panels of category links, closing with a row of editorial entries. Sale gets its own menu with a column per department.

Shopping Experience

Listing pages run deep and mix labels. The women’s dresses page is 50 pages long and interleaves M&S and Autograph items at £28 to £55 with Whistles at £189 and HOBBS at £139. Cards carry price, a star rating with review count, and flags including Just Arrived, Online Only and a percentage off.

Category pages close with written guidance. Below the grid sit paragraphs of buying advice on lengths, fabrics and styling, then an FAQ accordion answering questions such as what to wear over a dress.

Product pages are stacked accordions. About this style, Details and care, Delivery, collection and returns, and an About the brand block each expand in place. The buy box holds colour, sizes 6 to 18, a quantity selector up to 20 and an Add to bag button.

Delivery terms are restated at every level. Standard delivery is £3.99 or free over £75, nominated day and next day are £5.99, store collection is free on fashion, home and beauty, and UK returns are free with exclusions.

Brand Storytelling

Breadth is the argument. The homepage closes with paragraphs walking the reader through clothing, home and furniture, food, gifts and money in turn, framing the site as one destination rather than a set of shops.

Brands are introduced in their own words. A product page for a third party label carries that brand’s own positioning statement, so the Nobody’s Child dress is sold with Nobody’s Child copy rather than M&S copy.

Notable Features

Financial services in the shopping navigation. Credit cards, travel insurance, pet and home insurance, travel money, personal loans and internet banking are reachable from the same bar as dresses and dinner sets.

Sparks threaded through. The loyalty programme appears in the header, in promotional banners and again in the footer, with Sparks Pay listed under Money.

Locale stated in the footer. The base of every page names the market and currency as “United Kingdom ( £ )” above the legal links.

Marks and Spencer Shop Category page example

Marks and Spencer Product page example

Marks and Spencer Checkout page example

Marks and Spencer footer example

Rebel8

REBEL8 humbly began in a small San Francisco studio apartment with five-hundred bucks in 2003. Now based in Los Angeles, REBEL8 represents a growing group of like-minded individuals from around the world.

The graphics are heavily inspired by classic skateboard art, vintage tattoo flash, and graffiti. The clothing is comprised of tees, sweatshirts, shirts, jackets, bottoms, headwear, and accessories for both men and women. Internationally recognizable, REBEL8 is proudly stocked in accounts worldwide.

Merci Paris

Merci is the Paris concept store at 111 boulevard Beaumarchais in the Marais, and the site is its online department store. It sells house-labelled bed, bath and table linen, tableware and cutlery, plus furniture, lighting, decoration, womenswear, menswear, children’s toys and books, beauty, watches and bags, with outside labels including Serax, Frama, Hay and Piet Hein Eek. Prices run from a EUR 3 pencil to coats above EUR 800. Bilingual French and English, built on Shopify.

Website Design

Red, black and white, nothing else. Headings, nav accents, sale prices and the full-width category bars all use a single red, body text is near-black, and the ground stays white. Buttons are solid black. The only other colour on a page is the product photography.

Caslon italic for display, Helvetica for the rest. Category titles, standfirsts such as “Fabrics certified OEKO-TEX” and panel labels such as “100% lin” are set in an italic serif, while menus, product names, prices and forms use a 14px sans. The contrast between the two is the whole typographic system.

A grid that changes scale as you scroll. Category pages alternate rows of four small product cards with rows of two large interior photographs, so the same collection is shown as both catalogue and room set within one page.

Shopping Experience

A department-store menu. The top level reads New In, The Bed, The Bath, The Table, Women’s Fashion, Men’s Fashion, Children, Deco and Lifestyle, Beauty, Furniture, About. The Bed then splits three ways: by product, by fabric, and a Create your set route through washed linen, percale or gauze.

Colour count on every card. Grid tiles carry the product name, a From price in italic, and a red plus more colours line, which matters for a range where a single duvet cover runs to more than a dozen colourways.

Bed sets assembled on the product page. Beside Add to cart sits a Compose your bed set button, and below it the matching fitted sheet, flat sheet and pillowcase in the same colourway appear with their own size dropdowns and individual Add buttons.

A French-market checkout. Express options are PayPal and Google Pay, then card, PayPal and Alma instalments. The total states the tax included in it, and the summary carries a cross-sell headed “Vous n’oubliez rien ?”.

Brand Storytelling

The address is the logo. The wordmark locks Merci over its street address, and that lockup repeats in the header, the checkout and the footer.

The shop is told as a set of places. A Merci Locations column lists the two stores, the exhibition of the moment, La Civette, Le Pied-a-Terre, the Used Book Cafe and the Noir x Merci cafe, placing the online store inside a physical map.

Notable Features

Language switch in the top left corner. Francais and English sit above the logo rather than in a menu, ahead of everything else on the page.

A four-icon service bar above the footer. Secure payment, shipping within 48 hours inside France, payment in four instalments through Alma, and customer service by phone, WhatsApp or email.

A trade entry in the header. A red Professionals button gives wholesale and contract buyers their own route.

Merci Paris Shop Category page example

Merci Paris Product page example

Merci Paris Checkout page example

Merci Paris footer example