Fortune 50 beverage company transitioned to the digital space and and developing B2B eCommerce platform allowing nonprofits and NGO’s to order, manage and ship food products to communities across the country.
Supported communities across the country rely on Food Banks and non-profits to provide them with nutritional food and drinks. The logistics behind involves a lot of manual labor which puts a limit on how many communities they can support.
Digital experience custom-solution e-commerce site for nonprofits, NGOs, and food distributors to browse through the inventory of meal kits, place multi-location bulk orders, and track shipping and delivery.
The consumer experience
These screens are what NGO's and non-profits interact with all the way from learning about the program placing, tracking and receiving orders.
Browse different meals and adding them to different addresses
Meal kit content
Product page that that presents the meal content. product that contains multiple products
The cart experience allow users to see which meal kit goes where
Invoices & Orders
NGO's and non-profits, view, manage and their order from here
Is where the business manage incoming orders, invoices, new customers and finances.
Managing orders end-to-end for customers means a lot of manual labor like answering calls, putting in orders, figure out shipping costs, contracts, payments, etc. The business was looking for a way to scale by handling thousands of orders and doing 90% less.
Admin backend application with the necessary tools they need to run the business. all away from managing orders, customers, contracts, to reports and financials.
It was super exciting to see school kids receiving their meal kit with the new service. And from the bussines side, the process of manual was almost completely lifted
Under the hood
How we got there
UX Proccess & stages
1. Research & Discovery
Through questionnaires and meetings to discover business, customers, and user needs.
Team collaboration on defining shippable product stages. ex: consumer facing frontend, choosing a design framework.
3. UX Planning
Through MVP’s, prioritizing features for different releases
4. Design Phase I
Consumer side MVP user journeys, technical user flows and customer profiles
5. Design Phase II
Consumer MVP low-fi wireframes to communicate design decisions, through hifi prototype including visual design
6. Design Phase III
Architecting first version design system aligned with the material design framework
7. Backend Design - Planning
Planning MVP, Data Prioritization, IA and Layout
8. Backend Design - Design
Designing primary backend screens to fully support frontend consumer side