Bookline

UX/UI
Redesigning the interface and user experience of Hungary's most popular online book store.
Scope

 

Bookline.hu is the most popular online bookstore of Hungary. They had a complex and a bit old fashioned e-commerce site they wanted to modernise both visually and usability wise. Besides the creating a more modern, clean and responsive interface, they needed help with finding and correcting some of the main painpoints their users had while browsing and purchasing products on the website. They also had some complaints coming from the customers regarding some issues in the purchase process which we could use as a starting point for our discovery.

Team

 

The project team consisted of a researcher and me in the role of UX/UI designer and project lead. We had regular meetings with a project manager from the client's side and the stakeholders and owners of the bookstore.

Discovery

 

We started the project with a long kick-off workshop involving the client, exploring the main pain-points, talking through customer complaints, business strategy goals, and general expectations. We had ideation sessions as well, to gather insights and possible solutions for some of the main issues.

With the help of our UX researcher, we delivered several userinterviews and usertests with the target audience. We also collected feedback from the client's customer service, to see what are the most common complaints. We discovered that users had the most confusion about the category filtering system and the purchase process.

The bookstore due to the good prices it offers is frequently used both by young students and elderly people so we needed to create an interface that was appropriate and easy to use for a wide age range.

Also as the website relies heavily on income from ad placements, the original website was pretty jammed and overpacked with colourful ads, that made it confusing for users. Leaving a lot of place for optional advertisements and banners while keeping the interface clean was also a bit challenging.

We started by building a low resolution clickable prototype for desktop and mobile.
We created a cleaner book listing page, a more minimalistic product page, changed the category filtering system and created a different checkout flow.

ecommerce_szures_screenshot-bookline.hu
Old verions
New version
Category filters

 

The webstore has a complex multilevel category system. Category filters on the original webpage were both arranged in separate permanent panel on the left side, so users needed to scroll down to the bottom of the page to see all filters and click ok to apply them. We suggested a dropdown + label system positioned below the header, where optional filters are also available. This way everything is in one place, easily reachable from any parts of the site arranged in a more logical way.

Product page

 

The original product page was a bit confusing and crowded, and challenging to deal with. There were many adblocks and product suggestions that we had to keep, a lot of info about the product itself, reviews, comments from users, etc. We suggested to create a tighter and more clean structure for the products details part keeping only one specific ad in this area. We added a product category slider below the product cover view, so the user could see if the same work is available in other formats (e-book, film, etc.). Product suggestions, and additional ads are below this block. Only certain limited part of the description is shown by default, to keep the product block tight, most of remaining long descriptions or infos can be viewed in modals.​

New version
Old verions
Checkout flow

There were several pain point in the previous checkout process. Users could only see the exact content of their cart if they went to their cart page. The steps of the checkout process were separated in a not too logical way in a weird accordion like element on the site which was confusing for most of the users.

 

We suggested a dropdown cart panel which can be opened directly from the header from any part of the site. We also created a simple four step checkout userflow, which made it clear and trackable for the user to see where they are in the process.

The shipping address chooser was rearranged, filtering features and an integrated map was also added in order to list only the most relevant search results for the users instead of overwhelming them with a bunch of unnecessary options.

 

We also suggested to add a summary panel on the right side on the checkout screens, where the shopping list items, shipping fees, coupon points, final sum etc are refreshed each time the user chooses different options.

Final Design & UI Kit

After delivering several user tests on the low resolution prototype, finding and addressing most of the pain points, we finalised the wireframe and went on with the final UI, based on some look&feel screens we created earlier. 

All of the main parts of the website (main pages, listing pages, products page, category filtering, check out flow) were designed for desktop, tablet and mobile views, as the platform needs to be responsive. As development was done by another company I created a detailed UI kit with notes and documentation on how to implement the screens and the design assets. All of the completed screens and UI kit have been handed over in Zeplin for development.