The brick-and-mortar framework for designing eCommerce sites

How a brick-and-mortar shopping experience should influence how we design eCommerce sites

bricknmortar framework

The best way to think about designing an eCommerce store is to think about what each step/job of a brick-and-mortar shopping experience does for a customer in comparison to the parts of an online shop.

Physical Store = Website
A website is like a store. It can exist by itself, but people need to find it. This could happen organically, through advertising, social media, or content. You need to find ways to get people to your store.

Store Signage = Brand Identity / Photography
Now that customers are here, will they stay? Is it the store they want/need? is it compelling? Do they think they will find what they need inside? is it clear how this site will help them?

In-Store Wayfinding = Navigation Menu
Once customers are in the store how do they find the things they think are in the store? You need to help get them there.

Aisles = Categories
A customer needs a clear indication that they MAY find what they are looking for within this category/filter. This is why category naming is so important. ***If you see a lot of traffic bouncing between category pages - something isn't quite clear for your customers.

Sections within an aisle = Sub Categories
Kind of like finding toothpaste amongst a section of other oral care products. Online the customer needs to be able to get there quickly by utilizing sub-category cards, simple navigation menus/filtering.

Shelves = Product Listing/Catalog Page
Imagine trying to find YOUR favorite brand among a wall of similar products. Filters!

Product on a shelf = Product Card
This is the product your customer has been trying to find and hopefully found quickly. Making the name, brand, price, and photo clear is of top priority!

Product in your hand = Product Detail Page
Your customer needs to hold the product in their minds. Give them every resource you can to make it as real as possible. Show scale, detail, and maybe someone using it. Make sure you give them all the information they need - and prioritize that information correctly.

Here is your opportunity to address their hesitations...
A 30-day money-back guarantee? Why not!
Free Shipping? Okay!

Product in your cart = Product in your digital cart
It's in the cart! Congratulations, the hard part is over. Now we need to make it simple to buy.

Checkout = Checkout Flow
Make it as simple as possible. Are your customers returning regularly? No? Then why make them create accounts? YES? then make it so simple to log in with social for return visits.

Everything after checkout = Post Purchase Experience
Make sure you are selling high-quality items, they are packaged well, you've made every effort to communicate what they will receive and when. If things don't work out - make it easy for the customer to return or exchange!

The next time you're making changes to your online store remember this analogy. It helps you to remember the jobs each part of your site SHOULD be used for.


Let's Get Started.

Schedule a Call