How to build a product website that sells

This is a quick demonstration of how to increase visitors, create more sales from them, and reduce your own costs. The keys are good usability, technical implementation and carefully designed content.

Website used in the example

The example uses www.bmigroup.com/no/

An example of how the website used to work can currently be found at www.bmigroup.com/it/ – with different product range. For an example with a much larger product range, see www.bmigroup.com/de/ – again, with the old design and technology.

A website that sells – script, screenshots and additional tips

My example here is a website for a global roofing company, BMI. The version we’re looking at here is for Norway. For demonstration purposes, it’s easier to auto-translate into English.

Home page

First point. There are fundamentally different types of user for a website like this. For example, the person who lays the roof – the roofer. The roofers know BMI and its BMI brands. When they arrive at the website, it’s typically to find a specific product and others related to it.

A home owner in need of a new roof would normally arrive via search engines on one of the specialised pages answering a specific question. But there are important exceptions, such as when a trade person has recommended BMI and their first arrival is on the home page.

From a business perspective, this is much more than a convenience. Trade people spend a huge amount of effort explaining products to their potential clients. So the website needs to take work off their backs. And in exchange, this is one of the reasons roofers are more likely to recommend BMI brands than those of competitors.

TIPS

Websites such as this use different roles. On the BMI Norway website, there is a clear distinction between owners, architects, and roofers.

Different roles need different (but overlapping) content, and they will use the website in different ways (i.e. user journeys). This needs to be carefully planned and sourced.

There will also be roles that are currently excluded on the website – for example, there is a page listing retail distributors in Norway, but nothing explicitly for them. Prioritisation of needs is part of the planning process when introducing changes.

BMI brands

BMI includes well known brands, representing different types of product.

Let’s follow a journey where a home owner in Norway. The winters can pile metres of snow on the roofs and the wind speeds rip trees from the ground. Many home owner want concrete roofing tiles. The best brand to choose is Zanda. They may have found it via the BMI home page.

TIPS

The website needs to show the relationship between the over-arching brand, and the individual brand names.

BMI was formed by purchasing companies with established brands and a loyal following. Many of these brands spread across many countries. So the BMI website, works to show what is common between the brands and what is different.

A retail aggregator will also have multiple brands, but there is little commonality other than the preferences of the retailer. They may also be under pressure from the product manufacturers not to push other brands before theirs.

Zanda landing page

More likely they used a search engine and arrived directly at this page – the Zanda landing page.

Incidentally, that’s fast web page delivery. It makes a big difference for search engine ranking to get the technology right.

TIPS

Look at the 3 cards (Inspiration …, Sustainable products, FAQs). The website manager has clearly chosen these as different user journeys to offer to people. In the case of “Sustainable products” it also sends out a clear message of social responsibility.

And now they select a product range.

Product range for Zanda Arctic

As you can see, this product comes in six colours. All the information people need is in one place, even if the same documents are available elsewhere. This is information for the home or building owner, the roofer, and the architect.

TIPS

The BMI Norway website provides filters (on the left) which rely on a rapid drilldown – i.e. click to narrow the selection as quickly as possible. This works for BMI, where users already have a brand preference, and there are a large number of products.

Retail websites, often support multiple selections so that products can be viewed from alternative suppliers as part of choosing a brand. That also helps the retailer stay neutral. However it can involve more decisions from the user.

Like all the product information here, it’s obviously coming from a single large database of product information. Given that BMI sells different products in many different countries, the full product database must be impressive. Typically, product databases such as these feed of information from SAP systems and elsewhere, and they feed out to different website and services. Achieving this with good performance and security is technically challenging.

These are accessories for fixing tiles.

This is part of a common user journey. It might be a home owner choosing which tile to use, or the architect checking feasibility, or the roofer creating a shopping list of what is needed. Or it might be that the user hit this page out of curiosity, and is after something completely different.

TIPS

Lists of related products are generally maintained in product databases. Inventory systems like SAP Hybris support multiple different types of relationship. The examples above list accessories. Another example could have been to list alternative products, or products that must be purchased first (or later). All of this information has to be setup – that is a one-off cost. It also also needs to be maintained every time products change, and when people notice mistakes – that is an ongoing effort.

There are also engines that will automatically generate lists, influenced by what users do – “people who bought this, also looked at those”. You need substantial traffic to make this work, and it will need refinement to avoid obvious mistakes. Before investing in it, compare the technology costs and maintenance costs, compared to the extra sale revenue.

When looking at related products, also think about the users – if there is too much choice it may act as a disincentive.

Next best action

These are examples of “next best action”. The first three are jumps to partly-related topics when people are exploring ideas or in the early stages of decision-making.

And these are “next best actions” for users who may be close to their decision. Some of this is specialist. For example, technical documentation.

TIPS

Next best actions can be at the bottom of the page (as here), or on the side (when in desktop mode), or embedded within “cards” or other displays near the top of the page as in the home page (see above).

When choosing a next best action, think of the different user roles.

Also consider where they are in their decision-making or customer support process.

Keep the options short and obvious, and potentially useful – so users choose to look at them rather than ignore them.

All documentation

This is a master list of documentation. It would be ignored by home owners but is an invaluable aid for technical users such as architects, who need the correct product information for creating tenders. It’s the kind of page that architects bookmark.

For the home owner, a more likely next step might be to find a recommended roofer.

Find a roofing partner

This makes it easy to find local roofers, and demonstrates the number of roofers available.

Maybe the home owner has a different kind of question.

Contact us

This covers a range of different actions throughout the sales, delivery and support process. Making the information easily accessible reduces the number of phone calls and queries, … and that makes it easier for the customer and it reduces costs for BMI.

In summary

We’ve seen how to think about different types of user at the same website, and support their different behaviour. That includes home owners, architects and roofers.
We’ve shown that people arrive on the website at different places.
And that some parts of the website are only used by some users.
We’ve also seen the benefit of user journeys that involve only a few clicks.
And especially, we’ve seen the importance of “next best action” to keep people on the website.