Telecom, Connectivity-as-a-Service, Web3 Infrastructure
A powerful admin dashboard for enterprise teams to manage and monitor eSIM credit usage, distribution, and billing in one seamless place.
MY ROLE
Senior Product Designer
DURATION
2 Weeks
TEAM
Myself (Solo Design), 1 Product Manager, and 2 Developers
SCOPE
UX research, flow generation, UI design, Figma build, and dev handoff
INTRO
Our Product Manager approached me with a challenge:
Build an Enterprise-grade admin platform to help business partners manage eSIM top-up credits for their teams.
The catch? We had two weeks to go from idea to delivery.
In our Roam project, we offer eSIM services to both individual and enterprise users. This web app was designed specifically for our B2B enterprise partners - enabling them to generate eSIM codes (similar to promo codes) and distribute them to their internal teams. Each code can be assigned to an employee's email, giving the company full visibility and control over how eSIM credits are used.
I designed, built, tested, and handed off a production-ready solution using Cursor AI, Figma, and modern UI libraries, with clean code pushed directly to GitHub for development.
PROBLEM
🔥 Problem
As we launched our Roam Enterprise eSIM offering, several partner companies began requesting large batches of eSIM credits to distribute to their employees - often as travel perks or communication support for remote teams. These credits functioned like digital gift cards, allowing employees to activate mobile data while traveling without incurring costly roaming charges.
However, we quickly ran into operational friction. Without a dedicated admin platform, all requests to generate and distribute eSIM codes had to go through our internal team - resulting in delays, manual errors, and a poor experience for both our team and our partners. Enterprise clients had no visibility into code usage, team assignments, or billing status, making it difficult for them to manage internal distribution at scale.
We needed a scalable, self-serve solution that would give our enterprise clients full control over their eSIM code distribution and management.
GOAL
🎯 Goal
Design and deliver a robust, self-serve enterprise dashboard that empowers company administrators to manage eSIM resources with autonomy and precision. The platform needed to support:
Billing & Usage Management: Track real-time credit usage, billing history, and available balances.
eSIM Code Creation & Monitoring: Generate top-up codes at scale, assign them to employees, and monitor redemption status.
Team-Based Distribution Controls: Define distribution rules and permission levels across departments or regional teams.
Reporting & Insights: Access actionable analytics and export reports for internal audits or expense tracking.
SOLUTION
I built a full admin web app with key modules:
RESULTS
Shipped the full enterprise admin dashboard in just 2 weeks, meeting an aggressive timeline without compromising on quality or scalability.
Delivered clean, production-ready HTML/CSS using Tailwind, enabling the dev team to integrate rapidly with minimal rework.
Streamlined design-to-dev workflow by using html.to.design to convert Cursor-generated code into Figma assets for seamless collaboration, QA, and stakeholder reviews.
Maintained consistency with the existing design system while extending component libraries to support future enterprise features.
The result: A scalable, intuitive platform that gave enterprise partners full control over their eSIM code distribution - reducing manual workload on our internal team and enhancing the partner experience from day one.
RESEARCH
With limited time, I focused on:
Studying gift card management flows from Stripe, Shopify, and AWS Credit Dashboards
Reviewing our existing Roam backend for Group Promo Code logic (reused for eSIM)
Prioritizing features based on product manager interviews and dev constraints
DESIGN
With limited time, I focused on:
Studying gift card management flows from Stripe, Shopify, and AWS Credit Dashboards
Reviewing our existing Roam backend for Group Promo Code logic (reused for eSIM)
Prioritizing features based on product manager interviews and dev constraints
TESTING
Self-tested and walked through edge cases for: Credit deduction logic Expired/insufficient balance handling Distribution permission control Annotated Figma screens to flag logic and rules for devs
UI COMPONENTS
Adopted shadcn/ui as the base for all components (modals, tables, tabs, buttons)
Extended the library for custom states (code group status, balance charts)
Maintained full AutoLayout and naming conventions for dev handoff
LESSONS
Cursor is a game-changer: for structured dashboards, it speeds up early-stage UX ideation drastically
AI → Figma → Dev is viable if you plan it right—plugins like
html.to.designsaved hoursScope prioritization is critical—enterprise dashboards grow fast, so early logic clarity is key
NEXT STEPS
Launch beta with 5 enterprise clients and gather usage feedback
Add Auto Top-Up, advanced billing export, and SSO integration
Explore making parts of the system available to Roam end-users or resellers
