Used Goods Marketplace Boo!ua •

The point° team created a new interface for the marketplace, worked on the mark-up, and optimized the front-end workflow on the project.

  • TypeMarketplace
  • ServicesDesign, Front-end
  • GeographyUkraine🇺🇦
  • TimeframeApril 2019 — August 2020

BOO!UA is a marketplace where you can buy used goods for any request: smartphones, laptops, tools, home appliances, sports equipment, and jewelry.

The company sees its mission in creating a civilized market for used goods, excluding fraud and negative background from it.

Project in numbers

  • 0KAvg. Number of Monthly Users
  • 0%Revenue Growth
  • 0%Conversion Growth

Technologies and Tools

  • Bitrix CMS
  • Google Analytics
  • Hotjar
  • TrackJS
  • Webpack

We were given the task to conduct an effective redesign, rethink key pages, and user scenarios for the website that was outdated and did not correspond with the business objectives.

Our cooperation began with an expert analysis of the interface, and over time the list of tasks was expanded: we’ve prepared UI mockups, worked on mark-up and optimization of the entire front-end.

The tasks were handled together with the in-house management and back-end team of BOO!UA.

KPI growth indicators were assigned to the change of each page: to achieve our goals, we asked a lot of questions, used data from Google Analytics, and studied heatmaps and funnels in Hotjar.

The checkout that fits the business.

Functionally the checkout did not correspond with the business logic of the marketplace, which means that its modernization was the most important factor for the project’s growth.

We formed largest-level tasks and set to work:

  • implement the logic of purchasing a basket of good from different sellers through one window;
  • build a logical order of steps;
  • supplement the interface elements with missing information;
  • optimize the behavior of interactive elements.

A unique header and footer were created for the checkout pages, and the checkout process itself was built within the three steps: so as to minimize the number of actions from the user.

Instead of a cumbersome shopping cart page, a compact and functional pop-up was created.

Checkout first step
Checkout second step
Success page

A new format to represent the product.

There are product offer configurations which required to be classified and implemented in a flexible, adaptable template.

The analysis of user behavior and new business tasks made it possible to identify a number of tasks for creating new functionality on model pages, including:

  • filtering and sorting not only by model parameters but also by the characteristics of specific offers;
  • different formats of offers listing with the adapted layout for different product categories;
  • model subscription to follow the dynamics of the number of offers and their cost;
  • useful blocks of linking to substitute models.

Each characteristic and product filter was brought to the optimal visual format: we removed some of them, simplified the rest, prioritized the order of their display. As a result, there is a significant increase in the readability of the individual offer card.

We have created a new page for a separate product offer. The benefit of such a solution lies in two dimensions: it became convenient for the user to view and save specific offers, and the site structure became wider, which made it possible to attract additional organic traffic.

Offers listing
Single offer
Jewlery offer

The shortest path to the product.

We offered to reduce the complex and heterogeneous catalog to two templates: a subcategory catalog page and a product subcategory page.

The structure of a website catalog is subject to many factors — SEO, merchandise experts, integration with external systems, suppliers, etc. It required optimization based on a seemingly obvious principle — the shorter the path to the product, the better.

When the problems with unnecessary generalizations and artificiality in the structure were solved, we focused on the product category pages:

  • thoughtful and user-friendly design for desktop and mobile;
  • new filter groups;
  • each filter was supplemented with a counter of the number of product offers;
  • a subscription to new arrivals by a group of filters was implemented;
  • added marketing capture and helpful suggestions sections.

The anatomy and structure of the product card has been optimized: it received a large photo, a set of key characteristics, and a counter of product offers in different states.

Personal entrance point.

There was more structure on the home page than the inexpensive goods users came for. We began to work on optimization by dividing all users into three groups:

  • authorized;
  • not authorized, the first visit;
  • unauthorized, returning visitor.

Clustering added more context to the page structure. An authorized user should obviously find more use from viewing personalized collections of goods and categories. And vice versa – at the first visit, it’s crucial to find out where you are and what value you can get here.

Having information about previously viewed or purchased products, categories, and trends of interest within the site, we form unique product selections that meet the needs of a particular user.

Elaboration of universal components.

We proposed to remove visual rubbish from the header, thus highlighting the most important navigation elements – menus, search, links to info pages, login buttons, and shopping cart.

On mobile, it was important to offer the user an obvious search option, as well as reduce the number of menus to one (yes, there were several).

We paid special attention to search and menus on desktop and mobile: we set ourselves the goal of creating end-to-end, easily accessible, and universal navigation that can withstand the broadest structure with a tendency to an increase in the number of product categories.

The footer was made in such a way that it covered the structure of information pages as widely as possible and displayed ways of contacting support and links to the company’s social networks.

A big cleaning of the front-end.

Design ideas work ineffectively when a front-end job is executed poorly and formally. To avoid such moments, we have proposed a whole range of measures to optimize the interaction between front-end and back-end teams, as well as the process and approach to front-end development.

In addition to the mark-up of new pages, our team has created a Webpack config designed to analyze, minimize, and optimize CSS and JS files on the project. We made a lot of effort to modernize code, remove duplicates and unused parts of it.

We’ve regularly worked on bugfix in the TrackJS service, and also optimized the loading time and other page parameters to fit the standards of Google Lighthouse v6 better.

The guys showed flexibility, perfectly fit into the workflow of our team, and successfully removed a load of design and front-end of our team.