Not long ago I shared 7 basic rules of mobile design for your online shop. When you implement good design in an online shop you offer a good user experience that will easily mark the difference between a profitable and successful e-commerce or just an online shop that doesn't sell. Today we're going to talk about how to design and develop an online shop that is up to today's standards.

Every time a potential client approaches us asking for a quote to develop an online shop, they've already done their research. They usually already have an idea of what they want and how they want it.

Besides asking for a good design keeping in mind it should be optimised for mobile, they also ask that we include a good optimisation of the site in the quote. They want to differentiate themselves from the competition once the site is published and appears in search results.

A few weeks ago we met with a potential client who wanted to develop a large scale project. The business model seemed simple as it was that of his competition. In fact, he told us, "I want you to develop a site with the same features and services as this one" - (I can't say which).

We asked him, "okay, but if we're going to copy your competitor, what is going to make you different?". He replied with a smile, "the user experience of my competitor is a disaster".

He continued saying, "I need a site that welcomes the user to stick around, with everything they need at their fingertips, with easy navigation, something efficient, very visual, with copies that connect to the visitors (my clients). I want to make them feel that we understand them and offer them a solution. Also, I need it to be perfectly optimised with regards to SEO because I want my online shop to surpass my competitor in terms of search results, both organic and paid (adwords)".

The truth is I was immediately excited about the project. It's not so common in the field of web design and development that I receive clients that know so clearly what they want. The client was totally right; you can enter two stores that offer the exact same service with the same products, but the difference between them is how they sell to you and the added value they offer. Maybe they offer you best-use tips or explain how to get the best performance or maybe how to care for the product so it lasts longer.

There's no doubt, right? You buy from the shop that offers you the best value and service.

That said, I wanted to share 13 tips for when you design and develop an online shop to offer the best user experience possible.

Let's go:

• Achieve maximum possible speed to decrease the load time on mobile

We've said it a million times in this blog: users are impatient by nature. If your e-commerce takes more than 3 seconds to load, the visitors will get bored and go to another online shop. Nowadays Google offers everything you need to let you get the most out of your site and improve your performance.

First think mobile

Users tend to prefer shopping online than in physical shops because prices tend to be lower. The first visit to an online shop tends to be via mobile. In fact, mobile browsing now exceeds that of desktop computers.

• SEO for high performance

Programming a simple online shop is quite simple from a technical perspective. Optimising in SEO is a whole other level. Achieving good positioning in search results for an online shop is a long process.

To achieve good positioning, it's important that your site has several elements that favour fluid and agile indexation. These elements include: light weight images, clean code, responsive design... in this post we offer 10 SEO tips to achieve a high performing e-commerce.

Have a good keyword strategy

It's crucial that you really study your audience (potential clients) before starting your online shop. To offer content and products they are looking for it's necessary to have a keyword strategy. Here we explain what is a keyword, how to find the right one and  how to create contagious web content.

• Full Screen images and videos for the header or start page

This is the best strategy to attract the visitor's attention. It's a visual and fun way to invite the user to stay a while in your e-commerce. They call them Hero Images, which are simply images at the beginning of the site and that occupy all the navigation space. Usually you can use a Hero Image as the background for your logo, navigation bar and site header. Also, in this same space, people are using video, which obviously generates even greater impact. The homepage of our site is an example.  ?

• Add a parallax effect in spaces for your call-to-action 

Add an image with parallax effect  in the module's background containing the call to action you want to highlight visually. Strengthen the image and encourage more clicks. As a bonus you'll be generating a "WOW" effect in the animated image when the user scrolls down.

• Organise products in “Knolling” style to make the sale

This concept has been used a lot in Instagram. It's called Knolling and refers to how elements in the same space are organised and arranged. It allows you to show several products in the same header image. Imagine putting the main product in the centre while surrounded by all its accessories.

• Centre the main elements keeping in mind the mobile design

This is one of the basic rules of mobile design for an e-commerce. The users make decisions based on what they see. To give you an idea, mobile purchases tend to be impulse purchases. To encourage that reaction it's important that the mobile visibility is perfect to ensure this behaviour in the visitor. The most simple and sure way is to position the main image in the centre so that it occupies the majority of the screen and with the best possible quality, keeping in mind the weight of the image.

The content is most important

We always keep this in mind in all our projects. A blog is the tool that allows you to amplify the flow of quality traffic. If you publish content that your audience enjoys, then you're not only positioning yourself as an expert on the subject, but also opening the doors to trust with your potential clients. They are more likely to buy from you and to recommend you to others.

Simplify the button design

Flat design is stilll valid; it's been years since we used shadows or 3D in any buttons and even less so in such an important button as the purchase button. We prefer to be practical, minimalist and direct. The purchase button in an e-commerce should be loud and clear.

We can't ignore its importance and purpose. Buttons should be as efficient and attention-grabbing as possible. Along with good design their positioning is also crucial. If you have a shop, have you done a test to ensure your buttons have good visibility? Do they attract attention at first glance? Are they well-located? Can they be seen perfectly from a mobile? 

Subscription models with good call-to-action that are visual to acquire a database

If your users like the content you offer, it should be simple and invite them to form part of your fan club. Tell them that by subscribing they will be the first to hear your news, receive your offers and read your additional content. Your database is invaluable; it shows that you have first hand contact with people or potential clients who follow your brand and want to know what you're up to.

Acquiring a quality database allows you a lot of leg room. It's ideal for encouraging return purchases of your products. It also favours cross-selling and increases followers of your brand. Additionally you can use your database to test future product launches. The options are endless.

Fonts are really important

Years ago Google launched a font gallery, GoogleFonts, a free font space that has lots of great options. With Fonts you can easily utilise that best fits your brand's identity and that maintains the personality in every section of your site.

In fact, nowadays when we develop a corporate identity we take into account the use of the font in the online environment. It carries the personality of your online shop.

Use Scroll to tell stories and/or sell your star product

A classic example of this is in Apple's site. The learning curve for navigating the internet is getting longer and larger. Users in this generation are used to how sites work. We tend to scroll down in mobile almost by instinct. That said, the need we used to have for everything to be distributed and concentrated in one spot is no longer an issue.

Navigating from devices has favoured sites with content spaced out, instead of crammed in one spot. This is strategy allows you to explain the little charming details of your product in a visual and attractive fashion. Explain the benefits, advantages and solutions it offers to your niche market.

 

I think these tips we offered on how to design and develop an online shop will give you a good idea of how to plan your e-commerce and profit from offering the best user experience possible to your potential clients.