Refine Ux Quickly: 8 Storefront Design Principles

Understanding User Intent

You know what I see most when I hear people talking about user intent. That assumption that it’s a one-size-fits-all thing. I keep coming across these articles and social media posts that declare there are just three types of intent: navigational, transactional, and informational.

But the reality is a little less clear-cut, isn’t it. Sure, it works for generalisation, but at its core user intent is complex and multi-layered. Maybe you’re trying to get someone to buy a product on your site. So the design and messaging are all skewed towards this intent, but here’s what you might be missing - the visitor might not be in the mood to buy at all.

They might be in the early stages of their buyer journey. This means that your website's design doesn't always match their needs and motivations. It’s not you; it’s them, honestly.

But then some people also think it's just about matching the intention with an action. Like if someone wants to learn something, show them a blog or give them information. If they want to buy, throw them straight into a sales funnel with a big fat CTA button as soon as they land.

I think we've all seen these massive pop-up forms demanding action, and they're highly effective. For increasing bounce rates. So what's the solution. Or perhaps that's not even the right question because like I said earlier, there isn't a one-size-fits-all answer.

Maybe it's more about balancing your business goals with user needs, motivations, and experience with your website and brand. Maybe it's about leaving enough cues for those who want to go from knowing nothing about you to making a purchase - all in one session. And maybe it's about providing content that suits different intents even if it makes your SEO data look like you have low conversion rates sometimes.

Prioritizing Visual Hierarchy

When it comes to displaying products in an online store, it seems like most retailers get one basic thing wrong - they just list all the products in a grid and expect customers to scroll through everything. While scrolling is probably a normal action on any page, bombarding the users with too many choices without context makes decision-making much harder. When people feel overwhelmed, they abandon their carts or worse yet - never proceed to check out what’s inside the cart.

The reality of selling anything, whether at a physical store or on a website, is that you must create a sort of rhythm for how things are displayed. When you make certain elements bigger than others, it draws more attention to them. This automatically makes people want to click on them instead of exploring other options. You don’t have to put your best sellers first and display only those with bigger images either.

Sometimes a product that isn’t selling as well could get a boost from being given more screen space for a while. There are times when the product being sold is fairly unique so the entire storefront can be dedicated to showing it off. In this case, making the product image the biggest element becomes non-negotiable - especially if you have few words describing it or if it isn’t particularly known in your local area. It’s important to keep user goals in mind and help them identify different areas of content with visual cues.

Not everyone is going through your catalogue with the intention of buying something and that is okay. A website where everything looks about equally big and prominent is confusing for someone who lands there hoping to find answers quickly so prioritising visual hierarchy through size makes navigation far easier for anyone coming across your online store for the first time.

Streamlining Navigation

Most brands make the mistake of treating navigation like a necessary evil - a bunch of menus with a couple of pages thrown in to get customers from point A to point B. But, websites and online stores are no longer static catalogues or information boards. These days, they're more like interactive adventure parks - more so if you're selling online.

And it's not like customers can ask for help if they get lost somewhere along the way. This is why navigation is such a huge pain point for those who shop online. Sort of. It seems like the pressure to simplify an experience that is anything but, can be overwhelming and anxiety-inducing.

There's also the added challenge of making sure everything fits into standard navigation best practices and works well across different device sizes and web browsers. Not exactly what most people think about when visiting a store - especially if they're looking for something specific. So why are stores wasting time on distracting design elements, extra copy, and pointless carousels. You might think it adds flair or personality to your store's website - but unless this is helping your customer move through the buying process faster, it doesn't matter much.

And who says you can't have both. If there's one thing I've learnt from designing store navigation, it's that streamlining doesn't necessarily mean boring or bland. It simply means you take all the personality you would otherwise want to shoehorn into unnecessary design elements, and use it instead in useful elements like search bars, chatbots, and tooltips.

Navigation menus aren't just about helping customers find products. They do this - but they also do so much more when done right. They're critical cues that drive action - whether it's inspiring interest or nudging action.

Enhancing Mobile Responsiveness

Loads of brands think mobile-friendliness is as simple as letting their site squeeze into a tiny vertical rectangle and swap images to icons. Apparently, that means they’re mobile-first now. I mean, in an embarrassing way, it sort of does. After all, responsive layouts are often just about making sure the content doesn’t run off the sides.

The way I see it, but the reality is this - layout responsiveness is one thing, real mobile user experience is quite another. Mobile screens are literally smaller and users have to interact with these spaces using their hands. And with many different screen sizes thrown into the mix too, a good ‘responsive’ website isn’t just about resizing things - it's about how this resizing impacts interaction.

If you think about it, it feels like we’re designing three different storefronts: one for desktop, one for tablet, and one for mobile. And to an extent, I think we are. It isn’t just what has changed on the interface but how our audience interacts with it and what they expect from it now that they’ve switched devices.

It seems like certain design principles become even more important on mobile - things like typography and negative space, for example, now play a much bigger role. The way I see it, it can be incredibly complex to design around these changes but at the end of the day (and maybe not all that unlike how we learn to survive in general), by observing users - really observing them - and how they interact with our storefronts on their mobiles is a great way to understand what’s working for them and what’s not.

Utilizing Consistent Branding

If there’s one thing that comes up all the time - a brand’s consistent look and feel is just having everything in one colour. That's not quite the case though, and quite possibly couldn't be further from the truth. The way I see it, besides, if everything on a website is the same colour, that's just going to create a blinding block of whatever shade you choose. And that's not going to tell me anything about your brand's identity.

While store owners shouldn't actively create confusion by having drastically different aesthetics across their assets, especially their online storefront and social channels, if there is some discord - there's no reason to panic. In fact, it's not uncommon for brands to evolve over time as they see more of what works for them and what doesn't. You might have started out being visually attracted to electric blues, but now want something that feels a little more mellow - like navy.

More or less. The thing is - brands are constantly evolving, especially digital-first businesses that are often run by entrepreneurs who started off with very little resources at their disposal and grew into something far larger than they could have imagined. If you're one of those brands who's seen themselves change with time and grow into an aesthetic that feels entirely new but incredibly you - don't fret about any differences you might see between what used to be and what is.

It helps to understand that customers are almost never fairly forgiving about change as long as you communicate honestly with them about it all. More or less. At the end of the day, good brand consistency is less about remaining the same at all times and more about communicating evolution transparently.

Implementing Effective Call-to-Actions

I Think there's a bit of a popular misconception that call-to-actions (ctas) need to be, well, a shout from the rooftops. The bigger, bolder, and brasher, the better. But it doesn't quite work like that, and I've seen some attempts really backfire.

Too many businesses - especially new ones - try to throw in as many CTAs as possible on every page. Thing is, you need a sensible mix of psychology and strategy to get your calls to action right. Sure, you want your call to action to stand out and be immediately recognisable.

But how do you do that without making the rest of the page feel washed out. It's about creating clear value for visitors so they see that CTA and want to interact with it - not feel put off by it. There's another thing that's important.

The call to action should be simple and direct. Don't make them think - just let them act. I know it's tempting to spell things out for them, but over-explaining often leads to confusion or annoyance.

We've all been there - we want something but there are just so many hoops and so much information that we give up. Now that doesn't mean you skip essential information entirely. Customers still need a sense of what they're doing when they click 'submit' or 'purchase'.

It just means making it as easy for people as possible. That's the sweet spot - ease and a sense of value.

Looking for a new website? Get in Touch