e-Ordering

The solution for Wholesale business or B2B.

Client
Useful food is a snack manufacturer that has existed in Thai society for over 35 years. As Useful food business has remained firmly, so has their need for an effective software to accomplish their order and stock management.

The Opportunity
Our client (Useful food) asked us to design the new platform to replace the legacy system and improve the user experience for admin, sale and dealer.

Solution
The online platform to ensure the admin can manage stock, inventory and order (PO/SO) in a short period of time.

Useful food products

Team: Product Owner, Business Analyst, UX/UI Designer

My role
I’m working as a UX/UI Designer and supported the product owner, business analyst and developer team in the agile cycle.

Project duration: 6 Months

Tools: Figma, Miro

My Key Impact

Built and delivered the web core experience, from user onboarding to managing order and view the summary order report
Design base on the user mental model and B2B business logic

Design

Web and App UX/UI design
Component Library
User Flow

Wireframe
Interaction design

Design Process

Discover

Even though our design brief was to design the new platform, we wanted to dig a little deeper by looking at:

their current work processes
pain points & joy

Who are our users?

Stakeholder

Admin

Sale

Van Sale

Dealer/Grocery store

Current process

In the example scenarios, everything depends on the admin 😢

Even though the admin is the center of the system, It takes a lot of time to finish the job and execute the summary report to the stakeholder.

Improve work process

Our team goal was to create a simple user-centered design application that minimizes the user's workload when purchasing orders, manage stock and inventory.

I create a quick mind mapping to visualize data and used it to communicate with my team.

Designing Behavior Flow

Base on user behavior and the information. The user always orders a large quantity of
a product at once. So, we decided to display the product without a price on the landing page. The price will appear when the user selects the product size, quantity and type of package.

Wireframe and UI Design

Before start designing, I discussed with the developer, so we decided to use the ant design framework to implement this project.

I built a design library in Figma, All designers can access any design component. As our visual language evolved, this helped to standardize our design system.

Because the client CI color is orange. So I decided to set orange as the primary color. I used the device font to make the user read the clear information.