Role UX Designer and UX Researcher
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.
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.
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.
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.
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:
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.
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.
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.