Back to overview
Order Detail Page
Order Detail
Page
Order Detail Page
Made at bol • Delivery in 2024
Made at bol • Delivery in 2024
My role
Working as a Product Designer with the focus on product discovery, UX research with customer interviews, UX design, Visual design, prototyping and developer handover.
Team
In this project I was working closely together with a Product Manager, Data scientist, Product Analyst, Front-end Developers, Back-end Developers and stakeholders from other teams.
Timeline
21 months. Started in January 2023, release to 100% in September 2024.
Overview
The Order Detail Page is the most important page in the after sales journey. On this page there is all the information regarding this order. Buy information, delivery information, payment options, return and repair information.
The page was outdated and it had a “one size fits all” approach. While there are so many different scenarios and options possible.
When we started our Product Discovery we noticed there are a lot of possibilities on this page to prevent customer questions and therefore customer service cases.
Designs
Information blocks with delivery, payment and return information
Information based on your order status with different statuses.
Delivery block variants based on type of product, like digital products, second hand products or return deals.
Problem
The Order Detail Page is the most visited My bol page, but navigating its FAQ content can be challenging. Currently, all information is shown to every user, regardless of individual needs, making it difficult for customers to find relevant answers quickly. A more contextualized approach—tailoring information based on factors like order status—would reduce friction, allowing customers to access only what’s most relevant to them.
Opportunities
By leveraging customer context — such as order status, customer ID, product type (e.g., bol or partner), and category (electronics, books, household, etc.) — we can dynamically rearrange, highlight, or hide content on account pages. This approach enables us to predict and surface the most relevant information, allowing customers to find answers faster and with less effort, creating a personalized and seamless experience.
Insights
What do we know
40% of orders is checked at least once on the order detail page, this lead to 2mio Chatbot Billie conversations and 1 mio cases
Over 50% of order detail page visits occurs after the order was delivered
Over 75% of conversations started at the order detail page visits occurs after the order was delivered
80% of cases started after an order detail page visits occurs after the order was delivered
Most asked questions of customers:
“Where is my package? - 1,114K
"What should I do if I receive a damaged item?" - 235K
"I haven’t received all the items from my order yet" - 185K
"Why is there no VAT on my invoice?" - 96K
"How do I get my money back?" - 89K
"How can I return an item? Wrong item" - 13K
Our strategy
1
Order Detail Page has potential to reduce ‘unnecessary contact’ with customer service
2
A lot of cases have self-service potential, which can be done on the Order Detail
3
Cover 1 article of an order to provide contextualized content and solutions
Design Sprint
Touchmap
Flows going to and from the Order Detail Page. Red are the not ideal flows, green are our new proposed flows.
The idea is that customers are guided through the trouble shoot content, so that we know what type of question they might have. If we know that, we can help the customer better and guide them to the correct solution, self service action or to Billie.
UX Design
With the outline of the Order Detail Page done in UX, we can look at our current ODP and see how we can learn and improve block by block.
Experiments
RUN 1
Add FAQ blocks on Order Detail
In January 2023 we run the first experiment to learn if customers would engage with a FAQ block in between the delivery information and the details of this order.
Result: 4% of the visits included a click on 1 of the FAQs, but surprisingly this did not result in a significant lower case/visit ratio.
RUN 2
Make FAQ contextualized based on delivery status
We learned that only putting an FAQ block doesn’t solve the problem. So we came up with contextualized FAQ blocks for before delivery, after delivery and mixed.
Result: 1,33% case savings, €950k full year savings
RUN 3
Split products of same order up in separate ODP’s
We learned that contextualized information helps our customers. To make sure we can be 100% clear in the content specifically for an article, we need to split an order with multiple articles up in separate order detail pages.
Result: Variant A has slightly more clicks (+2,2%) and shows similar case/visit radio (-0,5%). This means customers don’t have a problem with 1 article per Order Detail Page.
Customer Interviews
Qualitative research if info blocks for returns and payment help
Now we can contextualize the content of the ODP for each article, we want to introduce info blocks on the page to guide customers with our main self service and trouble shoot content.
Result: 9 / 10 respondents were happy to use the content blocks if they would have questions regarding this topic. The layout is a bit chaotic, we have to improve that.
First Click Test
Which variant of the info blocks is the most clear
To learn which info block setup would work best, we set up a first click test with 3 variants. Per variant we have 100 respondents. We would prompt them with a question where to find specific information.
Result: The important self service actions (like register return, pay invoice) were found. The most simple setup was the winner. Sometimes respondents look stuck, it took them some time. We need to be clear about which info block is helpful for which question and action.
Phases
After we finished all our experiments it was time to design and deliver every improvement. We decided to change the Order Detail Page from the bottom up. This way we could improve the page with React front-end components. Each improvement was placed on production with an A/B test, so we’d learn how each block was doing.
1
We started by a new “More in this order” block when a customer had an order with multiple articles, so they are able to navigate through each article related to this order.
2
After that we added the contact block, which is our entrance to Billie. This comes in to variants, for a bol or partner article.
3
Than we added the new React FAQ block which can easily be reused on other My bol pages.
4
The big change was to add the info blocks for payment, returns and repairs (if applicable). In multiple stages we added and tested new components, for example a drawer which opens when you click on the More questions link in each info block.
5
In the last phase we changed the delivery block at the top of the ODP. This had so many variants and possible scenarios, we took our time to really design and develop this well.
Result
Control
Variant A
60.034
Customer Effort Reduction
points
1,16%
Case savings
~ € 865k FY
www.bol.com/account/bestellingen/overzicht
Gratis verzending vanaf 2-,-
Bezorging dezelfde dag, ‘s avonds of in het weekend*
Gratis retourneren
Select ontdek het nu voor 9,99 p.j.
Waar ben je naar op zoek?
Inloggen
Categorieën
Aanbiedingen
Cadeaus & Inspiratie
Zakelijk
Cadeaukaart
Bestelstatus
Klantenservice
NL
Dagelijkse inkopen
Electronica acties
Select deals
Alles voor je vakantie
WK voetbal
Accountoverzicht
Bestellingen
Facturen betalen
Retourneren
Chat-geschiedenis
Gegevens & voorkeuren
Cadeaubonnen
Mijn Select & Kobo Plus
Digitale producten
Verkopen
Uitloggen
Bestellingen
Je bestelling
Besteld op 14 juli 2024
Bestelnummer 763434182
Verkoop door KitchenCrew
Schrijf een review
Ottolenghi
SIMPEL
€ 26,70
Je pakketje is bezorgd op 15 december
Bezorgd op Blossomstraat 13, Utrecht
Geleverd door PostNL
Zending heeft geen track & trace
Retour aanmelden
Vragen over je bezorging
Achteraf betalen & factuur
Dit artikel is nog niet betaald.
Betaal je artikel
Bekijk betaaldetails
Vragen over betalen
Retourneren
Nog 11 dagen om dit artikel gratis te retourneren
Het retouradres krijg je na aanmelden
2 jaar fabrieksgarantie
Meld retour aan
Retourvoorwaarden
Vragen over retourneren
Incompleet of kapot artikel?
Je hebt 2 jaar fabrieksgarantie
Je kunt artikelen repareren, terugsturen of vragen om aanvullende onderdelen. We denken graag met je mee.
Lees wat jij het beste kunt doen
Reparatie starten
Vragen over incompleet of kapot artikel
Hulp bij je bestelling
Verkocht door KitchenCrew
Zij kunnen je vraag vaak het snelst beantwoorden
Bol.com
Kan je helpen als je er met de partner niet uit komt.
Hulp bij je bestelling
Meer in deze bestelling
Mepal - Plat bord Bloom 280 mm - Pebble green
Uiterlijk morgen bezorgd met PostNL
Bekijk artikel
Philips Viva HR3741/00 - Handmixer
Wordt vandaag bezorgd met PostNL
Bekijk artikel
Bestellingen
Je bestelling
Besteld op 14 juli 2023
Bestelnummer 763434182
Verkoop door KitchenCrew
Schrijf een review
LEGO
LEGO Technic Kiepwagen, 2in1 Bouwvoertuigen Speelgoed - 42147
€ 9,90
Je pakketje is bezorgd
Bezorgd op Blossomstraat 13, Utrecht
Geleverd door PostNL
Bekijk track & trace
Retour aanmelden
Vragen over je bezorging
My role
Working as a Product Designer with the focus on product discovery, UX research with customer interviews, UX design, Visual design, prototyping and developer handover.
Team
In this project I was working closely together with a Product Manager, Data scientist, Product Analyst, Front-end Developers, Back-end Developers and stakeholders from other teams.
Timeline
21 months. Started in January 2023, release to 100% in September 2024.
Overview
The Order Detail Page is the most important page in the after sales journey. On this page there is all the information regarding this order. Buy information, delivery information, payment options, return and repair information.
The page was outdated and it had a “one size fits all” approach. While there are so many different scenarios and options possible.
When we started our Product Discovery we noticed there are a lot of possibilities on this page to prevent customer questions and therefore customer service cases.
Designs
Information blocks with delivery, payment and return information
Information based on your order status with different statuses.
Delivery block variants based on type of product, like digital products, second hand products or return deals.
Problem
The Order Detail Page is the most visited My bol page, but navigating its FAQ content can be challenging. Currently, all information is shown to every user, regardless of individual needs, making it difficult for customers to find relevant answers quickly. A more contextualized approach—tailoring information based on factors like order status—would reduce friction, allowing customers to access only what’s most relevant to them.
Opportunities
By leveraging customer context — such as order status, customer ID, product type (e.g., bol or partner), and category (electronics, books, household, etc.) — we can dynamically rearrange, highlight, or hide content on account pages. This approach enables us to predict and surface the most relevant information, allowing customers to find answers faster and with less effort, creating a personalized and seamless experience.
Insights
What do we know
40% of orders is checked at least once on the order detail page, this lead to 2mio Chatbot Billie conversations and 1 mio cases
Over 50% of order detail page visits occurs after the order was delivered
Over 75% of conversations started at the order detail page visits occurs after the order was delivered
80% of cases started after an order detail page visits occurs after the order was delivered
Most asked questions of customers:
“Where is my package? - 1,114K
"What should I do if I receive a damaged item?" - 235K
"I haven’t received all the items from my order yet" - 185K
"Why is there no VAT on my invoice?" - 96K
"How do I get my money back?" - 89K
"How can I return an item? Wrong item" - 13K
Our strategy
1
Order Detail Page has potential to reduce ‘unnecessary contact’ with customer service
2
A lot of cases have self-service potential, which can be done on the Order Detail
3
Cover 1 article of an order to provide contextualized content and solutions
Design Sprint
Touchmap
Flows going to and from the Order Detail Page. Red are the not ideal flows, green are our new proposed flows.
The idea is that customers are guided through the trouble shoot content, so that we know what type of question they might have. If we know that, we can help the customer better and guide them to the correct solution, self service action or to Billie.
UX Design
With the outline of the Order Detail Page done in UX, we can look at our current ODP and see how we can learn and improve block by block.
Experiments
RUN 1
Add FAQ blocks on Order Detail
In January 2023 we run the first experiment to learn if customers would engage with a FAQ block in between the delivery information and the details of this order.
Result: 4% of the visits included a click on 1 of the FAQs, but surprisingly this did not result in a significant lower case/visit ratio.
RUN 2
Make FAQ contextualized based on delivery status
We learned that only putting an FAQ block doesn’t solve the problem. So we came up with contextualized FAQ blocks for before delivery, after delivery and mixed.
Result: 1,33% case savings, €950k full year savings
RUN 3
Split products of same order up in separate ODP’s
We learned that contextualized information helps our customers. To make sure we can be 100% clear in the content specifically for an article, we need to split an order with multiple articles up in separate order detail pages.
Result: Variant A has slightly more clicks (+2,2%) and shows similar case/visit radio (-0,5%). This means customers don’t have a problem with 1 article per Order Detail Page.
Customer Interviews
Qualitative research if info blocks for returns and payment help
Now we can contextualize the content of the ODP for each article, we want to introduce info blocks on the page to guide customers with our main self service and trouble shoot content.
Result: 9 / 10 respondents were happy to use the content blocks if they would have questions regarding this topic. The layout is a bit chaotic, we have to improve that.
First Click Test
Which variant of the info blocks is the most clear
To learn which info block setup would work best, we set up a first click test with 3 variants. Per variant we have 100 respondents. We would prompt them with a question where to find specific information.
Result: The important self service actions (like register return, pay invoice) were found. The most simple setup was the winner. Sometimes respondents look stuck, it took them some time. We need to be clear about which info block is helpful for which question and action.
Phases
After we finished all our experiments it was time to design and deliver every improvement. We decided to change the Order Detail Page from the bottom up. This way we could improve the page with React front-end components. Each improvement was placed on production with an A/B test, so we’d learn how each block was doing.
1
We started by a new “More in this order” block when a customer had an order with multiple articles, so they are able to navigate through each article related to this order.
2
After that we added the contact block, which is our entrance to Billie. This comes in to variants, for a bol or partner article.
3
Than we added the new React FAQ block which can easily be reused on other My bol pages.
4
The big change was to add the info blocks for payment, returns and repairs (if applicable). In multiple stages we added and tested new components, for example a drawer which opens when you click on the More questions link in each info block.
5
In the last phase we changed the delivery block at the top of the ODP. This had so many variants and possible scenarios, we took our time to really design and develop this well.
Result
Control
Variant A
60.034
Customer Effort Reduction
points
1,16%
Case savings
~ € 865k FY
My role
Working as a Product Designer with the focus on product discovery, UX research with customer interviews, UX design, Visual design, prototyping and developer handover.
Team
In this project I was working closely together with a Product Manager, Data scientist, Product Analyst, Front-end Developers, Back-end Developers and stakeholders from other teams.
Timeline
21 months. Started in January 2023, release to 100% in September 2024.
Overview
The Order Detail Page is the most important page in the after sales journey. On this page there is all the information regarding this order. Buy information, delivery information, payment options, return and repair information.
The page was outdated and it had a “one size fits all” approach. While there are so many different scenarios and options possible.
When we started our Product Discovery we noticed there are a lot of possibilities on this page to prevent customer questions and therefore customer service cases.
Designs
Information blocks with delivery, payment and return information
Information based on your order status with different statuses.
Delivery block variants based on type of product, like digital products, second hand products or return deals.
Problem
The Order Detail Page is the most visited My bol page, but navigating its FAQ content can be challenging. Currently, all information is shown to every user, regardless of individual needs, making it difficult for customers to find relevant answers quickly. A more contextualized approach—tailoring information based on factors like order status—would reduce friction, allowing customers to access only what’s most relevant to them.
Opportunities
By leveraging customer context — such as order status, customer ID, product type (e.g., bol or partner), and category (electronics, books, household, etc.) — we can dynamically rearrange, highlight, or hide content on account pages. This approach enables us to predict and surface the most relevant information, allowing customers to find answers faster and with less effort, creating a personalized and seamless experience.
Insights
What do we know
40% of orders is checked at least once on the order detail page, this lead to 2mio Chatbot Billie conversations and 1 mio cases
Over 50% of order detail page visits occurs after the order was delivered
Over 75% of conversations started at the order detail page visits occurs after the order was delivered
80% of cases started after an order detail page visits occurs after the order was delivered
Most asked questions of customers:
“Where is my package? - 1,114K
"What should I do if I receive a damaged item?" - 235K
"I haven’t received all the items from my order yet" - 185K
"Why is there no VAT on my invoice?" - 96K
"How do I get my money back?" - 89K
"How can I return an item? Wrong item" - 13K
Our strategy
1
Order Detail Page has potential to reduce ‘unnecessary contact’ with customer service
2
A lot of cases have self-service potential, which can be done on the Order Detail
3
Cover 1 article of an order to provide contextualized content and solutions
Design Sprint
Touchmap
Flows going to and from the Order Detail Page. Red are the not ideal flows, green are our new proposed flows.
The idea is that customers are guided through the trouble shoot content, so that we know what type of question they might have. If we know that, we can help the customer better and guide them to the correct solution, self service action or to Billie.
UX Design
With the outline of the Order Detail Page done in UX, we can look at our current ODP and see how we can learn and improve block by block.
Experiments
RUN 1
Add FAQ blocks on Order Detail
In January 2023 we run the first experiment to learn if customers would engage with a FAQ block in between the delivery information and the details of this order.
Result: 4% of the visits included a click on 1 of the FAQs, but surprisingly this did not result in a significant lower case/visit ratio.
RUN 2
Make FAQ contextualized based on delivery status
We learned that only putting an FAQ block doesn’t solve the problem. So we came up with contextualized FAQ blocks for before delivery, after delivery and mixed.
Result: 1,33% case savings, €950k full year savings
RUN 3
Split products of same order up in separate ODP’s
We learned that contextualized information helps our customers. To make sure we can be 100% clear in the content specifically for an article, we need to split an order with multiple articles up in separate order detail pages.
Result: Variant A has slightly more clicks (+2,2%) and shows similar case/visit radio (-0,5%). This means customers don’t have a problem with 1 article per Order Detail Page.
Customer Interviews
Qualitative research if info blocks for returns and payment help
Now we can contextualize the content of the ODP for each article, we want to introduce info blocks on the page to guide customers with our main self service and trouble shoot content.
Result: 9 / 10 respondents were happy to use the content blocks if they would have questions regarding this topic. The layout is a bit chaotic, we have to improve that.
First Click Test
Which variant of the info blocks is the most clear
To learn which info block setup would work best, we set up a first click test with 3 variants. Per variant we have 100 respondents. We would prompt them with a question where to find specific information.
Result: The important self service actions (like register return, pay invoice) were found. The most simple setup was the winner. Sometimes respondents look stuck, it took them some time. We need to be clear about which info block is helpful for which question and action.
Phases
After we finished all our experiments it was time to design and deliver every improvement. We decided to change the Order Detail Page from the bottom up. This way we could improve the page with React front-end components. Each improvement was placed on production with an A/B test, so we’d learn how each block was doing.
1
We started by a new “More in this order” block when a customer had an order with multiple articles, so they are able to navigate through each article related to this order.
2
After that we added the contact block, which is our entrance to Billie. This comes in to variants, for a bol or partner article.
3
Than we added the new React FAQ block which can easily be reused on other My bol pages.
4
The big change was to add the info blocks for payment, returns and repairs (if applicable). In multiple stages we added and tested new components, for example a drawer which opens when you click on the More questions link in each info block.
5
In the last phase we changed the delivery block at the top of the ODP. This had so many variants and possible scenarios, we took our time to really design and develop this well.
Result
Control
Variant A
60.034
Customer Effort Reduction
points
1,16%
Case savings
~ € 865k FY
My role
Working as a Product Designer with the focus on product discovery, UX research with customer interviews, UX design, Visual design, prototyping and developer handover.
Team
In this project I was working closely together with a Product Manager, Data scientist, Product Analyst, Front-end Developers, Back-end Developers and stakeholders from other teams.
Timeline
21 months. Started in January 2023, release to 100% in September 2024.
Overview
The Order Detail Page is the most important page in the after sales journey. On this page there is all the information regarding this order. Buy information, delivery information, payment options, return and repair information.
The page was outdated and it had a “one size fits all” approach. While there are so many different scenarios and options possible.
When we started our Product Discovery we noticed there are a lot of possibilities on this page to prevent customer questions and therefore customer service cases.
Designs
Information blocks with delivery, payment and return information
Information based on your order status with different statuses.
Delivery block variants based on type of product, like digital products, second hand products or return deals.
Problem
The Order Detail Page is the most visited My bol page, but navigating its FAQ content can be challenging. Currently, all information is shown to every user, regardless of individual needs, making it difficult for customers to find relevant answers quickly. A more contextualized approach—tailoring information based on factors like order status—would reduce friction, allowing customers to access only what’s most relevant to them.
Opportunities
By leveraging customer context — such as order status, customer ID, product type (e.g., bol or partner), and category (electronics, books, household, etc.) — we can dynamically rearrange, highlight, or hide content on account pages. This approach enables us to predict and surface the most relevant information, allowing customers to find answers faster and with less effort, creating a personalized and seamless experience.
Insights
What do we know
40% of orders is checked at least once on the order detail page, this lead to 2mio Chatbot Billie conversations and 1 mio cases
Over 50% of order detail page visits occurs after the order was delivered
Over 75% of conversations started at the order detail page visits occurs after the order was delivered
80% of cases started after an order detail page visits occurs after the order was delivered
Most asked questions of customers:
“Where is my package? - 1,114K
"What should I do if I receive a damaged item?" - 235K
"I haven’t received all the items from my order yet" - 185K
"Why is there no VAT on my invoice?" - 96K
"How do I get my money back?" - 89K
"How can I return an item? Wrong item" - 13K
Our strategy
1
Order Detail Page has potential to reduce ‘unnecessary contact’ with customer service
2
A lot of cases have self-service potential, which can be done on the Order Detail
3
Cover 1 article of an order to provide contextualized content and solutions
Design Sprint
Touchmap
Flows going to and from the Order Detail Page. Red are the not ideal flows, green are our new proposed flows.
The idea is that customers are guided through the trouble shoot content, so that we know what type of question they might have. If we know that, we can help the customer better and guide them to the correct solution, self service action or to Billie.
UX Design
With the outline of the Order Detail Page done in UX, we can look at our current ODP and see how we can learn and improve block by block.
Experiments
RUN 1
Add FAQ blocks on Order Detail
In January 2023 we run the first experiment to learn if customers would engage with a FAQ block in between the delivery information and the details of this order.
Result: 4% of the visits included a click on 1 of the FAQs, but surprisingly this did not result in a significant lower case/visit ratio.
RUN 2
Make FAQ contextualized based on delivery status
We learned that only putting an FAQ block doesn’t solve the problem. So we came up with contextualized FAQ blocks for before delivery, after delivery and mixed.
Result: 1,33% case savings, €950k full year savings
RUN 3
Split products of same order up in separate ODP’s
We learned that contextualized information helps our customers. To make sure we can be 100% clear in the content specifically for an article, we need to split an order with multiple articles up in separate order detail pages.
Result: Variant A has slightly more clicks (+2,2%) and shows similar case/visit radio (-0,5%). This means customers don’t have a problem with 1 article per Order Detail Page.
Customer Interviews
Qualitative research if info blocks for returns and payment help
Now we can contextualize the content of the ODP for each article, we want to introduce info blocks on the page to guide customers with our main self service and trouble shoot content.
Result: 9 / 10 respondents were happy to use the content blocks if they would have questions regarding this topic. The layout is a bit chaotic, we have to improve that.
First Click Test
Which variant of the info blocks is the most clear
To learn which info block setup would work best, we set up a first click test with 3 variants. Per variant we have 100 respondents. We would prompt them with a question where to find specific information.
Result: The important self service actions (like register return, pay invoice) were found. The most simple setup was the winner. Sometimes respondents look stuck, it took them some time. We need to be clear about which info block is helpful for which question and action.
Phases
After we finished all our experiments it was time to design and deliver every improvement. We decided to change the Order Detail Page from the bottom up. This way we could improve the page with React front-end components. Each improvement was placed on production with an A/B test, so we’d learn how each block was doing.
1
We started by a new “More in this order” block when a customer had an order with multiple articles, so they are able to navigate through each article related to this order.
2
After that we added the contact block, which is our entrance to Billie. This comes in to variants, for a bol or partner article.
3
Than we added the new React FAQ block which can easily be reused on other My bol pages.
4
The big change was to add the info blocks for payment, returns and repairs (if applicable). In multiple stages we added and tested new components, for example a drawer which opens when you click on the More questions link in each info block.
5
In the last phase we changed the delivery block at the top of the ODP. This had so many variants and possible scenarios, we took our time to really design and develop this well.
Result
Control
Variant A
60.034
Customer Effort Reduction
points
1,16%
Case savings
~ € 865k FY
Copyright © 2024 - Ivo Hagoort & bol
Data and insights are confidential. Do not copy.
Back to top