Dissecting Bol.com’s skeleton
Ironhack’s Prework: Challenge 2 Wireframing
This document is only being used for educational purposes. The task is to create a wireframe prototype version of the user journey of bol.com with the sole purpose to deliver a simple representation of what the user flow of buying a product in “the” best online store in the Netherlands is like.
Why Bol.com
As stated above in the intro, one of the main reasons I decided for bol.com is mainly due to the really simple and easy user experience they have within their application. It is intuitive, clear, and you can seamlessly buy a product in just a couple of steps.
We all know that amazon is Royal when it comes to online shopping, but concerning user experience, IA and UI, from my POV this dutch online platform living already for more than 20y is also worth showcase.
Bol.com started in 1999 as an online bookstore and grew to become the largest online retail tech platform in the Benelux area. Some key highlights of bol.com are:
(“Some” information below has been extracted from bol.com’s site)
- Over 10 million customers in the Netherlands and Belgium
- Over 2,5 million visits per day at their platform
- ~21,5 million products in store
- Over 4000 bol.com pick-up points in the Netherlands & Belgium
- Over 20.000 partners who sell on their platform
- 1,900 bol.commers (users)
The focus of this project
For the wireframe prototype I have used FIGMA to showcase the most common flow journey within bol.com for a simple user that just wants to buy a specific product.
There are obviously many other flows adjacent to the ones within my scope but for the sake of the focus of this project I’ll keep it to the above shown 5 steps, which are the minimum and essential ones (“happy paths”).
It is important to understand that this is a low-fidelity wireframe prototype with the sole intention to focus on the UX and Information Architecture and not on details such as colours, logos, imagery and heavy motion interactions.
The Wireframe Prototype (Process)
- 1st Step (Inventorying)
I started by inventorying the most common UI elements of the intended scoped user flow:
As you can observe, the most common UI patterns are mostly CTA’s (Call to Actions), Type Ahead Search Inputs, Bottom Navigation Menu, Category / Filter Boxes, Star Ratings, Main Headings and Prices.
- 2nd Step (Building Blocks)
I went into Figma, downloaded a very commonly used UI Wireframe Kit for low-fi prototypes (mainly to save time) and added those into my wireframe prototype project.
Not every kit offers everything you need, or the exact components you will use, so I went along and created my own component library based on that UI Wireframe Kit and adjusted some accordingly (when needed).
As you’re able to view above, most of the common UI patterns are in there. Text, CTA’s, most used Icons, Bottom Navigation, etc..
Cool thing also about FIGMA, is that any component you create it gets immediately indexed in your own local component library and you can quickly search for the component you need and drag and drop into a frame. Simple, right?
- 3rd Step (Wireframing & Prototyping)
Components are ready, I have all the building blocks. Let’s get started with real wireframing prototyping 🚀
Here’s the interactive prototype result.
Task Analysis
- Step 1 (HP, Homepage):
Anyone that opens bol.com’s app for the first time will land within the homepage. Some call it a landing page.
Within, we’ll be able to view featured products (hero images), featured categories, daily offers with really good and catchy prices and at the bottom of every screen / frame, the sticky bottom navigation. Essential for user navigation and recognition of where the user is within the flow.
Most importantly in the homepage we’ll focus on what “potentially” users interact with most. The product search input.
By tapping it, writing anything (eg. iPhone 11) and searching you’ll land on the Product Listing Page.
- Step 2 (PLP, Product Listing Page):
On the Product Listing Page we’ll find a couple of actions we might want to take. Either go back to the homepage, search again, filtering options and most importantly scrolling the demanded results.
By clicking in filtering options we open an overlay (step 3). Essential to refine our search.
By clicking in one of the products (within the results) we navigate to the Product Detail Page (step 4).
- Step 3 (Filtering Overlay):
As mentioned previously within this view we will be able to refine and adjust available options to find our best match within the PLP’s.
- Step 4 (PDP, Product Detail Page):
One of the most important pages of the whole journey of a user. Specially when we’re dealing with eCom businesses.
In this view we will find all the details related to the product you just selected previously. Specs, the imagery (highly important as they tend to sell more than text), availability options, ratings and related products.
We’ll also find the biggest CTA ever. The Add to Cart Button. It is true that when buying a product you need a user to complete the whole journey flow. Searching, Filtering, Buy / Add to cart and finally Checkout.
But the moment a user adds a product into the Cart that’s already a big win. That means that the engagement worked, the story of the product worked, the UX / UI / Copy actually made it happen alongside many other details.
Now it is up for the next step. Add to Cart and Checkout (step 5).
- Step 5 (CART):
Within the CART we find ourselves with options to confirm the amount of products we need, to get an overview on the totals and shipping costs and payment possibilities before moving into the Checkout page. Navigating to it only happens when the user hits the go to payment CTA.
Key takeaways from this project
Generating quick ideas through quick wireframe prototypes is a great a way to show to any stakeholder (design, business, tech, management, etc.) the possibilities of the next future product we want to build.
When mocking up bol.com I noticed that their UI and Viewports are so clean and simple that putting up a prototype was as quick as building the components in FIGMA.
But most importantly, I only confirmed that actually buying a product is as quick as doing 3/4 clicks. And that, bol.com excels.
Hope you like the article. Any feedback is very much well appreciated.
