Anna Peter
Work
About
Resume
Customer Portal - BBonCloud
UX/UI DESIGN
INTRODUCTION
BB on Cloud is a cloud-based Healthcare Management Software Suite, providing scalable and secure solutions for healthcare facilities of all sizes. To streamline system management, we designed the Customer Portal, a centralized platform where users can monitor purchases, submit support tickets, access documentation, and manage billing. The portal simplifies complex operations, enabling healthcare providers to manage their software with greater efficiency and ease.
MY ROLE
Responsible for research, Conceptualization, UX Design, Delivery of key modules and feature areas, User testing
THE TEAM
2 designers, 1 product manager, 4 engineers
TIMELINE
August 2023 - November 2024
THE CHALLENGE
The healthcare sector is rapidly embracing cloud technologies to replace outdated, costly, and inflexible on-premises systems. With growing demands, healthcare organizations need scalable solutions to manage complex digital tools like HIS, supply chain, and lab information systems. One of our multi-specialty hospital clients struggled with managing multiple systems across departments, leading to operational inefficiencies and mismanaged support requests - hence highlighting the need for a centralized platform to streamline system management.
Operational Inefficiencies
Healthcare organizations struggled with managing multiple systems across departments, leading to disjointed workflows and inefficiencies.
Fragmented Support Process
Mismanaged and delayed support requests resulted in prolonged downtime and disrupted operations.
Complex Billing and
Subscription Management
Healthcare providers found it difficult to manage billing, subscriptions, and usage-based costs, leading to confusion and administrative burden.
Limited Access to Resources
and Documentation
Users had trouble accessing important product documentation, updates, and guides, which hampered self-service troubleshooting and training.
Global Purchasing Challenges
Clients from different countries faced difficulties due to varying currencies, complicating and confusing the purchasing and billing processes.
THE PROCESS
We initiated the design process by sitting down with hospital administrators to understand their daily challenges in managing various systems, studied similar platforms to identify gaps, and gathered their requirements to inform our design direction.
I. DEFINING THE PORTAL’S ARCHITECTURE
We created a detailed mind map in Miro,to structure the architecture of customer portal. This allowed us to map out the full scope of the portal’s functionality, including user interactions, workflows, and touchpoints. The mind map served as an essential base for identifying relationships between various features and ensuring comprehensive coverage of user needs.
Outcome : A clear visual representation of the portal's architecture that defined key areas such as account management, support systems, and billing interfaces.
II. USER-CENTRIC INFORMATION ORGANIZATION
To inform the portal’s navigation and structure, we conducted an extensive hybrid card sorting exercise with target users. This enabled us to understand how users intuitively group and label features. By analyzing the results, we optimized the information hierarchy, making it more intuitive and aligned with user expectations.
.png)
Outcome : Data-driven insights that shaped the portal’s menu structure, ensuring that key features were categorized and prioritized based on real user behavior.
III. STRUCTURING THE EXPERIENCE
Building on the mind map and card sorting outcomes, we developed a comprehensive information architecture (IA) flow. The IA was crafted to ensure seamless navigation and accessibility, balancing user goals with system constraints. The result was a well-defined structure that reduced cognitive load and enhanced task completion efficiency.
Outcome : A robust information architecture that streamlined the user journey, reducing friction and enabling quick access to critical functions such as real-time monitoring, support ticketing, and billing management.
SOLUTION
A Centralized, User-Centric Portal
Our solution for the BB on Cloud Customer Portal simplifies and centralizes key operations for healthcare providers. By consolidating complex processes into an intuitive platform, we created a streamlined experience that enables users to efficiently manage their software, access support, and handle billing. Prioritizing clarity over complexity, the design ensures healthcare administrators can easily navigate and access essential tools, reducing administrative burden and improving workflow efficiency.
I. LOGIN FOR CUSTOMERS
Existing User : To access their accounts, existing users enter their registered email and receive a One-Time Password (OTP) via email. After entering the OTP, users are verified and granted access to the customer portal.
New User Registration : The registration process for new users was designed to be simple and intuitive. Users provide essential information, such as name, contact number, and email. After submitting, they receive an OTP via email for verification, ensuring their account is authenticated before granting access.
Authentication successful
OTP authentication screen - empty
UX Impact: Our login system provides both convenience and security. By using OTP verification for existing and new users, we make the login process fast and easy while ensuring strong account protection. This approach reduces friction, making it simple for users to access the portal without the hassle of passwords, while still keeping their accounts secure.
II. ACCOUNT DETAILS
Based on feedback from healthcare providers, we designed this section to allow effortless management of personal and organizational details, ensuring users can quickly update important information such as company name, contact details, and location.
My Profile
My Profile - Update Data screen
UX Impact: Streamlined profile management addresses user pain points around maintaining accurate records, significantly reducing the administrative burden.
III. SERVICE OVERVIEW - MY PRODUCTS
Real-world insights showed that users wanted a clear, centralized view of all purchased products. This section provides detailed information, including billing cycles, payment history, and the ability to easily add users. This solution empowers administrators with full control over their subscriptions, making product management simple and scalable.
My Products
Alert - before adding new user to existing plan
My Products - Empty
UX Impact: With real-time visibility into product usage and flexible user management, this solution directly addresses user demands for better control and scalability.
IV. BILLING & SUBSCRIPTIONS
Our research revealed that users needed a more intuitive way to manage subscriptions and financial records. We designed a billing section that displays subscription statuses, billing cycles, and detailed order histories, with options to download invoices or manage payments. This approach not only enhances clarity but also ensures users are always in control of their financial data.
Renewals & Billing
Table content - After clicking ‘Show more’
Cancel subscription
Confirmation & feedback once after subscription is cancelled.
Renewing an existing plan
Cancel subscription
Pop-up screen to choose the billing cycle
Payment API
Seamless Payment Integration
The payment gateway is fully integrated into the process, offering a smooth transition from order placement to payment completion. This secure, well-integrated payment flow ensures that users feel safe and confident throughout the transaction.
Payment successful screen
UX Impact: A secure, seamless payment experience reduces anxiety during transactions, enhancing user satisfaction and encouraging repeat purchases. The simplicity of the flow minimizes errors, ensuring a smooth conclusion to the user journey.
Optimized Purchasing Experience
The design of the purchase flow focuses on simplifying the decision-making process for users.
At the Confirm Plan stage, users are guided through selecting the billing cycle and applying discounts, helping them feel in control of their purchase options. This step addresses the need for flexibility and personalization while ensuring clarity at every step.
UX Impact: By presenting users with clear options upfront, we reduce cognitive load, allowing them to make informed decisions without feeling overwhelmed.
Transparent Checkout Process
The checkout page is designed to build trust and reinforce user confidence. By reviewing their billing details and choosing a payment method, users are given full visibility of their purchase.
Order History Screen
User Agreement Screen
UX Impact: Simplified, user-friendly financial management reduces confusion and enables healthcare providers to track payments and subscriptions effortlessly.
UX Impact: Transparency during checkout enhances user trust and minimizes the likelihood of abandonment, while a clear, well-structured layout keeps the process efficient and intuitive.
V. SUPPORT CENTER
The need for transparent, real-time support was a critical finding from our research. The Support Center offers an easy-to-use ticketing system where users can submit concerns, attach relevant files, and track the status of their requests. This feature was designed to provide timely and effective resolution to support issues, enhancing user satisfaction.
Ticket Creation Screen - empty
Ticket Creation Screen - Active
UX Impact: The seamless, data-driven support system improves response times, ensuring users can resolve their issues with minimal friction.
RESULTS & IMPACTS
The redesigned BB on Cloud Customer Portal had a transformative effect on both user experience and business operations, enhancing client satisfaction and operational efficiency across the board.
20% Increase in User Engagement
With simplified processes and self-service features, user engagement in key areas like Renewals & Billing saw a notable increase.
70% Reduction in Support Tickets
The intuitive Help & Support section enabled users to resolve issues independently, resulting in a significant reduction in support tickets.
30% Faster Task Completion
The streamlined navigation and clear organization of the portal helped users complete tasks like managing products and billing cycles much more efficiently.
200+
Satisfied Clients
Qualitative Feedback
Feedback Healthcare administrators found the portal easy to navigate with a clear and logical information structure. They specifically appreciated how straightforward it was to manage billing and product details. The design effectively met their operational needs, simplifying routine management.
98%
Customer Retention
Business Impact
With over 200 clients relying on BB on Cloud's solutions, the portal's design improvements helped maintain a 98% customer retention rate by addressing key user pain points and simplifying interactions.
Cost Efficiency
The reduced need for customer support led to lower operational costs, while the self-service features empowered clients to manage their software independently.
KEY TAKEWAY
This project presented a unique opportunity to apply user-centered design principles in a highly specialized and complex industry—healthcare. Reflecting on the process, several key insights stand out that have not only refined my approach but also deepened my understanding of designing for critical, real-world environments.
Iterative Testing is Non-negotiable
Continuous feedback and iteration refined the product, making it adaptable to diverse healthcare environments and ensuring a seamless user experience.
Collaboration Ensures Alignment
Direct collaboration with healthcare administrators and stakeholders proved essential in aligning the design with real user needs, ensuring the solution wasn't just functional, but also deeply relevant and valuable to those using it daily.
Balancing Complexity with Usability
The challenge of integrating multiple systems into a single portal taught me the importance of designing for clarity without sacrificing functionality.
LOOKING AHEAD....
As successful as the portal has been, there are always areas to further refine. This project has strengthened my resolve to continuously improve designs, not just based on current needs, but with future scalability in mind. We’ve identified potential enhancements, which could be explored in future iterations for phase II.
Enhanced Personalization
Introduce more personalized dashboards and tailored content based on the user's role within the healthcare organization, enabling a more relevant experience for administrators, doctors, and staff.
Advanced Analytics & Reporting
Integrate advanced data analytics features, allowing users to gain deeper insights into their software usage, operational efficiency, and financial performance to support better decision-making.
AI-Powered Support
Implement AI-driven support features like automated troubleshooting and predictive ticket resolution to improve the speed and accuracy of support responses.
Still curious?!
Next Project
Built with passion, precision and hot chocolates
© 2025 ANNA PETER