IMED - Intelligent Medical Cloud Inc.
Bridging the Gap in Clinical Operations
iMed (Intelligent Medical Cloud Inc.) identified a critical operational gap: while industry leaders handled scheduling or clinical notes in silos, none offered a bridge to the e-commerce tools clinics use to sell retail products.
As the sole designer, I was tasked with moving beyond a simple registration portal to architect a centralized "Business Operating System" from scratch. This project involved a complete revision of the legacy registration gateway and the creation of an end-to-end suite for inventory, patient CRM, and automated invoicing, all synced via Stripe, Shopify, and WooCommerce APIs.
Problem
The Fragmentation Gap
Clinic owners were suffering from severe "Tab-Fatigue". A typical admin spent their day jumping between four disconnected platforms: Shopify for retail, Jane App for patient records, Stripe for billing, and spreadsheets for invoicing. This lack of connectivity resulted in a massive "Revenue Leak"—online sales never synced with clinical stock, leading to overselling and hundreds of hours wasted on manual reconciliation.
DESIGN PROCESS
The Continuous Iteration Loop (Agile UX)
I utilized an Agile UX lifecycle to ship core modules while refining the gateway through a constant cycle of iteration.
Research: Analyzing legacy registration and identifying clinical pain points.
Design: Mapping data relationships and architecting the new suite.
Develop & Deploy: Building the suite modules in iterative, functional sprints.
Test & Repeat: Validating features with admins and refining based on real-world utility.
Research & Discovery
Market Gap Analysis
I audited industry leaders like Jane App, Phorest, and Aesthetic Record to identify why they weren't solving the "Fragmentation Gap."
Competitive Analysis: While competitors excelled at scheduling, they lacked native, two-way API sync with retail platforms like Shopify and WooCommerce.
User Interview Insight: Admins noted that their "peak frustration" was manual data re-entry required to link a Shopify sale to a clinic invoice.
A/B TESTING & VALIDATION
Pivot: Utility vs. Aesthetic
Early in development, I designed a modern Card-Based Interface for products, prioritizing visual appeal. I ran an A/B test with clinic admins comparing the Card View against a high-density List View.
The Result: 85% of testers preferred the List View. Cards required excessive vertical scrolling and obscured critical data like SKU codes and stock alerts.
The Decision: I pivoted to a streamlined list organization, proving that in medical SaaS, data density and utility significantly outweigh visual fluff.
Information Architecture
The Hub-and-Spoke Model
The architecture centers on a Clinic Selection Screen (The Hub) with dedicated Clinic Management Suite "spokes" for individual locations.
Security Perimeter: A HIPAA/SOC2 compliant gateway with 2FA and regional server selection (Canada, USA, or Europe).
Priority: Zero-Friction Management: The architecture prioritizes spatial continuity over disruptive modals. While the header acts as a status indicator for API connections, the main navigation relies on a side-drawer that reveals edit options without the user ever losing their place on the main screen.
SOLUTION
iMed - Clinic Management Suite
The Unified Operating System
Responsive Contextual Side-Panel: Rather than using intrusive pop-ups, clicking a product or client record triggers a right-hand side panel. The central list and content automatically adjust their width to accommodate the panel, allowing admins to edit medical notes or link/unlink SKUs while the master information remains fully visible.
Integration Status Indicator: The header serves as a real-time server status indicator for API connections (Stripe, Shopify, WooCommerce), providing instant feedback on data sync health.
Automated Billing: Connected to Stripe, the system triggers branded invoices the moment a sale is made via clinic POS machines, which are then automatically emailed to clients.
DESIGN SYSTEM & SCALABILITY
Performance-Driven Foundations
As a solo designer, I built an Atomic Design System to maintain consistency across approximately 50+ custom screens.
Adaptive Colors & Tokens: I implemented a semantic token system for seamless switching between Light and Dark modes. Every token was tested for WCAG AAA accessibility standards (18.38:1 contrast) to ensure absolute legibility in varied clinical lighting environments.
Atomic Blueprint: The system relies on a rigid typography scale and a comprehensive "Sticker Sheet" of components, ensuring developer handoff was seamless and consistent.
Results
From Registration Portal to Business Operating System
In six months, I evolved iMed from a simple registration portal into a functional Business Operating System. By balancing the technical constraints of external APIs with a clean, senior-level interface, I successfully prioritized data flow and operational clarity.
10+
Hours Saved Weekly
15%
Payment Acceleration
1500+
Patient Records
Key Performance Metrics
10+ Hours Saved Weekly: Two-way sync eliminated the "Revenue Leak" caused by disconnected data, saving admins significant time previously spent on manual stock updates.
15% Payment Acceleration: Automating financial workflows through Stripe invoicing and email delivery significantly reduced delayed payments.
1500+ Patient Records: Optimized pagination ensured the suite maintained a sub-2-second load time, even for clinics managing high-density patient databases.
LEARNING OUTCOMES
API-Driven Design: Working as a sole designer on a technical product taught me that the UI is only as good as the data flow. Understanding how Shopify and Stripe APIs communicate was vital to ensuring the product's functional success.
Systems Over Screens: I learned that building a scalable design system early saves hundreds of hours in the long run. The "Token-to-UI" workflow allowed me to redesign the entire invoicing suite in just three days while maintaining 100% consistency.
Trust as a Feature: In medical tech, visual design must reinforce security. Simple details like HIPAA and SOC2 compliance labels in the onboarding flow significantly reduced user friction and increased sign-up completion rates.
The Power of Familiar UX Patterns: My A/B testing between card and list layouts proved that breaking established industry patterns increases cognitive load. Users often prefer familiar, high-density patterns because they align with existing muscle memory; introducing "modern" visual layouts that sacrifice utility can cause user hesitation and decrease operational speed.
Final Screens
Below is the visual journey from the secure login gateway to the fully populated Clinic Management Suite dashboard.
