Vodafone Idea PreTUPS VMS

User interface redesign and for Vodafone Idea’s high-volume PreTUPS recharge and voucher management system.

Client
VodafoneIdea Ltd.


Role: UI/UX Designer,
Front-End Developer

Tools: Figma, AEM, HTML, CSS,
JavaScript, React



PreTUPS VMS is Vodafone Idea’s high-volume Voucher Management System, handling millions of prepaid and postpaid top-ups and transactions daily across India. Agents and partners rely on it for tasks like recharge, balance transfers, reports, and user management.

Goals

  • Modernize the UI for agents and partners.

  • Streamline core tasks like recharge, balance transfer, and reporting.

  • Develop modular components for faster scaling.

Problem & Challenges

The legacy VMS had an outdated user interface, scattered workflows, and inconsistent page structures. Agents had to navigate multiple steps for simple tasks like processing recharges or checking reports. The lack of reusable UI components increased maintenance effort and slowed down feature rollouts.

Sitemap


Mapped out a clear information hierarchy for key agent tasks, balancing operational workflows with modern UI patterns. Identified and grouped related features such as recharge flows, transaction history, agent management, and performance reports to simplify daily navigation.

Collaborated with business analysts and stakeholders to validate that the sitemap aligned with real-world agent scenarios and prioritized the most-used actions up front.

By organizing the structure into logical parent and child pages, we reduced redundant pages, eliminated dead ends, and laid the foundation for a more intuitive and efficient user journey.

Flowchart of PreTUPS VMS system with sections for Agent Dashboard, Recharge Flow, Reports, and User Management, each containing related functions.

Wireframes

I created a set of low-fidelity wireframes to lay the foundation for a clean, intuitive PreTUPS VMS interface. The wireframes focused on streamlining daily agent tasks like monitoring transactions, processing recharges, and managing user profiles.

For the Agent Dashboard, I mapped out a sidebar navigation with clear links to key sections — Dashboard, Transactions, Reports, and Settings — paired with a stats panel, a recent transaction table, and quick action buttons for high-frequency tasks.

The User Profile wireframe visualized how agents can view and update customer information, access quick actions like resets or edits, and track account history all on one screen.

A grayscale computer interface layout for a shipping or customer service application. It includes sections labeled 'Header', 'Footer', and 'PretUPS VMS' on the left sidebar. The main content area has a 'Quick Stats' section with a placeholder for 'Customer ID' and a list of recent transactions with their statuses. Below, there is a 'Quick Actions' section with a blank area and a graph labeled 'Continue'.
Screenshot of a user interface with a header, navigation dropdown, table for customer ID and recent transactions, quick action buttons, and a footer.
Wireframe of a webpage layout with labeled sections including Header, User Information, three action buttons, a history box, and a Footer.
Wireframe layout of a profile page on a website with header, profile information section, three action buttons, a history section, and a footer.

Hi-Fidelity Mockup

Designed responsive high-fidelity screens for both desktop and mobile, showing real-time stats, quick actions, and reusable UI elements like buttons, tables, and modals.

Focused on applying the Vodafone Idea Ltd. brand colors and visual style to create a familiar, trustworthy look and feel for agents and partners.

The mobile mockups demonstrate how the same key tasks adapt fluidly to smaller screens while maintaining consistent usability, accessibility, and performance.

Three smartphone screens displaying a mobile recharge app. The first screen shows the agent dashboard with total balance, sales today, total transactions, a sales graph, recent transactions, and quick action button for new recharge. The second screen is the recharge interface where a customer lookup is performed, recharge amount details are entered, and the recharge is confirmed. The third screen shows the user profile page with personal information, options to change password, edit info, sign out, and transaction history.