Web Portal & Mobile App Design
Bata B2Biz
- Year
- 2026
- My Role
- UI/UX Designer
- Tools
- Figma, Design Systems, Prototyping, User Research
- Platforms
- Web Portal · iOS · Android
- Channels
- Direct Retail · Wholesale · Modern Retail
Client: Bata Pakistan (I&D Department) · Skynet Solutionz
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.
Problem
Orders were handled in an Excel sales-order sheet manually matched against a once-a-day warehouse stock file. Retailers had no visibility of live stock, ordering was error-prone, and overselling and payment follow-ups were constant.
Goal
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.
Research
- 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
Wireframes
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.
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.
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
Prototype
An interactive prototype covered registration, catalog browsing, pack-based cart, checkout, deposit-slip upload and order tracking across both web and mobile breakpoints.
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.