ilike Wholsale Ordering

Description

This project was born in response to the need for streamlining the wholesale order process for customers as much as possible.

While it was not a mobile or desktop application per se, it used modern JavaScript techniques to behave like an application. Complete page reloads were avoided, for example.

My client, wanted an online shop that focuses on the user experience of their wholesale customers, rather than serving retail customers through this online ordering system.

First of all, my client and I had to identify the key features of such a solution.

Filtering products

Below, it is explained how the product search feature was designed and implemented. Additionally, a simplified main navigation menu played a key role in helping customers find their way around quickly.

1. Partial text matches both product and category names simultaneously. This behavior enables users to find items across different categories without having to know which category a given product belongs to.
2. There is no “Toner” in the name of the product, but it will still appear when filtering if its category name matches.
3. The navigation main menu is intentionally short. Subpages of a top level page can be accessed directly from the top page itself, helping customers find their way around quickly.

Browsing products

The next presentation explains how customers could quickly browse the entire product catalog with minimal effort.

1. Each product has its own product page, which can be displayed in a standard browser window. This allows each product to be referenced by its URL.
2. Products have different variants. The most important variants are listed at the beginning, and the presence of less important ones are indicated with “more…” appended.
3. Tapping the “Add” button opens a modal window displaying the complete product page, enabling the customer to quickly add product variants to the cart.
4. Important statuses of each product variant are indicated by icons in the list.
5. A predefined number of products can be listed on one page. 15 and 20 are ideal for mobile phones, while 40 is ideal for tablets and desktops.
6. The “↓ bottom” button allows the user to jump directly to the paginator when skipping the current page of the list is necessary.

Adding products to cart

Next, we will explain how customers were quickly able to configure and add items to their cart.

1. The content of the product modal is identical to the content of the individual product page, with the only difference being the location where this content is displayed.
2. A dropdown is the simplest interface element to pick the required variant from a large number of possibilities.
3. Options for each variant appear after the variant has been selected.

Cart operations

Here comes the explanation of the not-so-common but very user-friendly features of the cart.

1. Being able to reorder the cart is tremendously helpful when a wholesale customer has a high number of different items in it.
2. The customer must explicitly tap the "trash" button, and afterwards, they need to confirm the deletion. Accordingly, it is not allowed to set the item number to zero.
3. Editing a cart item is possible in a modal window that pops up upon tapping the edit button.
4. A different variant can be selected when editing the item. If such a variant is already in the cart, then the system will merge them.