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.