I was tasked into creating a B2B E-commerce platform for the brand Annie. Annie is a leading cosmetics brand established in 1990 in Athens, Greece, with major European cosmetics factories and chemical companies as partners.
/ Freelance
Annie Cosmetics
Tags: Web Design, UI/UX Design, E-Commerce
Project Duration: 3 months (Fast Paced)
My Role: UI/UX Designer
The Product
This platform had to be used for existing customers of the company, as well as new customers that would be interested in a new collaboration with the brand.
From the start, this platform would have a variety of features that would support a user’s B2B journey. Some of these unique functionalities of the digital product, are described in the following list.
All Features
User Registration Moderation
No auto-registration is allowed in the platform, each user account is created by the site admin. All info is afterwards sent to the selected user that are able to log-in.
Weight & Volumetric Info
Each product has weight, dimensions and volume info displayed in the product page, and a total weight and volume info is also contained in the cart totals as well as in the checkout page.
MOQ
A global function was implemented, to only allow order over a specific total that can be predefined by the site administrator.
Quantity Steps
Each product is either sold in different pieces depending on whether its a single product or is multiples in a carton. The user is restricted to buy specific amount of products that is predefined by the administrator and there is an automatic quantity check happening in real time, to ensure no mistaken quantities of products are added to the cart.
Price Visibility
Show prices only to logged-in users and alternatively show a text that the user should be logged in, in order to see prices and technical info for each product, and of course place an order.
Price Per Unit
Show a detailed price per unit for each product as well as the total carton price depending on the quantity selected.
Live Search
Advanced live search that shows all relative search results in real time, by just writing the first two letters.
Dynamic User Experience Journey
All updates including the add to cart, update cart and quantity product changes are happening in real time without the need for the user, to press extra buttons.
Responsive Design
The whole B2B platform is fully responsive and all visuals and functionalities are visible in the mobile version of the website.
The Homepage
During the user’s navigation in the homepage, a simple layout had to be designed with having the proper sections than contain products or categories stand out. We decided that a section with selected / top categories should be included as well as top and latest products. This way, a straight forward solution for the homepage is comprised, that always puts the product in a high priority towards the user’s eyes.
Products Page
The product page is designed to be as detailed as possible, in order to display in-depth information about each product of the brand. Apart from the basic information that can be found in all single product pages in most e-shops, a plethora of extra info are included in this platform’s products.
Ordering System
A user friendly ordering system had to be in place, for the site administrators to easily have access to analytical order and customer details. Not only that, but the customer themselves, are greeted with a plethora of information per order and per product. Specifically, when an order is placed, an analytical email is sent to the eshop administrator and the user that placed the order, with data for each product and a summary of total price, weight and volume of the order. This way both parties know the exact number of products ordered as well as volumetric info, especially useful for palette placement for the company and shipping calculation for the B2B customer.
Quantity Control
A quantity control system is in place for the system to work properly. Due to that fact that this platform is a wholesale one, some items might have to be bought in specific pieces if they are contained in a carton. For each specific product, a set of rules is applied, to restrict the user from buying the wrong amount of each product. This, quantity system control, exists on all the quantity fields for the respective product and of course for the cart page. Apart from the separate quantity control, a global minimum order quantity rule is applied, that does not allow orders that are below a specific order price total.
The Problem
Create an easy to understand way for users to calculate the total shipping cost for their B2B order.
The Solution
I created a custom system that co-exists with the content management system of the B2B platform and calculates the total weight and volume of the products in cart. That info is displayed in the cart page and during the checkout process. Also, necessary info like the price per unit is also viewable during the whole user’s buying journey
User Testing
In order to ensure that all visual elements were in place as well as all the backend code was working correctly, multiple testing scenarios were implemented. Especially when talking about the backend complex computations occurring for the volumetric information and the real time cart & checkout system, I had to have all the use cases covered. For an extra step of safety, more test users were involved in this process to make sure that all is implemented and visualized as it should.