UX/UI Design

Medea

Online Medical Clinic Platform

Medea

The Challenge

Medea needed a digital platform for an online medical clinic that handled user registration, task browsing with multiple filter dimensions (urgency level, cost structure, medical specialty), and a two-step application process for medical tasks. The interface needed to serve both patients seeking care and medical professionals offering services.

Healthcare platforms demand exceptional clarity and trust — users need to quickly find relevant tasks, understand requirements and qualifications, and complete applications without confusion or anxiety. Every form interaction needed thoughtful validation that guided users rather than blocking them. The data model had to accommodate complex relationships between patients, professionals, tasks, applications, and scheduling while maintaining strict data isolation between users.

Our Solution

We designed the complete technical architecture around Next.js with TypeScript for the frontend, with a backend powered by Node.js, Prisma ORM, and PostgreSQL. Prisma was chosen specifically for its type-safe database client — in a healthcare context, preventing data access errors at compile time rather than runtime is a meaningful safety improvement.

The task-based platform uses a smart filtering system on the home screen where users can combine urgency, cost, and specialty filters with instant results. Each filter change triggers an optimized database query through Prisma's query builder rather than client-side filtering, keeping the interface responsive even with thousands of available tasks.

The two-step application process uses React Hook Form for state management across form steps with Zod schema validation at each stage. Real-time validation provides inline feedback as users type — clear, helpful error messages appear contextually rather than dumping all errors after submission. Form state persists across steps so users never lose progress.

The design uses a calm, clinical color palette that instills trust while maintaining warmth and approachability. Every interaction was designed to reduce cognitive load for users who may be navigating the platform during stressful health situations.

Vercel handles hosting with Supabase providing the PostgreSQL database, real-time subscriptions for live task updates, and row-level security policies ensuring patients and professionals can only access their own data.

Results

Full Design
Deliverable
Complete UI/UX design with architecture
5+
Flows
Registration, login, browse, filter, apply
Real-time
Validation
Inline form feedback at every step
Design Phase
Status
Architecture planned, ready for development

Project Gallery

Project Details

Year

2024

Client

Medea

Services

Suggested Tech Stack

Frontend
Next.jsTypeScriptTailwind CSS
Backend
Node.jsPrismaPostgreSQL
Validation
React Hook FormZod
Hosting
VercelSupabase

Interested in a similar project?

Let's discuss how we can help bring your vision to life.

Start a Conversation