A image of the current state of the buyblock section of the productpage.

Why do we need this?

The most critical section of every e-commerce website is the place where the buy button is. This is the place where a purchase decision can make or break due to bad design or by confusing information. The buyblock is the section where bol.com communicates the price, delivery promise, seller, buy button (of course), add-to-list option, and some USP's. But this section has lots of complexity from the business side to communicate loyalty programs, if a product is available in another color or if a product is in a subscription form. Bol.com knows if propositions are expressed near the buyblock will perform better. The situation now is that lots of different information is crammed in a small section of the product page. We see in UX research that it asks a lot of cognitive load of users to progress all this information. We wanted to create a vision of how to deal with this in the future. With this vision, stakeholders can better decide/discuss what kind of information needs to be placed in the buyblock.

But what is the 'ideal' buyblock?

To answer this question, we needed to start in de beginning. What I often do is looking for knowledge other people already acquired. So I look for insights from the research we done before, read articles of Baymard or Nielsen Norman Group, and do a competitor analysis so I can see what other e-commerce websites do. A visual designer did a deep dive into the components we use in the buyblock. We also looked at the company goals of this year to decide how this project would align with one or more goals of the company. Because this project is so big that this can't be only a 'design party.' So we involved the business analyst and product owner of a webshop team and shared all our knowledge.

Image of deskresearch, looked at our own environment, looked at competitors and readed the Baymard document of product pages.
A image the icons of our two design principles, to create more focus and create more hierarchy in information.

So… what were the main findings?

What we concluded was that our buyblock doesn't have one goal. There was a lack of focus and hierarchy in content. We thought that if we do something about that, we can solve the problems the buyblock has. Unfortunately, we can't just delete content that we don't like. Because every component supports a specific business goal. So our tasks were to make it more focused and create a hierarchy with the same number of elements.

So you can begin design, right?

We thought that also, but yet again, it was so complex to start at this. We determined some guiding principles to really get an idea of what we need to do:

So, this is a start. But what kind of information is primary or additional? We began the very sexy process of documenting every component in excel and determine if it is essential and what is not. This segmentation was done based on the insights we done earlier.

Image of the inventarisation of all the components and what kind of goal they serve.
A big image of the global Buyblock vision with a primary information section and some empty block for secundairy information beneath that we show the usp's.

Concept

We made a high-level concept of the new buyblock. In this concept, we showed our stakeholders how this would work. What you see in the image above is:

  1. Section with the primary information such as price, delivery promise, seller, and the buy button and add-to-list functionality.
  2. The secondary information. Here we have a block with our loyalty program, the other variants, explanation of the promotion, and many more blocks of these kinds. The idea is that there are a maximum of three blocks. So, product specialists can order the blocks on importance. With a visual design of a block, the business can do more easily tests because they can better own this section of the page.
  3. Last but not least are the USP's. This is at the bottom because most USP's are already common knowledge with our users and is an excellent way to close this section.
Image of examples of secundairy information such as subscriptions, specs, awards, other sellers and many more.
A big image of the buyblock vision with actual content. We made three different product pages to see what kind of effect our decisions had and to test these designs.

Translating concept to designs

So, we created an idea, great, you think. But that was the beginning. We created a vague description of how the buyblock should look like. We presented this to our stakeholders, and we were interested in what kind of designs will come out of it. So a visual designer and I began translating the concept to a visual design. This was the stage to implement the second principle to layer the information in the blocks. We gave all blocks more room and even introduced new interaction patterns.

A image of the bol.com collegues watching a user go through the concepts.

Test, test, and test

After we made a visualization of our concept, we decided to validate this design with some users. We wanted to know if this design is better than what is already live. We gave the users some tasks to do with our live site, and in the middle of the test, we made a switch to the new design. We wanted to see if users can find certain vital information and can make a purchase decision. We also wanted to know what users think of the new design. We knew that it doesn't tell you much, because 8 persons said it doesn't mean that 10 million people will like it. But it gave a sense if we are in the right direction.
We design was a success. Users noticed the redesign immediately. They found all the necessary information better, and some blocks were more helpful due to the redesign.

What I learned from this project

This project was a challenging one. Because it was one of the most significant projects in scope. The diversity of content that lives in such a small part of the website and de number of stakeholders you need to involve was a challenge. But I am delighted in the end. Unfortunately, this vision isn’t implemented yet. Because most stakeholders didn't saw the clear need for this redesign. That was a bummer. But a learning for the next time to better communicate the pain of the users with the current buyblock.

Curious for more content?

Project: Choice Assistant

Project: Parle Francais?