E-commerce website for the food distributor

Description

The client distributes high quality chef products and is focused on serving restaurants, hotels, catering and gourmet shops in North America. Our task was to launch, integrate and further develop an online store with a focus on convenient everyday use by B2B customers.

Roles

UI & UX Designer, Frontend Developer

Responsibilities

Requirements Gathering, Prototyping, UI/UX Design, Frontend Development

Visit Site

Currently maintained by the client

E-commerce website for the food distributor

My role was to design a user interface focused on B2B customers, organize the process of delivering new features from the design perspective, and developing HTML templates.

Team

3 UI/UX Designers + HTML Coders
5 Backend Developers
2 Business Analysts
Project Manager

Persona Research

Despite the fact that the site can be used by both B2B and B2C clients, we focus on the B2B sector and design the interface based on the flow of use by restaurant chefs and other management personnel.

Richard

Chef

38 years old · male · associate degree

Common Information

Professional in his field with extensive experience and experience. He makes decisions related to the purchase of products.

Experience level & usage context

He uses the product quite often, so he interacts with the interface without any particular difficulties. Can use the product in different situations and from different devices.

Goals and concerns

Easy to find and order products, see all the necessary product information before ordering. Easily navigate through orders and product lists.

Design Process

In the process of developing and further support in order to speed up and simplify the design process, we decided to implement the design-changes directly in HTML templates. As a basis for frontend implementation is used Bootstrap with various modifications, which makes this process fast in implementation and further support.

Average process of implementing new feature starting from the client's request and ending with the working functionality

Request 🙋 → Research → Visualization → Approval → HTML implementation → Website implementation → Approval → Release 🚀

Simplified process of implementation

Request 🙋 → Research → HTML implementation → Approval → Website implementation → Approval → Release 🚀

Screens

Home Page

The main page is not important, with its help, the user usualy navigates to the more important pages: catalog, account, product lists and orders. From the main functionality on it is only a search form and promotional blocks.

Sub-brands in the header

Large search bar

Not an important page

Promos