Domain
Healthcare
Platform
Web Application
Timline
2.5 M
Role
PD + Design system
Chapter 1: The Invisible Chaos
The Client's Goal:
Docroach wanted to fix this. They needed a B2B dashboard that manages everything from patients, billing, staff, and appointments without looking like a spreadsheet from 1999.
Chapter 2: Becoming a Spy (The Audit)
Before we opened Figma, we infiltrated the market.
We didn't want to reinvent the wheel; we wanted to fix it. So, I conducted a deep "Spy Mission" into the two players in the game to map their DNA.
The "War Room" (FigJam Analysis): We took screenshots of every single step and mapped them out side-by-side on a massive FigJam board.
Healthplix UX Audit
The Giant (Healthplix): A massive EHR platform handling everything from Doctors to Labs.
The Intelligence: It gave us the blueprint for the complete hospital workflow.
The Flaw: The UI was ancient. Accessibility issues were causing massive delays in simple procedures.
Medivision UX Audit
The Specialist (Medivision): A pharmacy-specific web app.
The Intelligence: I interviewed a pharmacist using this tool to understand their specific inventory pain points.
Competitor's screen flow became our baseline Flow.
The Strategic Advantage: Instead of spending weeks guessing the user flow, we stole it. We used their logical architecture as our base (saving weeks of time) but stripped away the "clutter" and "bad UI" we found during the audit.
The Result: We started the project with a verified user journey, skipping straight to solving the usability gaps.
The Opportunity: I realized we didn't need more features. We needed speed. If I could cut that workflow down, we would win.
Chapter 3: The Strategic Shortcut (Wireframing)
We didn't guess. We didn't waste time. Most designers wireframe every single screen from scratch. I knew that would kill our timeline. Since we had already "spied" on the competitors (Chapter 2), we had the answers—we just needed to refine the questions.
The Surgical Strike (Targeted Wireframes) I adopted a "Less is More" strategy. I refused to wireframe the generic screens (like 'Login' or 'Settings') and focused only on the Critical Paths—the high-risk flows where users were getting stuck.
The Doctor’s Flow: How fast can they diagnose?
The Receptionist’s Flow: How fast can they book?
Wireframes
The Result: We sketched these core skeletons to validate the logic before touching a single pixel. We solved the UX problems on paper so we wouldn't have to solve them in code.
Chapter 4: The Great Reset (Why we scrapped the Custom UI)
Design system based on Shadcn
Branding and Styling Defined
Style Guide: After the first UI was defined, I selected the font family and created the text and color styles.
We had a beautiful, custom-designed interface ready to go. The colors were unique, the buttons were custom-shaped, and the layout was perfect. Then, the development team gave us a reality check.
The Roadblock: To meet the tight launch deadline, building custom components from scratch was impossible. The Mandate: "We need to build this on Shadcn UI. Now."
The Hard Decision: I had to make a choice: fight for my "pretty" designs or pivot for the product's success. I chose the product. I scrapped the custom UI.
The "Shadcn" Pivot: I installed the Shadcn library in Figma and started adapting it instead of drawing it.
The Save: instead of reinventing the wheel, I focused on tuning the engine. I mapped our brand identity to Shadcn’s tokens and customized the typography to ensure high readability for doctors.
Use of Shadcn Library
We used base variables, Tailwind token colors, and text styles. We followed these guidelines, but modified the font family to Manrope.
Docroach Design System Based on Shadcn
The Modification: All base components were prioritized first according to their use in our product. They were modified according to use cases and branding. The base structure helped quickly make it ready for production.
Chapter 5: The Passport to Production (The Handoff)
Figma Prototype for Dev handoff
UI Design
We had a beautiful design in Figma, but Figma doesn't save lives—code does. The journey from "Design File" to "Dev City" is usually where projects break. I wasn't going to let that happen.
1. Packing the Bags (The Dev-Ready Package) I knew developers hate guessing. So, I prepared a "Passport" for every component to ensure smooth travel:
The Blueprint: A clickable prototype that demonstrated the complex flows (like the "2-click" appointment setting).
The Translation Guide: I used Figma’s Dev Mode to write detailed annotations. I didn't just say "make it blue"; I explained behavior—what happens on hover, on error, and on success.
QA and Design dev modification
2. The Border Control (QA Sprint) The first build is never perfect. Instead of emailing feedback, I sat with the developers for a Live QA Session. We tweaked the Shadcn padding and mobile responsiveness together, ensuring the final code looked exactly like the pixel-perfect design we agreed on.
Chapter 6: The Showroom (Landing Page Design)
We had built a Ferrari engine (the dashboard), but we needed a showroom to sell it. To get Docroach into real hospitals, I had to stop thinking like a System Architect and start thinking like a Storyteller.
Landing Page UI Design
The Shift: I stepped out of the complex logic of the dashboard and designed the Marketing Landing Page. My goal was to position us as the "Apple" of healthcare in a sea of "Windows 95" competitors.
The Strategy: While competitors listed 100 confusing features, I sold one feeling: Relief.
The Message: "Hospital management without the headache."
The Visuals: I used large, confident shots of our new UI to prove that our software doesn't look like an Excel sheet from 1999.
Chapter 7: Case Closed
Status: In Development
This project wasn't just about making a hospital dashboard look good. It was about saving time. By accepting the engineering constraint to use Shadcn UI, we stopped arguing about pixels and focused on User Flows.
The Verdict: We turned a chaotic, 12-click administrative burden into a calm, 2-click tool. We proved that a good Design System is a superpower for speed and consistency.
Mission Accomplished. (See you for the next story, or contact me to know more!)