B2B online orders 'Best Fit' system

Custom public and back-office web application

B2B online orders best-fit back-office

FoilSports manufactures and stocks high quality equipment for marine sports based on Australia. We designed and developed a B2B back-office platform to manage online orders and vendors for FoilSports, calculate best-fit delivery dates for online orders and public pages where clients can follow-up with their orders.Foil 01 – 3

1 UX/UI Director & Project Manager
1 Web Designer
1 Front-end Developer
1 Back-end Developer
UX/UI Workshop
Waterfall methodology
Agile methodology (MA)
Adobe Xd
WordPress, HTML5, CSS, JavaScript, Bootstrap, mySQL, Symfony
4 months

The Challenge

Foilsports has been improving its existing product range for customers, resulting in popularity. To manage huge amounts of purchase and sales orders and to have the most updated data concerning their stock and previsional stocks, they decided to build a proprietary system (web application) to replace their extensive Excel sheets.

The main challenge here was not only to create a user friendly admin interface with a lot of data and actions but also to connect to Tradegecko, their B2B e-commerce platform where they sale and order their products, and play with its data to calculate stocks and create forecast on upcoming months and orders.
It was a big challenge for FoilSports as well to actually change of operation platform.
This new system we call now ‘Best fit’ system is to follow up orders and stock quantity with automations on customer’s group emailing (when an order changes from a status to another for instance) and to place orders stock quantities into available slots to be ready for shipping.

In short, this shipping plan is therefore automatically calculated by our system and depends on the stock availability of the products and the purchase orders coming in.                                                                                                                                                                                                                   

Foil 01 – 2

Project approach and design

We started a project with analysis of the essence of the problems and the client’s pain points through the workshop. The client gave us a list of problems they were facing from their existing process, which was using incredibly huge excel sheets.
So first, the client wanted to get some UX solutions from us, an admin panel where they could manage all their orders and stocks and see automatic forecast on the coming months to enable them to know what kind of purchase orders they had to make, to avoid potential lack of product quantity or else, have too much stock quantity in some cases.
After we had a solid understanding of their process, problems and what our client wanted to improve, we started working on prototyping wireframes based on the information gathered through the technical workshop we conducted with the stakeholders of FoilSports and our Analyst and Senior developer team.
We presented the client the basic structure of the platform through wireframe, so as not to spend a lot of time on corrections in the UI design but most importantly to define the perimeters of features needed in the system. 

The very core of our work was to create a customizable set of various components following very precise and technical features. First of all, we built the customizable UI components library. As the design components are always adjustable to users’ needs and branding, it was crucial to create a set of rules such as colors and headers guide. Therefore we defined dashboard colors, fonts and data representations reflecting the FoilSports corporate identity. After that, we adopted this basic design guideline to every design elements.

Foilsports 01 03

Project development

Having defined the core features of the web application, we’ve started to create the connection between Tradegecko and our Best Fit system core in order to communicate every necessary data through our API and Tradegecko webhooks.
After having the whole API ready and the webhooks plugged, we’ve created the frontend interface of the Best Fit system where we could see visual results of all the transmitted data.
Now the hard part was coming, the actual ‘Best Fit’ was to be created – the system that needed to calculate the incoming orders, depending on their statuses, there specific details and stock information in order to automatically place the order at a specific shipping date, depending on the several shipping rules we’ve defined with the client.

Based on all of the above, automations through cron-jobs and custom made webhooks were created. We were then able to send automated informations to clients regarding their orders and expected delivery dates.



The summary of project

Our main goal was to introduce custom, simple and intuitive UX & UI designs for the platform, and so develop a very specific custom made Best Fit system that would automate and help drastically the work of FoilSports admins.

To achieve our goal, we’ve ‘simplify’ understood their process, located the problems, brainstormed on how to make it better, then came up with user experience solutions to finally develop the related technical solution.

By streamlining the data of purchase and sales orders, we’ve helped reducing immensely the workload of FoilSports admins to manage their stocks.
The whole admin panel is now here fo helping users understand and find information they want along with having the most updated data of stock and future stock.            

Foilsports 01 01

Have a project in mind?
Let's start your project today

Contact Us
Have a project in mind?
Let's start your project today