Interface design for Ambiz

January 2017—June 2017 @ Saint Petersburg

001.jpg
 

Overview

Ambiz is one of the oldest office supply companies in Moscow working since 1995. I used to work with them before on their previous versions of the website.

In 2017 they approached me and asked to re-think and re-design an online store and an internal system for their B2B clients that allows them to handle office supply expenses, tune the goods’ lists for the specific needs and set permissions for the purchasers.

A specific request from the client was to develop a restrained colour based on shades of Columbia/Marian blue with a touch of light tangerine to create a contrasting accent for all the crucial actions.

 
 

The front page and the catalogue

From the feedback and the research it became clear that all the main entry points for the user should be accessible at all times. I achieved that by placing them into the page header and designed a “sticky” version of it.

It collapses into the icons depending on the width of the display end expand an additional panel for the logged users.

 
 

The front page

 

The catalogue

 

The product page

The product itself has little data — a title, a description and a few images. However, a product can have a few vendor codes, which differ depending on sizes, colours and so on and should be accessible for ordering right from one page.

 
024.png
 

Rich sticky header

From the feedback and the research it became clear that all the main entry points for the user should be accessible at all times. I achieved that by placing them into the page header and designed a “sticky” version of it.

It collapses into the icons depending on the width of the display end expand an additional panel for the logged users.

 
 
 
 

The behaviour for all screen sizes

006.png
 

the cart

My technological and engineering inspiration behind designing the cart was that of Amazon’s. Along with that in mind, I carefully researched all the latest e-commerce trends from the reports by NN/Group.

The result is a powerful system within a system. The cart allows user to buy directly inside of it — for all those cases where a customer already has the vendor codes, search for the goods and even order what’s not in stock.

Here are some action and tooltips.

 
 

More actions with the goods

 

Data import and tagged goods

 

Checkout

On checkout user fills either the default or custom fields. Since the system works for authorised clients only, first, the checkout can be customised, second, there’s no need to enter credit card data.

 
 

The empty cart

Marketing trickery — an empty cart should never be empty. the system should offer customer a way of finding ones, show the popular categories and current sales, season goods or new arrivals.

 
Корзина без товаров _ Нет регистрации.png
 

Managing orders

 

Handling budgets, users and roles with permissions

My goal here was to make it as clear as possible for the user, considering the amount of data travelling within the system — budget rules, permissions, delivery addresses and approved lists — it all ends up at creating a suitable user role.

 
 

Creating templates for registration

 

Managing employees

 

Creating a role

This functionality is one of the most distinctive ones among the competitors, so I handle it well, allowing to create both pre-defined and custom roles.

 
 

Cost-centers

It’s a group of users which fall under the same budget and permissions.

 

Budget systems

A way of restraining expenses by differentiating between roles and goods’ lists.

 

products’ lists

One of the most important features is creating and managing lists of products. This way a company can handle their expenses quite well by restraining different users or groups of users from spending too much money.

There are three ways to build a list: by choosing goods from the catalog, by uploading a CSV file and simply by pasting the data from the buffer.

 
 

managing company

Some simple interfaces for managing company’s requisites, delivery addresses and defaults values for cases like adding an employee

 
 

static pages

Along with the interfaces I designed static pages for the corporate website. Some are shown below: About company, Invitation to participate in a tender and Contacts, in respective order.