B2B E-commerce Platform
Bata B2Biz
Stock & order management ecosystem for Bata Pakistan — a B2B web portal and mobile app for live stock, assortment ordering and delivery tracking.
Client — Bata Pakistan (I&D Department) · Skynet Solutionz
Project Overview
B2Biz is the direct-to-retail side of Bata's Stock & Order Management System. I designed the retailer-facing web portal and mobile app: live stock visibility, assortment (pack-code) based ordering, deposit-slip payments and order tracking — all on one brand-consistent design language.
- Role
- UI/UX Designer
- Timeline
- 3 Weeks
- Platform
- Web App · iOS · Android
- Industry
- Retail / Footwear B2B
- Tools
- Figma, Design Systems, Prototyping, User Research
- Platforms
- Web Portal · iOS · Android
- Channels
- Direct Retail · Wholesale · Modern Retail
The Problem
Retailers ordered through a manual Excel sheet matched against a once-a-day stock file, so nobody could trust what was actually available.
- No live stock visibility before placing an order
- Pack-based ordering forced into a pair-based sheet
- Constant overselling and manual payment follow-ups
- Order and dispatch status only available by phone
Project Goals
Give retailers a self-serve interface to see real available-to-sell stock, order pack-wise without overselling, submit deposit slips and track every order status — while keeping the UI simple enough for shop owners on a phone.
- 01
Show real available-to-sell stock before ordering
- 02
Make assortment (pack) ordering the default, not a workaround
- 03
Give deposit-slip payments clear, trackable states
- 04
Keep the interface simple enough for a shop owner on a phone
Research & Discovery
- Reviewed the existing Excel order sheet and daily stock position file with the I&D team
- Shop owners order by assortment packs, not single pairs — quantity UI had to be pack-based
- Payments are offline bank deposits, so slip upload and verification states needed clear feedback
- Users needed article code search as much as product names
User Flow
- Register
- Browse catalog
- Product detail
- Cart (packs)
- Place order
- Upload deposit slip
- Track order
- Invoice
From Wireframes to Final UI
Wireframes explored a sidebar-driven portal for desktop and a bottom-tab app with a central Quick Order action. Cart layouts were tested for pack vs pair clarity before locking the pack-first pattern.
Low Fidelity
Structure first
Grey-box layouts to settle hierarchy, navigation and the order of information before any styling.
High Fidelity
Final UI
Typography, colour, components and states applied on top of the approved structure.
UI Design
Mobile Applications
Native Android and iOS screens carrying the same experience to users on the move.
Website
A light, high-clarity system built on the Bata red brand mark: white surfaces, red accents for price and primary actions, dotted attribute chips, colour-coded stock and status badges, and dense but readable data blocks for pack, pair and totals.
Building a Scalable Design System
I created a consistent design system on the Bata brand mark so the portal and the app read as one product.
Colour
- Bata red primary action
- White data surfaces
- Stock state greens / ambers / reds
- Neutral greys
Typography
- Tabular numerals for pricing
- Compact data labels
- Clear heading scale
Components
- Pack quantity stepper
- Stock badges
- Product cards
- Cart line items
- Status timeline
- Slip upload field
Patterns
- Sidebar portal shell
- Bottom-tab app shell
- Sticky order summary
- 8pt spacing grid
Platform Modules
Stock Visibility
- Live available-to-sell quantity per article
- In stock, low stock and out of stock states
- Search by article code, name or category
- Filters for category, size and availability
Ordering
- Assortment / pack-code based quantity control
- Real-time stock validation in cart
- Channel-specific pricing and volume discounts
- Multiple delivery addresses and order notes
Payments
- Deposit slip upload from camera or gallery
- Bank, amount, date and reference entry
- Pending, confirmed and rejected states with reason
- Payment history and outstanding balance
Tracking & Records
- Visual status timeline from placed to delivered
- Order history with reorder in one tap
- Invoice and delivery note download
- Push, SMS and email status notifications
Key Design Decisions
01Pack-first Quantity
Quantity controls count packs and derive pairs automatically, matching how retailers actually buy.
02Stock Validation in the UI
Availability is checked in the cart so overselling is blocked before an order is placed.
03Payment States Made Explicit
Pending, confirmed and rejected slips each carry reasons, removing follow-up calls.
Outcome
The design replaced the manual Excel workflow with a single ordering surface: retailers see real stock before ordering, overselling is prevented at the UI level, and payment and dispatch status is visible without phone follow-ups.
What I Learned
This project showed me how much of B2B usability lives in the units people already think in. Designing around packs instead of pairs removed almost all the ordering errors on its own.
Interactive Prototype
An interactive prototype covered registration, catalog browsing, pack-based cart, checkout, deposit-slip upload and order tracking across both web and mobile breakpoints.
Explore the final experienceView Prototype