A design system for e-commerce—based on behavioral science, optimized for sustained growth.


View the demo →



For licensing contact: r@mote.agency

Introduction

  Em exists as a classless CSS framework and semantic HTML component library—alongside a Claude Design system, Figma UI kit, and augmented Shopify Horizon theme—prioritizing customer lifetime value with every design decision made.

Profit = Customer Lifetime Value − Customer Acquisition Cost

Revenue = Sessions × Conversion Rate × Average Order Value

Meta

  Optimal Meta ads efficiency cannot be achieved without optimal website efficiency.
  Meta is a great place to introduce your campaign video and imagery to a large audience. Many attributes make up a good Meta Ads campaign. High quality creative, good copy, engagement, cost per click, and also importantly, the conversion rate of the website the ad is being sent to. This indicates clearly the role that conversion rate and average order play in reaching maximum ROAS. Conversion rate affects how much you have to spend for each conversion and average order value impact the return on that spend.
  Meta can only drive sessions and acquisition cost directly, your website determines conversion rate, average order value, and most importantly customer lifetime value. Therefore your website plays a larger role in attaining optimal ROAS than Meta does directly. Ads can convince people to visit your website but your site still needs to convert. And not only convert but create an experience that will make your customers shop from you repeatedly, if you are to achieve optimal customer lifetime value. A good website shows that you care about your customer and this directly impacts customer lifetime value. Meta content should be harmonized with website content. Product imagery should have branded off-white background.

Google

  As with Meta, optimal Google ads efficiency cannot be achieved without optimal website efficiency. Google Ads are great at allowing your products to easily be discovered. Google is a great place to drive people looking for your products to your website. Product catalog should be carefully curated. It is your primary creative on Google. YouTube should run 16:9 campaign videos. Product imagery should have branded off-white background.
  Google is best at promoting product catalogs, less at campaign content. Visitors reaching your site from Google are likely landing on product pages, not home or collection pages. Therefore it is important to include all relevant campaigns imagery on product pages. Otherwise visitors arriving from Google miss out on a branded user experience which impacts customer lifetime value negatively.
  As with Meta, Google can only drive sessions and acquisition cost directly, your website determines conversion rate, average order value, and most importantly customer lifetime value. Therefore your website plays a larger role in attaining optimal ROAS than Google does directly. As with Meta, Google content should be harmonized with website content.

Agents

  All of our systems are designed to be equally legible and usable by agents and humans.

Systems

Grid

  Clarity, consistency, coherence. Baseline grid based on leading. 8 column grid, gutters and margins are responsive multiples of leading.

Typography

  Heading 1–6, paragraph & body. 21px leading. 1/8th pixel letter spacing. Antialiased font smoothing.

Colors

  Foreground, background, light, and opacity scales. Hover, focus, active states for lines.

Pages

Home

Home page with the grid guides on

https://rvdmijnsbrugge.myshopify.com →

  Home page should open on primary 16:9 campaign video. Home page should show new arrivals with matching campaign video and imagery so that marketing channels are harmonized. Brands should work with a collections and campaigns content calendar system. New Arrivals show first because that's most likely what a customer seems first from advertising. After New Arrivals we should show Most Popular, or the products that the customer most likely might be looking for, if not New Arrivals.

Collection

Collection page with the grid guides on

https://rvdmijnsbrugge.myshopify.com/collections/all →

  Collection pages should start with a short paragraph for context around the collection. This is also a great opportunity for brands to highlight some of the unique aspect of their collection, like superior quality or collaborations with artists. Campaign imagery should be mixed in with the products, this will provide visual context if customers land on the collection page from advertising. It will also give the strongest campaign images a permanent place to live. Additionally, campaign images should be set up as figures with captions, these captions should detail all the products shown in the image, as this has the potential of increasing average order value.

Product

Product page with the grid guides on

https://rvdmijnsbrugge.myshopify.com/products/cotton-poplin-shirt →

  Product pages should use one variant dropdown so inventory levels can be shown at a glance with one click for all variants. If a product has more than one option, or is a combined product, swatches should be used. Swatches that lead to a sold out variant should show so, to communicate scarcity and urgency accurately. Additionally, carefully curated complementary product should be shown to increase average order value. Besides the main product, all relevant campaign imagery should be presented, showing the product in context, increasing conversion rate and adding all possible other products shown in the campaign images, increasing average order value. Furthermore, related products should be shown, giving customers alternative options, in case the currently viewed product was close to what they were looking for, but not quite. For example, products of the same category or of the same brand, increasing conversion rate.
  Showing good recommended products matters because most visitors don’t have time to explore your whole product catalog. They will make decisions with incomplete information. They will not make perfectly rational purchasing decisions. That’s why showing visitors additional products on the product page that they have a high statistical chance of also liking, is good design.

Components

Filters

  Opening with these detailed availability filter emphasises urgency and scarcity, further amplifying the badge overlays, size hover previews, and size dropdowns showing limited inventory.

Cart

  Empty cart shows all time most popular products, those with the highest conversion rate, and chance of being added to cart together with a text link to the most popular collection that serves as a view all to the most popular products.

Figures

  Figures should show campaign videos and imagery in a manner that is harmonized with all marketing channels. Caption can be below or overlayed and should detail all products shown in the image or video, increasing average order value.

Products

  Products should show variants like size, clearly marking those sold out, and swatches communicating scarcity, demand, and urgency in a similar manner. Product imagery should have branded off-white background.

Sources

Simon

The Science of Design.
The Psychology of Thinking.
Bounded Rationality.
Complexity.

Mokyr

Sustained Growth.
Technological Progress.
Useful Knowledge.

Kahneman

Cognitive Ease.
Judgement under Uncertainty.
Prospect Theory.
Loss Aversion.

Thaler

Choice Architecture.
Intelligent Defaults.
Smart Disclosure.

Norman

User Experience.
Cognitive Engineering.
Emotional Design.
Beauty.

Ive

Human Interface Guidelines.
Craft.
Care.
Trust.