End-to-End Product Design

Smart Vending Ecosystem
Designing a Connected Experience for
Machine Operations & Instant Purchases

Built an end-to-end vending ecosystem combining an operations portal and a QR-based consumer app—streamlining machine management while enabling fast, contactless purchases.

Web + Mobile App
Platform
B2B + B2C
Audience
End-to-End
Ownership
Senior UI/UX Designer
Role

Context & Challenge

The product serves two core audiences who needed a unified, real-time ecosystem to replace fragmented, manual workflows.

Operators (B2B): Manage vending machines, inventory, and performance

Consumers (B2C): Purchase items directly from machines via mobile

The existing experience lacked real-time visibility, had fragmented workflows, and created friction in the purchase journey.

Challenge

No centralized system to monitor machine health or stock

Delayed response to downtime and low inventory

Traditional vending UX limited by physical interfaces

Missed revenue due to poor discoverability and payment friction

A Unified Ecosystem

Design a connected system that serves both operators and consumers seamlessly.

Improves operational efficiency and real-time visibility

Enables seamless, mobile-first purchasing

Increases revenue through better conversion and uptime

Analytics and operations dashboard

"Operators lack real-time control over machine performance, while users face friction in discovering and purchasing products—resulting in lost revenue and poor experience on both sides."

Senior UI/UX Designer

End-to-end ownership across the entire product ecosystem—from initial research through final delivery.

Senior UI/UX Designer
End-to-End Ownership

Led product design across web portal + mobile app

Drove research, UX strategy, and system design

Collaborated with product, engineering, and business teams

Defined UX metrics and success benchmarks

Design collaboration and team work

Discovery & Understanding

Understanding both operator workflows and consumer behaviour was crucial to designing an effective connected system.

Research Methods

Stakeholder Interviews
Gathered business requirements and technical feasibility from product and engineering teams across both B2B and B2C streams.
Operator Workflow Analysis
Mapped the step-by-step process of restocking, maintenance, machine fault handling, and sales collection.
User Journey Mapping
Traced the complete consumer purchase flow—from machine discovery to product dispense confirmation.
Competitive Benchmarking
Analyzed smart retail kiosks and IoT management platforms to identify gaps and industry standards.

Key Insights

1

Reactive Operations → Lost Revenue. Operators only discovered issues after machines stopped generating sales. No early warning system existed.

2

Inventory Blind Spots. No real-time stock visibility led to frequent out-of-stock scenarios and lost sales opportunities.

3

Friction in Purchase Flow. Physical UI + multiple payment steps caused drop-offs, especially among mobile-first younger users.

4

Lack of Data Utilization. Sales data existed but wasn't actionable, centralized, or surfaced to decision-makers in time.

"Operators lack real-time control over machine performance, while users face friction in discovering and purchasing products—resulting in lost revenue and poor experience on both sides."

A Connected Ecosystem

I designed a two-part system serving both B2B operators and B2C consumers through a unified data layer.

🖥️
B2B

Operations Portal

A centralized dashboard to manage all vending machines across all locations.

🔔
Real-time Alerts

Downtime and low-stock notifications for proactive action before revenue is impacted.

📦
Inventory Management

Track stock levels across all machines and optimize replenishment routes.

📊
Sales Analytics

Monitor performance across machines and locations with glanceable charts.

👤
User Insights

Access app user data and behavior trends to inform product decisions.

📱
B2C

QR-Based Consumer App

A frictionless mobile purchase experience that eliminates hardware dependency.

📷
Scan & Discover

Each machine has a unique QR code → instantly loads live inventory with zero friction.

🛒
Seamless Selection

Browse products with clear pricing, availability indicators, and rich visuals.

💳
Instant Payment

1-tap UPI/Wallet checkout eliminates physical interaction entirely.

Faster Decision-Making

Reduced cognitive load vs traditional vending UI. From 5+ steps → 2–3 steps.

Principles Behind the Design

1

Shift from Reactive → Proactive Operations

Designed alert systems that surface issues before revenue is impacted. Operators receive notifications proactively—not reactively after a machine goes down.

2

Remove Hardware Constraints

Moved the purchase experience from machine UI to mobile, enabling:

  • Richer product display with images and descriptions
  • Faster, more intuitive navigation
  • Scalable UX improvements without hardware changes
3

Real-Time System Thinking

Ensured both operator portal and consumer app are connected through live data sync. A stock change or machine fault is reflected instantly across both surfaces.

4

Simplified High-Frequency Actions

Identified the most repeated tasks and reduced their friction to the minimum:

  • Restocking decisions surfaced with one-click context
  • Quick purchase completion in under 45 seconds

Design Documentation

A comprehensive set of UX artifacts demonstrating the depth of research, strategy, and craft behind the ecosystem.

QR Purchase Journey (Improved Flow)

📷 Scan QR Code
Auto-load Machine Inventory
0 friction · Live data
Quick Select Product
Pre-loaded UI + images
1-Tap Pay
UPI / Wallet
✅ Instant Confirmation + Dispense
What We Improved

Removed machine interaction dependency

Reduced steps from 5+ → 2–3

Enabled zero onboarding purchase

Before vs After (Portal)

Before

Check Machine Manually
Identify Issue
Contact Support
Fix

⚠ Hours to resolve · Reactive system

After

Dashboard Alert
Issue Identified
Action Taken
Status Update

✅ Minutes to resolve · Proactive system

Portal Sitemap

📊 Dashboard
├── Machine Overview
├── Alerts
│    ├── Downtime
│    └── Low Stock
├── Inventory
├── Sales Analytics
├── Users
└── Settings
Senior Insight
Designed role-based IA for operators vs admins—different access levels, different information hierarchy.
Priority Principle
High-frequency actions (alerts, stock levels) are placed at the top level—never more than 2 clicks away from any screen.

Low-Fidelity Layouts

A. Operator Dashboard

Machines Active
24
Alerts
3
Revenue Today
₹8.2K
⚠ High Priority Alerts
⚠ Machine #12 — Offline
⚠ Low Stock — Snacks Bay 3
Machine List
IDStatusStockRevenueAction
#12● Down12%₹0Fix
#08● Active78%₹1.2KView
#03● Low22%₹640Restock

B. Consumer App

📍 Machine A3 — Level 2 Cafeteria

Select a product

🍟
Chips
₹20
🥤
Soda
₹30
🍫
Chocolate
₹40
💧
Water
₹15
Selected: Chocolate
₹40
Pay Now →

KPI Comparison

B. Before vs After KPIs

Metric Before After
Conversion Rate ~45% 65–75%
Downtime Response Hours Minutes
Stock Availability 60–65% 85–90%
Purchase Time ~2 mins < 45 sec

A. Visual Progress

Before
After
Conversion Rate
45%
70%
Stock Availability
62%
88%

Conceptual Comparison

Before

Cluttered machine UI with limited visibility

Limited product display — text only, no images

Slow, multi-button navigation on small screen

Cash-only or cumbersome card reader payment

No purchase history or loyalty mechanism

After

Mobile-first experience on user's own device

Visual product grid with images, ratings & stock status

Instant navigation with thumb-friendly layout

1-tap UPI / Wallet payment in under 5 seconds

Purchase history, offers, and repeat-buy shortcuts

How Everything Connects

🏧 Vending Machine
📱 QR Code
📱 Mobile App
☁️ Backend System
🖥️ Operator Dashboard
Real-time sync
Across entire ecosystem
🔗
Unified data layer
Powering both experiences

Craft & Polish

📷

QR Scan → Load

Instant loading animation with machine name and location appearing as the inventory loads—zero dead time.

Payment Success

"Dispensing…" animated feedback with a progress indicator keeps users informed and confident post-payment.

⚠️

Low Stock Indicator

Subtle urgency cue on near-empty products—pulsing dot + reduced opacity—without being alarming.

Measurable Results

↑30%

Conversion Rate Increase

↓50%

Downtime Response Time

↑35%

Stock Efficiency Improvement

40–50%
Downtime Response Reduction
30–35%
Out-of-Stock Reduction
25–35%
Conversion Rate Increase

Operational Efficiency

Downtime response reduced from hours → minutes (↓ 40–50%)

Manual monitoring replaced with real-time alerts across all machines

Inventory Optimization

Out-of-stock instances reduced by 30–35%

Improved replenishment planning using sales insights

User Experience & Conversion

Purchase flow reduced from 5+ steps → 2–3 steps

Conversion rate increased by 25–35%

Faster checkout led to higher repeat usage

Business Impact

Increased revenue per machine through improved uptime

Scalable system ready for multi-location expansion

Skills & Expertise

🎯

End-to-End Product Design

🔄

B2B + B2C Experience Strategy

📊

Data-Driven UX Decisions

📈

Dashboard & Data Visualization

📱

Mobile-First Interaction Design

🧩

Scalable Design Systems

Tools & Methods

Figma User Interviews Journey Mapping Information Architecture Wireframing Prototyping Usability Testing Design Systems Stakeholder Collaboration