.../articles/
Designing an E-Commerce Site That Sells: How to Find Great Reference Examples

Designing an E-Commerce Site That Sells: How to Find Great Reference Examples

2022.09.13

However, many people say things like "I don't know how to come up with a concept" or "I don't know how to do research."

In this article, we'll walk you through everything from how to build an EC site that actually sells, to how to find stylish reference examples. If you're about to launch an EC site, we hope you'll find this useful.

A roundup of stylish EC site designs

1. Gallery sites

Gallery sites collect well-designed websites in one place, so you can get ideas from them whenever you're stuck on deciding a concept or a design direction.

Since they let you explore website design from all kinds of angles—not just for EC sites—they're also great if you haven't yet decided on a direction for your website.

Here we introduce four gallery sites you can use to search specifically for EC sites.


A collection of long-form vertical web design galleries and sites|MUUUUU.ORG https://muuuuu.org/category/sitetype/ec

This is a gallery site run by someone from QUOITWORKS Inc., a web production company. It introduces high-quality websites at a fairly high update frequency.


Web Design Gallery for finding high-quality websites | S5-Style https://bm.s5-style.com/?category=31&andor=category__in

This is also a gallery site run by Shogo Tabuchi (S5-Studio), a working art director.


Check WebTech https://cwt.jp/category/307/1 This site lets you search by the services or technologies a site is using. The link above shows a list of sites built on Shopify.


2. Case studies from EC platform providers

When building an EC site, it's most common to use a platform such as BASE or Shopify that lets you sell products directly on your site.

The official sites for these platforms often feature case studies built using their service, which you can use as reference.

BASE : https://thebase.in/category STORES : https://stores.jp/ec/shopinfo Shopify : https://www.shopify.com/jp/examples Mercart : https://mercart.jp/case ec-force : https://ec-force.com/user_voice EC-CUBE : https://www.ec-cube.net/product/cases/backnumber.php

We cover the details of each EC service in the article below, so please take a look. [Related article] How to build an EC site, and recommended EC services.

3. Case studies from design/development agencies

To build an EC site that actually sells, it's also a good idea to look at case studies from agencies with strong designers and engineers. There are many agencies building EC sites, but here we introduce a few that, in our own view, consistently produce great work.

mount inc https://mount.jp/ This agency achieves both high-quality design and the implementation to express it at a very high level. In particular, its creative direction and the satisfying feel of its interactions draw viewers into the brand's world. [Case study from mount inc] Kobe Motomachi Tatsuya : https://www.kobebeef.co.jp/ The example above is an EC site for meat, and what stands out is its warm, human illustrations that feel like being served by staff in an actual store.

MEFILAS https://mefilas.com/works/ This agency handles a wide range of creative work, from sites introducing the weighty works of architects to ones lively decorated with characters. What I personally find impressive is the balance of their playfully decorative sites—"lively without being noisy." [Case study from MEFILAS] Doraemon | Felissimo : https://www.felissimo.co.jp/doraemon/ The example above is a page for Felissimo's line of Doraemon merchandise for adults. Its subtle yet effective animations and carefully cropped photos introduce products at a comfortable pace.

How to reference stylish EC site designs

Where to look when searching for good design

Especially if you're new to building EC sites, even after looking at reference sites, you may find yourself wondering, "What standard makes a site 'good'?" or "How do I find the right sites to reference?"

The conclusion is that, for EC sites, it's important to reference sites with similar products, price ranges, and target audiences.

For example, just as consumer behavior is completely different between everyday consumables and luxury brand goods, if you reference an example just because it looks stylish or matches your taste, you may end up attracting a completely different audience than intended, or fail to sell at all.

Three points for building an EC site that sells

Once you've found good EC site examples, focus especially on the following three points as you move forward with building your EC site.

1. Product photos and product information

On EC sites, users decide whether to buy based largely on the product images alone, so providing photos and information that make the product look appealing is the single most important thing.

Since users can't physically touch the actual product, they check even the finer details, such as the product description. For example, the fashion EC site "SHEIN" provides detailed information on size and fit, and even explains in detail how to measure your own body, so shoppers can check beforehand whether an item will suit their body type.

It also helps to prepare product photos as if matching an image to each individual piece of explanation—for instance, showing the front and back, how the shape changes when in use, its size, and specifications.

2. User flow design

Designing the user flow is essential to increasing sales on an EC site. Think of user flow design as designing how users move around the site so they can reach the product they want.

Even if a user finds the product they want, it's meaningless if they can't actually get to it, so search, categorization, related products, and other elements need to be intuitive enough for anyone to use.

For example, on Amazon, below the page of the product you're about to buy, you'll see "Frequently bought together" along with the total price if you buy those items, as well as related product suggestions. Designing your site so users can browse a variety of related products—matching psychology like "this is good, but I want to compare a bit more" or "I want to buy some accompanying items too"—tends to raise the conversion rate.

3. The EC platform you use

As mentioned in the section on finding examples, most EC sites are built using an EC platform, and each service has its own set of characteristics.

The best service to use depends on the scale and style of your site, so make sure to identify the right one before adopting it. [Related article] How to build an EC site, and recommended EC services.

By the way, using a Chrome extension, you can inspect the code of a competitor's or reference site and get a rough idea of which services it uses. Knowing which EC service a reference site uses can also make it easier to explain your own platform choice internally. Chrome extension: Wappalyzer

What are the current trends in EC site design?

Many people, when deciding on the design for their EC site, want to "follow the latest trends" or "make it stylish."

However, web design trends evolve alongside advances in technology and the environments in which sites are used, so a design chosen purely for how it looks to users is nothing more than "decoration." Even a stylish site won't drive sales if it's hard for users to use, and if the flow leading to purchase is unclear, it won't lead to conversions.

So here, from the perspective of pursuing "usability" and "clarity" for users, we'll introduce the essentials of building an EC site.

Smartphone (responsive) support

Supporting devices of various screen sizes, such as smartphones and tablets, is called "responsive" design. Shopping on a smartphone is now something everyone does as a matter of course. Since it's common for people to browse a website while also visiting a physical store, supporting smartphones on an EC site is essential. Since a smartphone isn't necessarily the only device someone carries around, it's important to have a UI that's easy to use across a variety of devices.

High-quality image and video media

Images and videos are an important source of information for users shopping on an EC site. That's why preparing high-quality images and video media is important for providing more detailed information and encouraging purchases.

In particular, with the recent spread of high-speed 5G connectivity, higher-resolution images and videos have come to be expected as communication standards evolve. Letting users zoom in to see the texture of a product in detail, or watch a video showing the product in use, gives users a sense of reassurance and builds trust in the EC site itself.

Display speed and UI usability

This may seem to contradict the point about media above, but website loading speed is an extremely important factor, not just for EC sites. Users will leave a site simply because it loads slowly or feels laggy. EC sites tend to require relatively complex operations beyond just browsing information—like adding to cart or entering an address—so the accumulation of small usability details has a big impact.

It's important to keep improving continuously, taking into account the impact that high-quality images and videos have on loading speed.


To build an EC site that actually sells, rather than focusing too much on design trends or style, concept and targeting are what matter most. Start by clearly articulating your product and concept in words, pull up a few reference sites, think about the best way to reach your target users, and then add the colors that make your own site feel like you.

written by

.../article/

Articles

All articles

From Firebase to Vercel, Contentful to microCMS — a migration log written with Claude Code

From Firebase to Vercel, Contentful to microCMS — a migration log written with Claude Code

We moved our corporate site's hosting and CMS, and made it bilingual along the way. The constraints we only found by running against real data were more useful than the migration itself, so this post focuses on where we got stuck.

Can't Read POST Data with Firebase Functions × Remix?

Can't Read POST Data with Firebase Functions × Remix?

How to read POST data from a Remix action when running on Firebase Functions.

Generative AI for Executives and Leaders: An Approach to Self-Driven DX

Generative AI for Executives and Leaders: An Approach to Self-Driven DX

Building a structure where executives and leaders themselves can identify issues and evaluate solutions using generative AI. We introduce how combining this with our hands-on support dramatically improves both the quality and speed of digital transformation.

Deploying a Monorepo Next.js App (App Router) to AWS Amplify

Deploying a Monorepo Next.js App (App Router) to AWS Amplify

Notes on the obstacles we hit while deploying a Next.js app managed in a monorepo to AWS Amplify.

Keeping Production Running Smoothly with Remote Work and Online Meetings [Documentation]

Keeping Production Running Smoothly with Remote Work and Online Meetings [Documentation]

Many production companies have adopted remote work as a result of the pandemic, and we are one of them.

Designing an E-Commerce Site That Sells: How to Find Great Reference Examples

Designing an E-Commerce Site That Sells: How to Find Great Reference Examples

There is no single formula for e-commerce design that sells. Driving revenue requires a solid concept, and getting to that concept requires thorough research.

Productivity Tools We Recommend as a Production Company, Including Services That Work Well Solo

Productivity Tools We Recommend as a Production Company, Including Services That Work Well Solo

With remote work becoming the norm during the COVID-19 pandemic, our team now works from home most days of the week.

We Released Thought Recorder, a Figma Plugin for Keeping a Commit History of Your Designs

We Released Thought Recorder, a Figma Plugin for Keeping a Commit History of Your Designs

We hope this helps web designers who work in Figma. Read on for how to use it.

How to Build an E-Commerce Site, and Which Platforms We Recommend

How to Build an E-Commerce Site, and Which Platforms We Recommend

Shopping online for fashion, appliances, and even groceries is now routine. With the pandemic accelerating the shift, we receive a steady stream of questions about which platform to use and how much it costs.

Generating FastAPI Schema Classes from OpenAPI

Generating FastAPI Schema Classes from OpenAPI

We chose FastAPI, a relatively modern framework, for a Python API project. FastAPI can generate an OpenAPI definition from your backend code, but here we do the opposite: generating FastAPI schema classes from an OpenAPI definition prepared in advance.

View all articles

Contact us